Amazonや楽天のアフィリエイトリンク画像を横に並べる簡単な方法

  • 投稿 : 2013-05-26
  • 更新 : 2014-06-24

本記事は広告およびアフィリエイトプログラムによる収益を得ています

横並び

<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つです。
横幅が足りない場合は、自動的に折り返されます。

<div style="clear:both;"></div>
は最後に挿入してください。そこで横並びが改行されるイメージです。

その下にまた同じように上記のコードを書けば、2段組みになります。

左寄せ、文章回り込み

<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>
を挿入



サンプル例 :楽天のアフィリエイト 横並び


サンプル例 :Amazonアフィリエイト 左寄せ

人から相談を受けた場合に、その内容を言葉のままに受け取って、解決方法をいうのはあまりよくない場合があります。人から相談されるとついそういう対応をしてしまう人にオススメな本は「生きる悪知恵 正しくないけど役に立つ60のヒント (文春新書 868)」ですね。


実現できたらなんでもいいと思うけど

テーブルタグを使用する方法などもありますが、個人的にはちょっと面倒だと思います。
テーブルタグの場合は、回り込みの解除?みたいなのが必要ないので、はまりにくいとは思います。
スポンサーリンク