記事に画像を挿入し配置を左か右に設定すると、改行して入力したはずの画像の後にあるテキストなどの要素が、画像の横に表示されてしまうという現象が起こる。
これは画像に”float”というプロパティが設定されているからだ。
floatプロパティとは、設定された要素を右寄せ・左寄せに配置するためのもので、WordPressの機能で配置を指定した場合は自動で適用されてしまう。
テキストが回り込んでも問題ない場合もあるだろうが、改行された位置に表示したい場合が大概だろう。
というわけで今回はfloatによる回り込みの解除方法を紹介する。
floatの解除方法
回り込みを解除するには”clear”というプロパティを設定する必要がある。
一番簡単なのは、テキストエディターで回り込ませたくない要素を
<p style="clear:both;"></p>もしくは
<div style="clear:both;"></div>というタグで囲う方法だ。具体的には↓のように記述する。
本文1
<img src="配置を右か左に設定した画像.jpg" />
<p style="clear:both;">回り込みを解除したい要素</p>
本文2
ただし、この方法ではfloatが設定された要素の高さの情報を取得することが出来ないため、後に続く要素の縦方向の位置を調整する時に問題が生じるので、なるべく使わないほうがいいだろう。
ではどうすればいいのかというと、”clearfix”という方法を使って解除するのが推奨されている。
やり方はまず”外観”→”テーマの編集”と移動し、style.cssの編集をする。
下記の内容を最後の行に入力するかコピーして貼り付けよう。
.clearfix:after {
clear:both;
display:block;
content:"";
}
貼り付けたら”ファイルの更新”ボタンをクリックし、変更を適用する。
次にテキストエディターに戻り、floatが適用されている要素を
<p class="clearfix"></p>もしくは
<div class="clearfix"></div>のタグで囲う。
本文1
<p class="clearfix"><img src="配置を右か左に設定した画像.jpg" /></p>
回り込みを解除したい要素
本文2前述した方法と違いfloatの後の要素ではなく、floatが適用されている要素そのものを囲うので間違えないように。
これで回り込みが解除されたはずだ。
ちなみにこの方法は一部の古いブラウザには対応していなかったりするが、そんな古いブラウザを使っている人間はそうそういないと思われるので、気にする必要はないだろう。
使っているテーマによってはcssファイルに最初からclear関係のクラスが記述されている場合もあるので、検索してみてもいいかもしれない。
コメント