【Amazonアソシエイト入門編】Amazonの商品画像を横に並べる方法。
Amazonアソシエイトの審査も通って、少しずつブログに商品画像を貼り付けていこうかなと思っていたら、んっ？稼いでるブロガーみたいに綺麗にレイアウトできないぞよ、とまた一つ壁にぶち当たってしまった。
なんだかなぁ、本の商品画像を貼り付けてみたけど、縦に整列してしまう不細工な状況。どうしたらいいのコレ・・・汗。
スポンサードサーチ
Amazonの商品画像を横に並べる方法
しかし、今の世の中、本当に便利なもので、ちょっとググったら、ちゃーんと、その問題解決を分かりやすくまとめてくれているサイトがあるんだもんね。嬉しい限りです。それでは、Amazonの商品画像を横に並べる方法を解説していきます。
下図は、WordPressの投稿編集画面です。赤枠が横に並べるためのHTMLタグで、グレーの部分がAmazonアソシエイトの３つの商品リンクのHTMLタグです。
以下のように入力するだけで縦一列だったものが、横一列に並びます。なお、marjin: 10pxは商品リンクの間隔ですので、数字を変更することで調整が可能です。
<div style=”float:left; margin: 10px;”>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
</div>
<div style=”float:left; margin: 10px;”>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
</div>
<div style=”float:left; margin: 10px;”>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
</div>
入力が完了すると、以下のようになります。簡単でしたね。
また、今後も「５分でわかるAmazonアソシエイトの使い方レシピ」をご紹介していきます。