アマゾンアソシエイトのリンクを横並び表示する方法と複数行表示の注意点

アリスです。
本日は、上の写真のようにアマゾンアソシエイトのリンクを横並びで貼る方法についてです。
当たり前ですが、アマゾンアソシエイトのリンクはワードプレスのテキストモードで貼り付けないとタグがそのまま表示されますよ。
スポンサーリンク

横並びで貼る方法

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つ横並び表示させる場合は、どのスマホであっても2つ横並びで表示されます。

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

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

画面サイズに応じて、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>

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

最後の青色のタグが重要です。この青色のタグでアマゾンのリンクが改行されます。

複数行表示(横並び表示)の方法を書いてあるサイトで、青色のタグを書いていないサイトがありますが、間違っています。

青色のタグを書かないと、2行表示の場合は特に問題は起こりませんが、3つ以上横並びする場合におかしな表示となります。

スポンサーリンク
関連記事と広告