赤チャンネルブログ

おかあさんといっしょ、いないいないばあっ!等 Eテレ関連についてのブログです。

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>


この例だと、横並びに3つです。

 

横幅が足りない場合は、自動的に折り返されます。

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

 

こんな感じになります。 

 
 

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

 

左寄せ、文章回り込み

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

本文

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

 

こんな感じになります。

 

 

(本文)

片桐仁や やついいちろう、スーパーカーのナカコーも登場!

シャキーン!CD「こころね」

 

回り込みを解除したいところで
<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>

を挿入