WordPressの画像の回り込みを解除する

最近(2.7系)のWordpressはビジュアルとHTMLエディタがあってどちらも甲乙つけがたいところだけど、画像の回り込みに関してはいろいろと問題がある。左右の回り込みを指定してエディタ上ではテキストが画像に回り込んでいても、レイアウトに反映されなかったり、ここに書かれている現象が発生したり。これはレイアウトがCSSベースになっていて、そのCSSがテーマに依存しているところにも若干問題がある。要するに、デザインはいいと思っているテーマでも細かいところでちゃんと動かない場合がある、ということ。

せっかく気に入ったデザインでもちゃんとレイアウトできないと使えない。その一つが記事に挿入した画像のまわりにテキストを回り込ませる処理。古いテーマではalignright, alignleft, alignclearが定義されていない。そこで、テーマフォルダ(/wp-content/themes/テーマフォルダ)のstyle.cssに以下の設定がなければ追加する。.alignright {
 float: right;
 }

.alignleft {
 float: left;
 }

.alignclear {
 clear: both;
 }
お好みで以下の設定も追加。img.centered {
 display: block;
 margin-left: auto;
 margin-right: auto;
 }

img.alignright {
 padding: 4px;
 margin: 0 0 2px 7px;
 display: inline;
 }

img.alignleft {
 padding: 4px;
 margin: 0 7px 2px 0;
 display: inline;
 }
ちなみに、これでもレイアウトの崩れを直すことはできなかったので、(なぜか)サムネイルを挿入することで解決。IEでは。

そして、ここからはブラウザ側の問題が絡んできて、IE(試してないけどたぶんFirefoxも)では上記の設定だけでうまくいくんだけど、Chromeでは(たぶんSafariでも)引き続き崩れたまま。どうもIEではalignrightに設定されたテキストに<b>や<p>が入ると回り込みが解除されるようだけど、Chromeでは解除されない。いろいろググるとどうもChromeのほうが正しい処理のように思える。Chromeに対応するためには明示的に回り込みを解除するスタイルを設定すればよい。

でも、普通にstyle=。。。 と設定してもWordpressが非常におせっかいながら削除してくれる。なので、回り込みを解除したい場所に<br class="alignclear" />をHTMLモードにて追加する。この場合はタグとともにWordpressによるおせっかい削除から免れることができる。この設定はIEにはなんら影響を与えないので、今のところベストな解決法かな。

コメントを残す

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