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

この記事は約3分で読めます。

  • LINEで送る

cssでの回り込み

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

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

WordPressでの回り込み方法

画像の回り込み

WordPressでは、メディア追加時に画像の配置が選択できます。
選択肢は、以下の4つで「左」か「右」を選択すると画像横へ文字が回りこみます。

  • 左:「float: left」
  • 中央:「display: block」と「margin: auto」
  • 右:「float: right」
  • なし:指定スタイルなし

スタイルの「float」属性で画像横への文字の回りこみを指定しています。

回り込みを途中で解除する

cssでの回り込み

画像の回り込みは、明示的に回りこみの解除を指定するか、
あるいは、画像の縦幅に収まりきらなくなるまで続きます。

解除指定をしないと、使用中のブラウザや文字サイズにより
意図しないところで回り込みが解除されてしまいますので、
画像の回り込みを使用した場合は、解除についても指定しましょう。

回り込み解除には「clear: both」スタイルを適用します。
「<div>」や「<p>」などの要素に指定できます。

「<p>」に指定した場合のHTMLとCSSの例を以下に示します。
私はいつもこの指定を利用しています。

<p><img src="hoge.jpg" class="alignleft" />回り込みテキスト。回り込みテキスト。回り込みテキスト。回り込みテキスト。</p>
<p class="clear">回り込み解除。回り込み解除。回り込み解除。回り込み解除。</p>
p.clear{
	clear: both;
}

これで、指定箇所で回り込みを解除できます。

回り込みを指定位置まで解除しない

cssでの回り込み

次は、逆に画像の縦幅を超えても回りこみを解除せずに、
同じラインで改行し続ける方法を説明します。これを便宜上、回り込み継続と呼びます。

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

  • LINEで送る

コメントを残す

このページの先頭へ