助けて！ワードプレスのビジュアル編集のレイアウトぐっちゃぐちゃ＼(^o^)／

助けて！ワードプレスのビジュアルモードでの編集で画像をいれるとぐっちゃぐちゃになっちゃって見にくくて醜いの…

By: jeffreyw

「ワードプレス　ビジュアル　編集　崩れる」

「ワードプレス　編集画面　画像　レイアウト」

「ワードプレス　画像　ぐっちゃぐちゃ」

上のワードやその他諸々のキーワードで検索しても出てこなかったので私だけの悩みだったのかもしれませんが、

↑の通り、私のワードプレスでの記事投稿のビジュアルモードでの編集画面ではレイアウトがぐちゃぐちゃでとっても見にくいんです。

公開した状態ではまったく問題がないのですけど、編集画面がとにかくボロボロ。

こんな感じです。

崩れてますね～。でも公開されている状態を見てみると…

Ultimate TinyMCEをインストールする

「画像の回り込み」「float」を解除するには「Div clear」というタグを使えばいいらしい。

が、いちいち手打ちでやるのは面倒なので、記事編集拡張プラグインを導入する。

今回インストールする「Ultimate TinyMCE」は「Div clear」の機能があるみたいだし、

他の機能もめちゃくちゃ充実しているらしい。

今回は「Div clear」だけが目当てなので紹介しないけど、後日記事にできたらいいな。

ではインストールしてみよう。

左メニューの「プラグイン」→「新規追加」、【Ultimate TinyMCE】を検索。

「いますぐインストール」でインストールできたら「有効化」

左メニューに「Ultimate TinyMCE」メニューができる。

タブの「デフォルト設定」から、チェックを入れて「デフォルトを読み込み」

これで、編集画面に拡張された機能が表示されて使えるようになったはずです。

Ultimate TinyMCEの「Div clear」機能を堪能

「Ultimate TinyMCE」をインストールして設定も済ませました。

早速、編集画面を見てみましょう。どうなってるかな…

バグっとるやないかい！？

「Ultimate TinyMCE」を追加したことでズラっといろんな機能のボタンが並ぶはずなのですが、表示されてません。

表示されているボタンもありますが、空席が多すぎますね。悪い子たちだ。

ワードプレスのバージョンが新しいので対応してないんでしょうか。

ボタンが表示されていませんが、実際には機能を使うことはできました。

赤丸で囲んであるところに目当ての「Div clear」があります。

対象画像の直下で使えばいいみたい。

早速使ってみましょ。

先程も紹介した、このレイアウトぐちゃぐちゃのビジュアル編集画面が、

「Div clear」を使うことによって…

スッキリしましたね！ぐっちゃぐちゃじゃなくなった。

良かった良かった！

心のモヤモヤ解消されました。

以上で終了です。おつかれさまでした。

ぐちゃぐちゃじゃなくなった！いまのキモチ

インストールするまえ、「Ultimate TinyMCE」の他の機能に結構ワクワクしてました。

画像の回り込み、の問題が解消されたのは嬉しいんですけどね。

期待していた分、ガッカリ度が大きいです。

「Ultimate TinyMCE」は今のバージョンの現時点（９月 15日 2014）ではうまく動かないようですが、編集機能拡張プラグインへの希望は失っていません。

他にも類似プラグインは色々あるようなので試して使っていきたいな～と思います。

さて、「ビジュアルモードのレイアウトぐっちゃぐちゃ問題」「画像の回り込み」「float」同じようなことで困ってる人、参考になりましたでしょうか？

ここまでお付き合いいただき誠にありがとうございました。