画像に文章を回り込みさせるカスタマイズ

普通に画像と文章を入れた場合

次のように縦に画像と文章が並びます

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像に文章を回り込みさせた場合

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像に文章を回り込みさせるカスタマイズ方法

カエテンシリーズは記事装飾パーツ：画像回り込みを予めご用意していますので CSS の追加は不要です
カエテンシリーズは記事に書く記述が異なります。記述方法はマニュアルでご確認ください

記事に書く記述

画像【左】配置

<div class="img-left"><img src="画像URL" alt="" /></div>
<div class="clear">テキスト</div>

画像【右】配置

<div class="img-right"><img src="画像URL" alt="" /></div>
<div class="clear">テキスト</div>

回り込みさせる文章は、その後の文章の回り込み防止のために<div class="clear">～</div>で囲むことをお勧めします
分かりやすいように改行して2行にしていますが、無料ブログの場合は改行せずに1行で入れることをお勧めします。無駄な余白ができる場合があるためです

CSS ( スタイルシート ) に追加する記述

.img-left{float:left;margin-right:8px;}
.img-right{float:right;margin-left:8px;}
.clear:after{content:"";display:block;clear:both;}

hidezo