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>
この例だと、横並びに３つです。
横幅が足りない場合は、自動的に折り返されます。
<div style="clear:both;"></div>
は最後に挿入してください。そこで横並びが改行されるイメージです。
<div style="clear:both;"></div>
は最後に挿入してください。そこで横並びが改行されるイメージです。
こんな感じになります。
その下にまた同じように上記のコードを書けば、２段組みになります。
左寄せ、文章回り込み
<div style="float:left;padding:10px;">
アフィリエイト
</div>
本文
<div style="clear:both;"></div>
こんな感じになります。
（本文）
コーネリアス
「デザインあ」CD
回り込みを解除したいところで
<div style="clear:both;"></div>
を挿入
<div style="clear:both;"></div>
を挿入
右寄せ、文章回り込み
<div style="float:right;padding:10px;">
アフィリエイト
</div>
本文
<div style="clear:both;"></div>
こんなかんじになります
（本文）
わしがイッチのうたは何気に神。
「アルゴリズムたいそう」や「アルゴリズムこうしん」「アルゴリズムこうしんMAX」等のアルゴリズムのゴリ押しもGOOD!
他にも「おとうさんスイッチの作り方」「おてつだいロボのテーマ」も収録。「ピタゴラそうち41番の歌」画像があればなあ・・。
回り込みを解除したいところで
<div style="clear:both;"></div>
を挿入