画像に対するテキスト回込み表示

数日前、FireFoxなら問題なく表示されるのに、Microsoft Internet Explorerだと、画像の周囲に文字を回り込ませて表示する機能が巧く働かないことに気付いた。しかしそれは、htmlタグを1個挿入すれば解決することが判った。

先日、WordPressをアップグレードしてから、オヤヂはthemeとして、wp.Vicunaを用いている。wp.Vicunaは、WordPress標準のthemeとは多少構造が異なるようで、style.cssを「スキン」と呼ばせ、かなり細分化された複数のファイルとして保持していたりする。このスキンに、「画像の左寄せ/右寄せ+ テキスト回り込み」を指定するclassが定義済みなのだ(.img_L / .img_R クラス)。このclass定義自体は単純だが、寄せられた際の余白の調整等、かなり微細な調整を行ったり、floatプロパティ使用時に起こる不具合もclearFixと呼ばれる指定で解決したりと、結構優れものらしい。よって、画像の表示コードを、このclassタグでくくってやる(例: <p class=”img_L”><img src=”///files/image_hogehoge.jpg”alt=””></p>だけで、画像が左端(乃至右端)に固定され、文字がその周囲に回りこむようになる。簡単だ。これで、画像とテキストの表示が、IEでもオヤヂが意図した通りになされるようになった。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です