★楽々アフィリエイト管理～ by 楽拓.com

楽拓.comホーム

ソフトウェア

楽々アフィリエイト管理

ＨＴＭＬ出力使用例

ＨＴＭＬ出力を使うとＷｅｂページに簡単に広告を追加することが出来ます。
一度Ｗｅｂページの広告領域を設定してしまえば、後は楽々アフィリエイト管理で作業するだけで済みます。

以下の手順でＷｅｂページを作成すると「このようなページ」が簡単に作れます。
既にＷｅｂページを運営している方は、一部を書き換えるだけで簡単に広告の追加が出来ます。

■ここでの設置条件

１．SSIの  が使えるサーバであること。
２．ローカルの C:\Home\hogehoge\public_html にファイルを置く。
３．サーバのhttp://www.hoge.com/~hogehoge/ にUploadする。

※実際に作成するときはお使いの環境に合わせて変更してください。

■必要なファイルを作成

C:\
　Home\
　　hogehoge\
　　　public_html\
　　　　|　index.html 　……　ＨＴＭＬエディタ等で作成
　　　　|　index.shtml　……　　　　〃
　　　　|　page1.shtml　……　　　　〃
　　　　|　page2.shtml　……　　　　〃
　　　　|
　　　　+─include\
　　　　|　　header.inc 　　……　テキストエディタで作成
　　　　|　　menu.inc 　　　……　　　　〃
　　　　|　　footer.inc 　　……　　　　〃
　　　　|　　adv_menu.inc　　……　HTML出力によって作成する（１列で出力）
　　　　|　　adv_bottom.inc　……　　　　　〃　　　　　　　（４列で出力）
　　　　|　　adv_goods.inc 　……　　　　　〃　　　　　　　（３列で出力）
　　　　|
　　　　+─css\
　　　　　　　style.css 　　　……　テキストエディタで作成（全体のスタイル設定）
　　　　　　　adv_menu.css　　……　テキストエディタ又はCSSメーカーで作成（広告表示用）
　　　　　　　adv_bottom.css　……　　　　〃　　　　　　　　　　　　　　 （広告表示用）
　　　　　　　adv_goods.css 　……　　　　〃　　　　　　　　　　　　　　 （広告表示用）

■各ファイルの作成

[ index.html ] … index.shtmlに自動的に移動させる

<meta http-equiv="refresh"
               content="0; URL=http://www.hoge.com/~hogehoge/index.shtml">
<a href="http://www.hoge.com/~hogehoge/index.shtml">
自動的に移動しない場合はここをクリックしてください</a>

[ index.shtml ]

<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="/~hogehoge/css/style.css" type="text/css">
<link rel="stylesheet" href="/~hogehoge/css/adv_menu.css" type="text/css">
<link rel="stylesheet" href="/~hogehoge/css/adv_bottom.css" type="text/css">
<title>トップページ</title>
</head>
<body>
<div class="header">
<!--#include virtual="/~hogehoge/include/header.inc"-->
</div>
<table class="center">
  <tr>
    <td class="menu">
      <div class="menu">
        <!--#include virtual="/~hogehoge/include/menu.inc"-->
        <br>
        <!--#include virtual="/~hogehoge/include/adv_menu.inc"-->
      </div>
    </td>
    <td class="main">
      <div class="contents">

      ここにメインのコンテンツを作成します。<br>
      ようこそ！○○のページへ。<br>
      ここは○○のページのトップページです。<br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <div style="color:#FF0000; text-align:left;">
      左のメニューの広告の部分と、
      下部のテキストリンクのみの広告が、
      楽々アフィリエイト管理で出力されたHTMLを使っている部分です。
      </div><br>

      <!--#include virtual="/~hogehoge/include/adv_bottom.inc"-->

      </div>
    </td>
  </tr>
</table>
<div class="footer">
<!--#include virtual="/~hogehoge/include/footer.inc"-->
</div>
</body>
</html>

[ page1.shtml ]

<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="/~hogehoge/css/style.css" type="text/css">
<link rel="stylesheet" href="/~hogehoge/css/adv_menu.css" type="text/css">
<link rel="stylesheet" href="/~hogehoge/css/adv_bottom.css" type="text/css">
<title>トップページ</title>
</head>
<body>
<div class="header">
<!--#include virtual="/~hogehoge/include/header.inc"-->
</div>
<table class="center">
  <tr>
    <td class="menu">
      <div class="menu">
        <!--#include virtual="/~hogehoge/include/menu.inc"-->
        <br>
        <!--#include virtual="/~hogehoge/include/adv_menu.inc"-->
      </div>
    </td>
    <td class="main">
      <div class="contents">

      ここにメインのコンテンツを作成します。<br>
      ようこそ！○○のページへ。<br>
      ここは自己紹介ページです。<br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <div style="color:#FF0000; text-align:left;">
      左のメニューの広告の部分と、
      下部のテキストリンクのみの広告が、
      楽々アフィリエイト管理で出力されたHTMLを使っている部分です。
      </div><br>

      <!--#include virtual="/~hogehoge/include/adv_bottom.inc"-->

      </div>
    </td>
  </tr>
</table>
<div class="footer">
<!--#include virtual="/~hogehoge/include/footer.inc"-->
</div>
</body>
</html>

[ page2.shtml ]

<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="/~hogehoge/css/style.css" type="text/css">
<link rel="stylesheet" href="/~hogehoge/css/adv_menu.css" type="text/css">
<link rel="stylesheet" href="/~hogehoge/css/adv_bottom.css" type="text/css">
<link rel="stylesheet" href="/~hogehoge/css/adv_goods.css" type="text/css">
<title>トップページ</title>
</head>
<body>
<div class="header">
<!--#include virtual="/~hogehoge/include/header.inc"-->
</div>
<table class="center">
  <tr>
    <td class="menu">
      <div class="menu">
        <!--#include virtual="/~hogehoge/include/menu.inc"-->
        <br>
        <!--#include virtual="/~hogehoge/include/adv_menu.inc"-->
      </div>
    </td>
    <td class="main">
      <div class="contents">
      <br>

      ここにメインのコンテンツを作成します。<br>
      ようこそ！○○のページへ。<br>
      ここは商品リンクのページです。<br>
      <br>
      <div style="color:#FF0000; text-align:left;">
      左のメニューの広告の部分と下の商品リンク広告が、
      楽々アフィリエイト管理で出力されたHTMLを使っている部分です。
      </div><br>

      <!--#include virtual="/~hogehoge/include/adv_goods.inc"-->

      </div>
    </td>
  </tr>
</table>
<div class="footer">
<!--#include virtual="/~hogehoge/include/footer.inc"-->
</div>
</body>
</html>

[ header.inc ]

<div class="title">○○のページ</div>
<div class="header_comment">ようこそ○○のページへ。</div>

[ menu.inc ]

<a href="/~hogehoge/index.shtml" class="menu_link">トップページ</a><br>
<a href="/~hogehoge/page1.shtml" class="menu_link">自己紹介</a><br>
<a href="/~hogehoge/page2.shtml" class="menu_link">商品リンク</a><br>

[ footer.inc ]

<div class="copyright">copyright 2005 ○○. All rights reserved.</div>

[ style.css ]

body {
  text-align: center;
}

div.header {
  text-align: center;
  width: 652px;
  font-size: 12px;
  background-color: #3366CC;
  padding: 5px 5px 5px 5px;
}
div.title {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
}
div.header_comment {
  font-size: 14px;
  color: #FFFFFF;
}
table.center {
  border: hidden;
  border-collapse: collapse;
  width: 650px;
  text-align: center;
}
td.menu {
  text-align: left;
  vertical-align: top;
}
div.menu {
  font-size: 12px;
  width: 150px;
  background-color: #99CCFF;
}
td.main {
  vertical-align: top;
  background-color: #FFFFFF;
}
div.contents {
  width: 500px;
}
div.footer {
  color: #FFFFFF;
  background-color: #3366CC;
  width: 652px;
}
div.copyright {
  text-align: right;
}

[ adv_menu.css ]

div.adv_menu_frame {
  width: 150px;
  font-size: 10px;
}
table.adv_menu_frame {
  width: 150px;
  font-size: 10px;
}
td.adv_menu_data {
  vertical-align: top;
}
div.adv_menu_adv {
  width: 150px;
  font-size: 10px;
}
div.adv_menu_title {
  font-size: 10px;
  font-weight: 600;
  color: #003399;
}
div.adv_menu_comment {
  font-size: 10px;
}
div.adv_menu_banner {
  font-size: 10px;
  color: #0000FF;
}
div.adv_menu_copyright {
  font-size: 10px;
  text-align: right;
}
a.adv_menu_copylink {
  color: #000000;
  text-decoration: underline;
}
a:hover.adv_menu_copylink {
  color: #333333;
  text-decoration: underline;
}

[ adv_bottom.css ]

div.adv_bottom_frame {
  width: 500px;
  font-size: 11px;
}
table.adv_bottom_frame {
  width: 500px;
  font-size: 11px;
}
td.adv_bottom_data {
  vertical-align: top;
}
div.adv_bottom_adv {
  width: 120px;
  font-size: 9px;
  padding: 0px 5px 5px 0px;
}
div.adv_bottom_title {
  font-size: 9px;
  font-weight: 600;
  color: #0000FF;
}
div.adv_bottom_comment {
  font-size: 9px;
}
div.adv_bottom_banner {
  font-size: 9px;
}
div.adv_bottom_copyright {
  font-size: 9px;
  text-align: right;
}
a.adv_bottom_copylink {
  color: #000000;
  text-decoration: underline;
}
a:hover.adv_bottom_copylink {
  color: #333333;
  text-decoration: underline;
}

[ adv_goods.css ]

div.adv_goods_frame {
  width: 500px;
  font-size: 11px;
}
table.adv_goods_frame {
  width: 500px;
  font-size: 11px;
}
td.adv_goods_data {
  vertical-align: top;
}
div.adv_goods_adv {
  width: 160px;
  height: 160px;
  font-size: 11px;
  border: dashed 2px;
  padding: 5px 5px 5px 5px;
  margin-bottom: 5px;
}
div.adv_goods_title {
  font-size: 12px;
  font-weight: 600;
  color: #0000FF;
}
div.adv_goods_comment {
  font-size: 11px;
}
div.adv_goods_banner {
  font-size: 11px;
}
div.adv_goods_copyright {
  font-size: 11px;
  text-align: right;
}
a.adv_goods_copylink {
  color: #000000;
  text-decoration: underline;
}
a:hover.adv_goods_copylink {
  color: #333333;
  text-decoration: underline;
}

[ adv_menu.inc ]

楽々アフィリエイト管理のＨＴＭＬ出力機能を使って作成します。
各広告のタグは小さいバナーにするかテキストリンクを使用します。
ＨＴＭＬ生成画面で次の様に設定します。
　・基本レイアウト：「１列」。
　・タグClass名：「adv_menu」と入力。
　・出力先：「C:\Home\hogehoge\public_html\include\adv_menu.inc」。
　・プレビュー用StyleSheet：「C:\Home\hogehoge\public_html\css\adv_menu.css」。

[ adv_bottom.inc ]

楽々アフィリエイト管理のＨＴＭＬ出力機能を使って作成します。
各広告のタグは小さいバナーにするかテキストリンクを使用します。
ＨＴＭＬ生成画面で次の様に設定します。
　・基本レイアウト：「４列」。
　・タグClass名：「adv_bottom」と入力。
　・出力先：「C:\Home\hogehoge\public_html\include\adv_bottom.inc」。
　・プレビュー用StyleSheet：「C:\Home\hogehoge\public_html\css\adv_bottom.css」。

[ adv_goods.inc ]

楽々アフィリエイト管理のＨＴＭＬ出力機能を使って作成します。
広告のタグには商品リンク等のタグをそのまま使用します。
ＨＴＭＬ生成画面で次の様に設定します。
　・基本レイアウト：「３列」。
　・タグClass名：「adv_goods」と入力。
　・出力先：「C:\Home\hogehoge\public_html\include\adv_goods.inc」。
　・プレビュー用StyleSheet：「C:\Home\hogehoge\public_html\css\adv_goods.css」。

ソフトウェア総合

サポート掲示板

楽々出品

楽々出品

ダウンロード

オンラインマニュアル

FAQ

楽々アフィリエイト管理

ダウンロード

オンラインマニュアル

アフィリエイトとは？

FAQ



	Copyright(c) 2004-2006 楽拓. All rights reserved.