KASABUTA-ENDLESS

*

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

   

スポンサーリンク

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

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

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

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

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

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

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

こんな感じです。

2014-09-15_215441

 

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

2014-09-15_215556

 

綺麗に表示されていますね!

 

実際にはきちんと表示されるので問題はないかも、ですが、やっぱり編集画面が見難いのは良くないです。

 

なにがビジュアルモードだ!どこがビジュアル系だ!顔面崩壊してるでないか!

 

そんな崩壊を招いているのが「画像の回り込み」

 

タグでいうと「float」

 

画像の回り込みが有効になっていると2つ上の画像のように、挿入した画像の横に文章が並んでしまうんです。

 

困ったもんだ。

 

しかも、私の場合は編集画面でのみ適用されるという謎仕様。

 

今回は「画像の回り込み」「float」を解除するようにできるプラグインを導入してみようと思います。

 

導入しつつ、同時進行で記事を書いていきますので、一緒に見ていってくださいな。

 

Ultimate TinyMCEをインストールする

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

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

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

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

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

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

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

2014-09-15_213405

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

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

2014-09-15_222756

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

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

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

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

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

2014-09-15_223434

バグっとるやないかい!?

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

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

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

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

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

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

早速使ってみましょ。

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

2014-09-15_215441

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

2014-09-15_224623

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

良かった良かった!

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

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

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

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

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

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

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

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

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

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

 

 - WordPress, 問題解決

336adosensu

336adosensu

Message

メールアドレスが公開されることはありません。

  関連記事

cropped-stinger5.png
STINGER5のヘッダーをカスタマイズしますよ。

ヘッダーは超重要だと思いませんか? 人に例えると「顔」にあたると個人的に思ってい …

By: Brantley Davidson
[WordPress]オシャレなSNSボタンをサイドバーウィジェットに追加するプラグイン「Lightweight Social Icons」

スポンサーリンク [WordPress]オシャレなSNSボタンをサイドバーウィジ …

By: NASA Goddard Space Flight Center
STINGER5でサイドバー上部にプロフィール欄を設置する方法

スポンサーリンク ワードプレステーマSTINGER5でサイドバーの最上部にプロフ …

By: khrawlings
[WordPress]phpをいじってヘッダー右側に相互RSSを設置する方法

スポンサーリンク [WordPress]phpをいじってヘッダー右側に相互RSS …

14924952180_a6cbfdafda_z
センス良いね!画像をポップアップで拡大表示するワードプレスプラグイン

Photo:Le Danseur by Roy Barnett Jr. &nbs …

By: Piotr Drabik
ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法

スポンサーリンク ワードプレスでカテゴリーの記事数と階層を表示させる簡単な方法 …

By: Andrew Abogado
[Hueman使い方]サイドバーの背景色を変更する方法。その2

スポンサーリンク [Hueman使い方]サイドバーの色を変更する方法。その2 前 …

By: DVIDSHUB
[WordPress] 「トップへ戻る」「PageTop」をスマホだけ表示しないようにする方法[STINGER5]

スポンサーリンク [WordPress] 「トップへ戻る」「PageTop」をス …

2015-02-05_224359
アキネイター:アナタの考えは見透かされてますよ。

アキネイターってサイト、もしくはアプリ知ってます? なんとなくは知ってたんですけ …

By: loomingy1
[STINGER5]カテゴリーでの親子階層の段差を表示する方法

スポンサーリンク STINGER5カスタマイズ…カテゴリーの親子で階層表示の段差 …