WordPress個別サポート

WordPressの編集画面で画像の回り込みを解除できるTinyMCE Clear Floatプラグインを紹介します。旧バージョンのTinyMCE Clearプラグインからボタンが少し変わっています。参考にしてください。

TinyMCE Clear Floatプラグインが役立つのは、投稿や固定ページで次のような「画像 → 文章 → 画像 → 文章」というレイアウトのページを作成したい場合です。

画像と文章を並べる

画像と文章を並べる

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

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

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

画像に続けて文章を入力すると、画像が左、文章が右にレイアウトされます。ここまでは問題ありません。

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

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

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

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

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

これは、画像の回り込み(画像と文章の横並び)を解除せずに後続の段落を作成してしまったためです。

スポンサーリンク

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

この場合、画像の横並びレイアウト(回り込み)を解除してから新たな段落を作れば解決です。

回り込みの解除をテキストエディタで行う場合、文章の後あたりに次のコードを入力すれば、そこで回り込みが解除されます。

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

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

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

画像の回り込みを解除

「Clear Float」ボタンをクリックすると、ビジュアルエディタに「CLEAR」が追加されます。

CLEAR(回り込みの解除)が追加される

テキストエディタに切り替えると、「clear: both;」が追加されていることを確認できます。

「clear: both;」が追加されている

これにより、続いて画像を追加しても問題ないレイアウトになります。「CLEAR」の部分で画像と文章の横並びが解除されているということです。

画像の回り込みが解除されて問題ないレイアウトに

あとはアイデア次第です。画像の回り込み解除を忘れずに、いろいろなレイアウトにチャレンジしてみてください。

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

関連記事

BizVektorのカスタマイズ

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

WordPressプラグイン

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