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

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

  関連記事

By: Elliott Brown
[WordPress]フッターのトップへ戻るボタンの位置を変更する方法(Hueman)

スポンサーリンク [WordPress]フッターのトップへ戻るボタンの位置を変更 …

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

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

108901r
KASABUTA-ENDLESS(かさぶたエンドレス)について

スポンサーリンク KASABUTA-ENDLESS運営者のプロフィール プロフィ …

By: bluesbby
ワードプレスの記事中にソースコードを表示させる簡単な方法

スポンサーリンク ワードプレスの記事中にソースコードを表示させる簡単な方法 前回 …

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

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

By: Trish Hamme
[WordPress]コメント欄、ムダを削除して反応率を上げたいねん

スポンサーリンク [WordPress]コメント欄、ムダを削除して反応率を上げた …

stinger0003
スマホにも強い!STINGER5のインストール手順

先日、大人気のワードプレステーマ「STINGERシリーズ」作者のENJIさんが新 …

By: Michelle Tribe
便利スギィ!!投稿編集画面でペイント・お絵かき出来るワードプレスプラグイン「deviantART muro」

ワードプレスの記事投稿で画像を使用したい時に、 「ペイント等で画像を作成・保存→ …

By: Dan Taylor
お気に入りやタブ横のアイコンを作成して変更・表示させる方法

お気に入りやタブ横に表示されるアイコンをオリジナルで作成して変更・表示させる方法 …

By: Angie Garrett
[WordPress]記事の終わりにプロフィール・著者情報を自動挿入してくれるプラグインですって

スポンサーリンク [WordPress]記事の終わりにプロフィール・著者情報を自 …