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: eyeliam
パーマリンクのカスタムURLは日本語の記事タイトル名じゃあかんのや!!

スポンサーリンク ワードプレスの記事をツイートボタンからツイートしてもらったとき …

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

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

By: mkhmarketing
[WordPress]Huemanのサイドバーの幅と色を変更する方法

スポンサーリンク [Wordpress]Huemanのサイドバーの幅を変更する方 …

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

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

stinger5
STINGER5の文字サイズを変更する方法

つい先日、今頃になって気がついたのですけどね、 「なんか、うちのブログ、文字小さ …

By: Maria Keays
[WordPress]投稿日付と時間の表示を変更する。あと投稿者名を削除する方法(Hueman)

スポンサーリンク [WordPress]投稿日付と時間の表示を変更する。 あと投 …

By: Shannon Kringen
[WordPress]子テーマ作成の一番手軽で簡単な方法!プラグイン『Duplicate Theme』

ブログの文字サイズを大きくしようかと思い、子テーマのCSSをいじろうかとしたら、 …

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

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

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

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

By: maaco
ワードプレスで他のサイトをスクリーンショット画像とタイトル付きリンクで紹介するプラグイン?

スポンサーリンク ワードプレスの記事中で他のサイトをスクリーンショット画像とタイ …