経済通信ニュース

ちょこっとニュースをつぶやきます

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

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

本来のブログと全然関係のない内容となっていますが自身でけっこう多用するようになりましたのでメモがわりに作りました。よろしければどうぞ。

 

画像をクリックするとAmazonサイトへジャンプします

今日アフィリエイトはじめます。: 「たったこれだけ!初心者が30日で5万円稼ぐブログアフィリエイト」

 

 

横並び

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

 

こんな感じになります

 

 

(本文)

Kindle版

今日アフィリエイトはじめます。:「たったこれだけ!初心者が30日で5万円稼ぐブログアフィリエイト」

 

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

を挿入