新米IT技術者の徒然なるブログ

しがない新米IT技術者のIT情報や趣味を綴ります

【Amazonアソシエイト】サイドバーで商品紹介をしよう!

f:id:alba_ahoudori:20150406000523j:plain

こんばんわ。

更新が滞っている alba です。

 

最近やっと Amazonアソシエイト 通過しました!!

4,5回申請しての通過だったのですが、通過した理由があまりよくわかってないです。

ので、今回はサイドバーに商品紹介する手順を載せていきたいと思います。

といっても若干html書くくらいでそこまでの手順ではないのですが、htmlを利用するのでコピペ要因とでもなれば幸いです。

今回私が載せたのは以下の商品です。

 

最近電車内でもよく広告をみかけるスーツやシャツに使える衣類スチーマーです。

普通に今欲しい。アイロン持ってないし、めんどくさがりなので持っていてもそうそう使わないですしおすし。

今回はこれをサイドバーに追加していきます。

 

 

 

Amazonアソシエイトにログインして、上記の商品を探して、リンクを作成します。作成するリンクは以下のふたつ。

画像(大きさは"商品イメージ 小"がちょうどいいでしょう)

 商品タイトル

Panasonic アイロン/パンツプレス 衣類スチーマー ブラック NI-FS350-K

 

②ダッシュボードの[デザイン]からサイドバーにモジュール追加画面を開きます。

 下図のように赤枠で囲まれた箇所をクリックすればモジュールの追加画面が開きます。

f:id:alba_ahoudori:20150509231053p:plain

 

③モジュールの追加画面から以下のように設定します。

タイトル

⇒ブログ上に表示される項目のタイトルです。私は "この商品、私気になります!(Amazon)" にしています。

コード

以下の★で囲ったところに①で作ったコードを置き換えて、コピーし貼り付けます。

<table>
    <tbody>
        <tr>
            <td colspan="2"><hr style="color:ghostwhite;"></td>
        </tr>
        <tr>
            <td>★商品画像のコード★</td>
            <td>★商品名のコード★</td>
        </tr>
        <tr>
            <td colspan="2"><hr style="color:ghostwhite;"></td>
        </tr>
     </tbody>
</table>

 

二つ目以降の広告は</tbody>の前に以下のコードをいれます。

<tr>
     <td>★商品画像のコード★</td>
     <td>★商品名のコード★</td>
</tr>
<tr>
     <td colspan="2"><hr style="color:ghostwhite;"></td>
</tr>

 

※ラインがはいりますので、もしいらなければ<tr><td colspan~></td></tr>の箇所を削除してください。

  モード

 初期設定で "HTML" でOKです。

 

④[適応]ボタンを押下後、[変更を保存する]ボタンを押して完了です。

 

以上で手順は終わりですが、結構シンプルなものになりますので自身のブログにあわせてコードを修正してみるといいでしょう。

ちなみに広告の載せすぎには注意しましょう。訪問者がブログにアクセスしたときに読み込む時間が余計にかかるからです。アクセスに時間がかかればかかるほど訪問者は減ることになるでしょう。

 

デザインの学校 これからはじめるHTML&CSSの本

デザインの学校 これからはじめるHTML&CSSの本