攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

がんばれアフィカス、巨匠と呼ばれるその日まで。Amazonアソシエイトの商品をたくさん紹介する方法。

アフィリエイトアフィリエイト-Amazonアソシエイト

スポンサーリンク

Amazonアソシエイトの商品をたくさん紹介する方法です。

いっぱい縦に並べると記事がどんどん長くなってスクロールが大変なんで、スクロールバーを付けたBOXを作ってその中に入れてみました。

実装するCSS

CSSは以下の通りです。

.box_srcollbar {
        overflow:auto;
        width:90%;
        height:250px;
        padding:5px;
        border:1px solid #000;
        background-color:#F9F9F9;  /*ボックスの背景色はご自由に*/
        color:#000;
        font-size:12px;
    }
    .box_title{
        border:1px solid #000;
        padding:5px;
        width:300px;
        font-weight:bold;
        font-size:14px;
        background-color:#000;
        color:#fff;
    }

このCSSを設定したらあとは

<div class="box_title">あなたにおすすめの商品</div>
<div class="box_srcollbar">

ここに紹介したい広告をペタペタ貼り付ける。

</div>

これで完了です。

以下はそのサンプルです。

あなたにおすすめの商品

たくのみ。(1): 裏少年サンデーコミックス

posted with ヨメレバ

火野遥人小学館 2015-12-18

全長８ｍ超！ティラノサウルス T-REX 超巨大造形物（恐竜等身大フィギュア）

posted with カエレバ

AAA

ひとには、言えない。 (4) (ぶんか社コミックス)

posted with ヨメレバ

さんりようこぶんか社 2012-11-17

古代エジプト・王シッティング　ビッグフィギュア（等身大フィギュア）

posted with カエレバ

AAA

ほ～れ、これで売上アップ間違いなし？

もうひと工夫して横幅を調整すればサイドバーにも置けると思います。

手動ローテーションバナー完成です。

規約違反とはなったらごめんね。自己責任でお願いします。

がんばれアフィカス、巨匠と呼ばれるその日まで。

謝辞

この記事はお知らせなどのDIV要素にスクロールバーを付ける CSS(overflow)についてを参考に書かせて頂きました。