読者です 読者をやめる 読者になる 読者になる

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

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

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>

これで完了です。

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


あなたにおすすめの商品


ここに広告が表示されるんだよ。

ここに広告が表示されるんだよ。

ここに広告が表示されるんだよ。

ほ~れ、これで売上アップ間違いなし?

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

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

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

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

謝辞

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

追記

しんこー(id:yakudatsujoho)さんから

がんばれアフィカス、巨匠と呼ばれるその日まで。Amazonアソシエイトの商品をたくさん紹介する方法。 - 攻めは飛車角銀桂守りは金銀三枚

スマホで見るとスクロールしにくいです笑

2016/04/13 22:09
b.hatena.ne.jp
というご指摘いただきました。

スマホ・・・考えてなかった・・・iPhone SE買えたら考えます。m__m

きっと優しい人が考えてくれるはず。

コメントありがとうございました。