WordPressで画像横への回り込みとその解除方法
この記事は約3分で読めます。
記事のはじめで使用するアイキャッチやプロフィール画像など、
画像の横に文字を配置したい場合があります。
画像への回り込みスタイルを使用すると実現できます。
WordPressでの回り込み方法
WordPressでは、メディア追加時に画像の配置が選択できます。
選択肢は、以下の4つで「左」か「右」を選択すると画像横へ文字が回りこみます。
- 左:「float: left」
- 中央:「display: block」と「margin: auto」
- 右:「float: right」
- なし:指定スタイルなし
スタイルの「float」属性で画像横への文字の回りこみを指定しています。
回り込みを途中で解除する
画像の回り込みは、明示的に回りこみの解除を指定するか、
あるいは、画像の縦幅に収まりきらなくなるまで続きます。
解除指定をしないと、使用中のブラウザや文字サイズにより
意図しないところで回り込みが解除されてしまいますので、
画像の回り込みを使用した場合は、解除についても指定しましょう。
回り込み解除には「clear: both」スタイルを適用します。
「<div>」や「<p>」などの要素に指定できます。
「<p>」に指定した場合のHTMLとCSSの例を以下に示します。
私はいつもこの指定を利用しています。
<p><img src="hoge.jpg" class="alignleft" />回り込みテキスト。回り込みテキスト。回り込みテキスト。回り込みテキスト。</p> <p class="clear">回り込み解除。回り込み解除。回り込み解除。回り込み解除。</p>
p.clear{ clear: both; }
これで、指定箇所で回り込みを解除できます。
回り込みを指定位置まで解除しない
次は、逆に画像の縦幅を超えても回りこみを解除せずに、
同じラインで改行し続ける方法を説明します。これを便宜上、回り込み継続と呼びます。
回り込み継続には「clear: both」スタイルを適用します。
「<div>」や「<p>」などの要素に指定できます。
「<p>」に指定した場合のHTMLとCSSの例を以下に示します。
私はいつもこの指定を利用しています。
<p><img src="hoge.jpg" class="alignleft" /></p> <p class="keizoku">回り込みテキスト。回り込みテキスト。回り込みテキスト。回り込みテキスト。…</p> <p class="clear">回り込み解除。回り込み解除。回り込み解除。回り込み解除。</p>
p.keizoku{ overflow: auto; } p.clear{ clear: both; }
「overflow」スタイルを使用して、回り込ませる文字を囲みます。
そして、解除は先ほどと同様に「clear: both;」を指定します。
「clear: both;」を忘れると、ずっと回り込んだままになってしまい、
他のデザインにも影響がでてきてしまうため、回り込み解除は必ず指定してください。