WordPressで画像横への回り込みとその解除方法

記事のはじめで使用するアイキャッチやプロフィール画像など、
画像の横に文字を配置したい場合があります。

画像への回り込みスタイルを使用すると実現できます。

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;」を忘れると、ずっと回り込んだままになってしまい、
他のデザインにも影響がでてきてしまうため、回り込み解除は必ず指定してください。