ブログの記事中で画像の横にテキストを書きたい

HTMLがガリガリかけるFC2ブログやWordPressなどが対象です。

サンプルソース

<img src="img.jpg" style="float:left; margin:0 10px" />
画像の右の文章
画像の右の文章
画像の右の文章
<br style="clear:both" />

<img src="img.jpg" style="float:right; margin:0 10px">
画像の左の文章
画像の左の文章
画像の左の文章
<br style="clear:both" />

実行例↓

画像の右の文章
画像の右の文章
画像の右の文章




画像の左の文章
画像の左の文章
画像の左の文章


floatにより画像を寄せて文字が画像の横に回りこむようにしています。marginは画像の横の余白を指定しています。
brタグ中のclear:bothによりfloatを引きずらないようにその場所でfloatをリセットさせています。
注意して欲しい事としてはブログ記事が書き出される場所がちゃんとdivで囲われているかどうかです。
まあほとんどの環境で大丈夫でしょうけど、コンテンツエリアがdivで囲われていないとfloatは他の場所にも影響を及ぼします。