色んな方のブログを見ていると、Amazonのアフィリエイトリンクを並べて表示させているサイトを見かける事があります。

Amazonのアフィリエイトタグをそのまま２つ、３つと貼り付けるだけでは縦に表示されて、これでは見た目が良くありません。

そこでAmazonや楽天等のアフィリエイト画像を横並びにする方法をご紹介したいと思います。

画像を横並びにする方法

<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>

上記のタグを貼り付け、「アフィリエイトリンク」と書いてあるところにAmazonや楽天のアフィリエイトリンクを挿入します。

画像を左に寄せて文章を回り込ます方法

本文
本文
本文
ここで回り込みを解除。

その後の文章はこの様な感じに。

<div style="float:left;padding:10px;">
アフィリエイト
</div>

本文

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

回り込んだ文章を解除したいところに<div style="clear:both;"></div>を挿入します。

画像を右に寄せて文章を回り込ます方法

本文
本文
本文
ここで回り込みを解除。

その後の文章はこの様な感じに。

<div style="float:right;padding:10px;">
アフィリエイト
</div>

本文

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

ここでも先程と同じように、回り込んだ文章を解除したいところに<div style="clear:both;"></div>を挿入します。