WordPress個別サポート

WordPressの投稿や固定ページで次のような「画像 → 文章 → 画像 → 文章」というレイアウトのページを作成したいことがあります。

画像と文章を並べる

画像と文章を並べる

このレイアウトを作成するには、まず最初の画像を追加するときに、「配置」で「左」を選択します。

画像を左、文章を右に配置する設定

画像を左、文章を右に配置する設定

画像に続けて文章を入力すると、画像が左、文章が右にレイアウトされます。

画像が左、文章が右のレイアウト

画像が左、文章が右のレイアウト

続けて2つ目の画像を追加すると、その画像も横にレイアウトされてしまい、うまくいきません。

2つ目の画像が意図しないレイアウトに

2つ目の画像が意図しないレイアウトに

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

画像の回り込みの解除(TinyMCE Clearプラグイン)

この場合、画像の横並びレイアウト(回り込み)を解除する必要があります。

編集画面をテキストエディタに切り替えて、文章の後あたりに次のコードを入力すれば、そこで回り込みが解除されます。

<div style="clear:both;"></div>

ただし、HTMLタグの入力に慣れていない方や、WordPressサイトの納品先のお客様など、できれば投稿をビジュアルエディタで編集したい方もいいます。

そのような方にはTinyMCE Clearプラグインが役立ちます。「プラグイン」‐「新規追加」メニューで検索して、インストール、有効化すると、ビジュアルエディタに次のような3つのボタンが追加されます。

画像回り込み解除ボタン

画像回り込み解除ボタン

一番右端のボタン(Clear both)をクリックすると、ビジュアルエディタに「Clear both」が追加されます。もちろん、テキストエディタに切り替えれば、追加されたdivタグを確認できます。

「Clear both」(回り込みの解除)が追加される

「Clear both」(回り込みの解除)が追加される

続いて画像を追加(配置:左)すれば、「画像 → 文章 → 画像 → 文章」のレイアウトのページを作成できるようになります。

画像の回り込みが解除される

画像の回り込みが解除される

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート