アマゾンのアフィリンクの横並び方法！２列、３列のコード実例紹介！

アマゾンアソシエイトのリンクを横並び表示する方法！コードの実例紹介！

2列表示の場合は、下記のHTMLタグをコピーして記事に貼り付けます。”アマゾン”と記載されている場所にリンクを貼ります。

<div style=”float: left; padding-right: 10px;”>

アマゾン

</div>

<div style=”float: left; padding-right: 10px;”>

アマゾン

</div>

<div style=”clear: both;”></div>

3列表示の場合は、下記のHTMLタグをコピーして記事に貼り付けます。

<div style=”float: left; padding-right: 10px;”>

アマゾン

</div>

<div style=”float: left; padding-right: 10px;”>

アマゾン

</div>

<div style=”float: left; padding-right: 10px;”>

アマゾン

</div>

<div style=”clear: both;”></div>

3つ並べた場合は、下記のように表示されます。

 3つ以上の横並び表示で気を付けないといけないこと

2つ横並び表示させる場合は、どのスマホであっても２つ横並びで表示されます。

しかし、3つ横並び表示させると、画面サイズが小さなスマホの場合3つ目のリンクが改行されてしまいます。

４行表示の場合は、ほぼ改行されるので全てを横並びさせるのは無理だと思います。

画面サイズに応じて、1列にすべて表示できるか変わります。

上のアマゾンリンクは三つに並べているのですが、通常サイズのアイフォンで見ている方は3つ目は改行されていますよね。

アマゾンリンクを使った具体例

ちなみに、一度リンクを張った後に、記事を保存すると下記のようになります。

特に気にすることではないのですが、divタグを改行して貼り付けたにも関わらず、ワードプレスのほうで改行が消されるのです。

（ワードプレスの仕様なので気にする必要はないのですが、リンク内容を変更するときのひと手間が面倒です。改行されていればピッと貼り付けできるのですが。）

<div style=”float: left; padding-right: 10px;”><iframe width=”300″ height=”150″ style=”width: 120px; height: 240px;” marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ src=”https://rcm-fe.amazon-adsystem.com/e/cm?ref=tf_til&amp;t=alice0907-22&amp;m=amazon&amp;o=9&amp;p=8&&amp;bg1=ffffff&amp;f=ifr”></iframe></div>