wordpressで写真や画像の回り込みを解除する便利なプラグイン

wordpressで記事を書いていると写真や画像を左寄せまたは右寄せにして、文字を回り込ませるレイアウトにしたい事もありますよね？　画像を寄せるのは、画像挿入時に左か右に設定すればいいのですが、回り込みを解除する設定が、なぜかないのです！？

wordpressのテキストエディターで編集できる人は、回り込み解除のコードを入力すればいいのですが、ビジュアルエディターで編集される方は、回り込みの解除ができません。

文字の回り込みだけでなく、写真を小さく左寄せで並べていく場合も、最終的に回り込み解除のコードを入力しなければ、その後文字などを入力すると、文字が写真に回り込んでしまいます。

回り込み解除の設定とは最初からツールの中にあればいいのですが、ないのでプラグインを使って解除します。解除する場所で「解除ボタン」を押すだけで解除されます。
[chat face=”3a03145cd984df0f1a46ea4fda596dc4.gif” name=”キッズくん” align=”left” border=”red” bg=”red”]ありそうでない解除ボタン？  [/chat]

画像に文字の回り込みとは？

下のように画像を左側、文字を右側に画像を回り込むようにレイアウトします。

回り込みの解除方法

テキストエディターが使える方は、テキストエディターにツールを切り替えて、回り込みを解除したい場所に下記のコードを書き込みます。

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

以上で回り込みは解除されます。

ビジュアルエディタで編集したい方には「TinyMCE Clear Float」プラグインがおすすめです。

「TinyMCE Clear Float」プラグインのインストール

ダッシュボードの「プラグイン」⇒「新規追加」で「プラグインの検索」をします。

「TinyMCE Clear Float」を入れて検索

「今すぐインストール」します。

青いボタンをクリックして「有効化」します。

ビジュアルエディタに「Clear float」のボタンが追加されます。

1. 回り込み解除したい場所にカーソルを持ってきます。
2. 「Clear float」のボタンをクリックします。

「CLEAR」というラインが挿入されて、回り込みは解除されます。

テキストエディターで確認してみると　<br style=”clear: both;”>　というコードが挿入されています。

簡単なことですが、写真を並べたり、文字を写真に回り込ませたりしたい時は、このプラグインは便利です。

テキストエディターで編集できる方は、直接コードを挿入してくださいね。
[chat face=”77ec8664b0cab66f4ccb40c01f453711.gif” name=”キッズくん” align=”left” border=”red” bg=”red”]テキストエディターにコピー&ペーストすると簡単だよ♪  [/chat]