You are here
Home > WEB制作 > WordPress > ワードプレスで画像の回り込みを設定・解除する方法

ワードプレスで画像の回り込みを設定・解除する方法

頭を抱える2

前回投稿した、「ワードプレスのコメントスパム対策プラグイン」を確認してみると、少し表示がおかしい事に気づきました。

表示させたい場所に文章が表示されていません。

入力したのがこちら。

画像回り込み

「ワードプレスでサイトを公開すると~」は画像下から書き始めたはずですが、指示通りに表示されていません。

(ブラウザ表示が下です)

画像回り込み1

はい、回り込み解除が行われていませんね。

左側の画像を回り込み設定してあるのですが、上手く解除できていないのが原因のようです。

SPONSERD LINK

ワードプレスで画像の回り込み方法

ワードプレスで画像の回り込みを設定する方法は2通りあります。

①投稿画面で、画像をクリックして回り込みの設定をする方法

WP 画像回り込み1

②画像編集画面から回り込み設定をする方法

WP 画像回り込み

なお、いずれの場合も選択肢は、以下の4つで「左」か「右」を選択した場合に画像横へ文字が回りこみます。

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

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

画像の回り込みは、解除の指定をするか、画像の縦幅(H)に収まりきらなくなるまで続きます。

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

回り込み解除にはスタイルシートで「clear: both」と記述します。
「clear: both」は「div」や「p」タグなどの要素に指定できます。

例)回り込みを解除するための「p.clear」スタイルを追加

画像の回り込み解除スタイルの追加方法

現在使用中の「AccessPress Mag」では「Custom Css」を使用できるので、そこに追記することにします。
※あくまでも例ですので、各ご利用中のテーマをご確認下さい。

画像回り込み3

「Custom Css」欄に追加したいCSSを書いて、「Save Option」をクリックして保存します。

カスタムCSSで追加

次に回り込み解除を指定したい記事へ<p class=”clear”></p>タグを追記して、「公開」をクリックします。

画像回り込み解除1

それでは確認してみましょう。

無事、「回り込み解除」が行われ、表示させたかった場所に文章が表示されています。

画像回り込み解除2

いかがでしたでしょうか。

画像の回り込みを設定した場合、必ず「clear:both」で解除指定をするようにしましょう。

画像の回り込みを設定・解除する方法おさらい

  • 画像の回り込み指定方法は「左(左寄せ)」「中央:」「 右(右寄せ)」「なし」の4つ
  • 画像の回り込みの解除にはCSSに「clear:both」を追加し、解除指定をしてあげる
0
Pocket

SPONSERD LINK

コメントを残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Top