アフィリエイトの設置にチャレンジ！

ここでは、おなじみのAmazonのアソシエイト・プログラムを使ったアフィリエイトの設置にチャレンジします。

下準備として、Amazon.co.jpのアソシエイト・プログラムに参加して、サイトの審査に通過する必要があります。従って、サイトが完成して、サーバーへアップロードしてから参加するようにしてください。

審査に通過したら、アソシエイト・プログラムページでログインします。

ログインすると左側に「リンクの作成」というのがあります。

アフィリエイトをする場合、サイトの内容とよりマッチしている方が有利ですので、「個別商品リンク」を選択します。

ジャンルとキーワード（本などであればISBNも利用可能）を入れて、「Go」をクリックします。

検索結果が出てきますので、目当ての商品を探します。目当ての商品が出てきたら、「リンク作成」をクリックします。

リンクタイプは「テキストとイメージ」「テキストのみ」のいずれかを選択します。

ここでは、「テキストとイメージ」を選択します。

「この個別商品リンクのHTMLを取得する」にHTMLが記載されています。「HTMLをハイライトする」をクリックすると、HTMLが選択された状態になるので、コピーします。

メニューのツール→「挿入」→「コミュニケーション」→「アフィリエイト」でアフィリエイト用のHTML挿入用の画面が出てきます。

右クリックして「貼り付け」を選ぶか、Ctrl+Vで、先ほどコピーしたアフィリエイト用のHTMLを挿入します。

URLに半角の&が含まれていますので、半角の&は&に変更して下さい。その後、OKボタンをクリックします。

これで、挿入できました。

テキストの場合も手順は同様になります。

アフィリエイト用HTML挿入を補助してくれる画面はありませんので、HTMLソース編集画面で直接HTMLソースを貼り付けます。

タグの入れ子関係には気をつけてください。当サイトで学んだ方にはさほど難しくないと思います。body要素の直下になるようにします。

Amazonのサイトで用意してくれる、「テキストとイメージ用」HTMLは、Strict DTDでは使えません。iframe要素がそもそも定義されていないからです。

Amazonアソシエイト・プログラム用のHTMLを生成してくれるサイトがいくつかありますので、それを利用しましょう。

今回は、「G-Tool」を利用します。

目当ての商品を探した後、「ブログで感想を書く」ボタンをクリックします。

「<table>なし」というタブが上にありますので、それに切り替えます。

その後、使用したいデザインを選択して、「このデザインに決定」をクリックします。今回は、「シンプル 写真 中」を利用します。

商品ページへ直接リンクしたい場合は、HTML生成のオプションで「直接リンク」で「する」をつけて、「オプションの変更を反映する」をクリックします。

なお、「シンプル 写真 中」「シンプル 写真 小」以外では、「CSSを自分で指定」を選択しておかないと、font要素が含まれたHTMLソースが生成されますので気をつけてください。

生成されたHTMLをコピーします。

ただし、この時点でのHTMLは、

<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798010030/AmazonアソシエイトID/ref=nosim/" target="_top">詳解 HTML & XHTML & CSS辞典</a><br />大藤 幹 <br /><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798010030/AmazonアソシエイトID/ref=nosim/" target="_top"><img src="http://ec2.images-amazon.com/images/P/4798010030.09._SCMZZZZZZZ_.jpg" alt="4798010030" /></a><br />

となっています。

a要素のtarget属性は使えませんから、それを削除します。HTML4.01の場合は、空要素であるimg要素とbr要素の />を>に修正します。また、商品名に&が含まれていますが、&をそのままHTMLソースに埋め込むことをはできないので、実体参照を使います。&を&amp;に修正します。

HTMLソースをHTML4.01 Strict向けに変更した後のソースは、以下の通りになります。これをp要素などのブロック要素の中に入れます。

<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798010030/AmazonアソシエイトID/ref=nosim/">詳解 HTML &amp; XHTML &amp; CSS辞典</a><br>大藤 幹 <br><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798010030/AmazonアソシエイトID/ref=nosim/"><img src="http://ec2.images-amazon.com/images/P/4798010030.09._SCMZZZZZZZ_.jpg" alt="4798010030"></a>

詳解 HTML & XHTML & CSS辞典
大藤 幹

V12からは楽天アフィリエイトへのリンクがかんたんに張れるツールが用意されています。

楽天アフィリエイトIDが未収得だとして説明をします。

ナビバーのをクリックしましょう。

「設定」ボタンをクリックします。

「追加」ボタンをクリックします。

一見、プルダウンで他のサービスも選べるのか？と期待させるのですが、楽天アフィリエイトしか選べませんので、そのまま「OK」ボタンをクリック。

楽天アフィリエイトを開始するには、アフィリエイトIDとデベロッパーIDの2つが必要です。アフィリエイトIDは「アフィリエイトIDの取得・確認」から、デベロッパーIDは「デベロッパーIDの取得・確認」から行って下さい。

楽天の会員登録がまだの人は楽天会員登録からはじめましょう。

ブラウザが起動しますので、ページの説明通りにアフィリエイトIDとデベロッパーIDの取得を行います。それぞれのIDが取得できたら、それを入力し、OKボタンをクリックします。

これで設定が完了したので、ナビバーの方に戻り、「検索」ボタンをクリックしましょう。

キーワードとジャンルを選択して、「OK」ボタンをクリックします。

検索結果が出てきますので、目当ての商品が見つかるまで「次へ」ボタンをクリックすると良いでしょう。また、デフォルトではリスト表示になっているので、「表示」ボタンをクリックしてサムネイル表示に変えた方が良いかと思います。

目当ての商品が見つかったら、商品をクリックした後、「挿入」ボタンをクリックします。

アフィリエイトに含める情報をチェックして、「次へ」ボタンをクリックします。

挿入形式とリンク方法を選択して、「完了」ボタンをクリックします。

aタグでリンクした場合

3段ボックス（幅42cm）

イベント処理でリンクした場合

イベント処理でリンクした場合、JavaScript無効環境では商品ページへ行くことができませんので、aタグでリンクする方が良いかと思います。

これで、楽天アフィリエイトの挿入ができました。