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

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

  関連記事

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

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

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

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

エアコン臭い!市販のスプレー「アースエアコン洗浄スプレー防カビプラス」が効いた!業者に頼む前に

嫁から一言。 「エアコンが、くっさいの」 千鳥のノブのように言った。 そんな事言 …

STINGER5のヘッダーをカスタマイズしますよ。

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

tableの枠線が消えない。border:noneが効かない。楽天アフィリエイトの枠線…

どうも。 久々にワードプレスカスタマイズ記事です。 このブログを作った初期にやっ …

[ワードプレス]手動でcssやphpのバックアップをとるアナログな方法

[ワードプレス]cssやphpのバックアップをとる方法 ワードプレスのHowto …

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

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

computer system data screengrab
wordpress「Parse error: syntax error, unexpected~backwpup/backwpup.php on line 69」PHPバージョンアップで治る

どうも。 久しぶりにブログのプラグインをアップデートしたところ、やはりエラーが発 …

人気ブログになるためのプロフィールの書き方

スポンサーリンク 人気ブログになるためにアルファブロガーのブログのプロフィール欄 …

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

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