文字の回り込みを解除する

昨日の『料理の写真（失敗・成功・修正）』という記事では画像の右側に文字が回り込むように、「画像の挿入」を使うときに画像オプションで「テキストの回り込み」というのを選択しています。下の画像がそれです。

これはこれで便利な機能なのですが、画像の上下サイズより短い文章を書いた場合、昨日の記事のように画像の下に「（画像クリックで拡大）」といったように入れたい場合や、いくつも続けて画像を表示したい場合、思ったようにいかず下の画像のようになってしまいます。

これをちょっとした工夫で思ったとおり表示されるようにしようというのが下の枠内のおまじないです。

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

HTMLを勉強されているとわかるかと思いますが、ブログの機能をなにげなく使っているだけだと意味不明の文字列でしかありませんね。でも難しいことではなくこれを丸ごとコピーして使えばいいだけですから深く考える必要もありません。

とはいっても実際にどのように使うのか書いておかないとわからないでしょうから、少しばかり解説を書いておきます。
まずは下の枠内みたいに画像を表示させるための文があり、続けて画像の横に入れたい説明を書いておくことになります。すると上の画像みたいになるわけです。

<img alt="" title="" src="http://***.cocolog-nifty.com/blog/images/abc.gif" width="200" height="150" / >【写真１】
極端な露出不足でなにを写したのかよくわからないですね。（画像クリックで拡大）

これに先ほどのおまじないを付け加えたのが下の枠内で、文字の回り込みを解除したい所に挿入しておけばいいというのがわかっていただけたと思います。ガッテン！ガッテン！

<img alt="" title="" src="http://***.cocolog-nifty.com/blog/images/abc.gif" width="200" height="150" / >【写真１】
極端な露出不足でなにを写したのかよくわからないですね。<br style="clear: both;" />（画像クリックで拡大）

これで昨日の『料理の写真（失敗・成功・修正）』という記事みたいになるわけですが、おまじないの意味がわからないと気持ち悪いかもしれませんね。

じゃ、ちょっとばかり解説しておきます。では下の枠内を見てください。これは改行しなさいというおまじないです。

<br />

これで通常の文であれば改行されるのですが、文字の回り込みを設定したときはうまくいかないので、先ほどのように「style="clear: both;"」を付け加えて回り込みを解除して改行しなさいというおまじないにするわけです。

なぜこのようなおまじないが必要になるのかといえば、画像の横に文字を回り込むようにしたときに「style="float: left; margin: 0px 5px 5px 0px;"」というような、回り込みしなさいというおまじないが挿入されていたからなんですよ。