助けて!ワードプレスのビジュアル編集のレイアウトぐっちゃぐちゃ\(^o^)/
助けて!ワードプレスのビジュアルモードでの編集で画像をいれるとぐっちゃぐちゃになっちゃって見にくくて醜いの…
「ワードプレス ビジュアル 編集 崩れる」
「ワードプレス 編集画面 画像 レイアウト」
「ワードプレス 画像 ぐっちゃぐちゃ」
上のワードやその他諸々のキーワードで検索しても出てこなかったので私だけの悩みだったのかもしれませんが、
↑の通り、私のワードプレスでの記事投稿のビジュアルモードでの編集画面ではレイアウトがぐちゃぐちゃでとっても見にくいんです。
公開した状態ではまったく問題がないのですけど、編集画面がとにかくボロボロ。
こんな感じです。
崩れてますね~。でも公開されている状態を見てみると…
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」は今のバージョンの現時点(9月 15日 2014)ではうまく動かないようですが、編集機能拡張プラグインへの希望は失っていません。
他にも類似プラグインは色々あるようなので試して使っていきたいな~と思います。
さて、「ビジュアルモードのレイアウトぐっちゃぐちゃ問題」「画像の回り込み」「float」同じようなことで困ってる人、参考になりましたでしょうか?
ここまでお付き合いいただき誠にありがとうございました。
336adosensu
336adosensu
関連記事
-
ブログカードプラグイン「Pz-LinkCard」を導入してみる
どうも。 ワードプレステーマをcocoonからStingerに戻したのですが、や …
-
WordPressブログのSSL化。プロフィールとロゴ画像でエラーが出る
このブログのSSL化をしてます。 先日グーグルからメールが届いて「はよせんと有害 …
-
STINGER5のヘッダーをカスタマイズしますよ。
ヘッダーは超重要だと思いませんか? 人に例えると「顔」にあたると個人的に思ってい …
-
アキネイター:アナタの考えは見透かされてますよ。
アキネイターってサイト、もしくはアプリ知ってます? なんとなくは知ってたんですけ …
-
便利っぽいプラグイン「Pixabay_images」でエラー「Parse error:」
どうも。 さきほど久しぶりにブログのプラグインの更新をしてみました。 すべて一括 …
-
お気に入りやタブ横のアイコンを作成して変更・表示させる方法
お気に入りやタブ横に表示されるアイコンをオリジナルで作成して変更・表示させる方法 …
-
ワードプレスの記事中にソースコードを表示させる簡単な方法
スポンサーリンク ワードプレスの記事中にソースコードを表示させる簡単な方法 前回 …
-
[STINGER5]サイドバーのウィジェットとかの順番を入れ替える方法
スポンサーリンク [STINGER5]サイドバーのウィジェットとかの順番を入れ替 …
-
アクセス数の激減。cocoonに変更直後から。もとに戻して確認してみる
どうも。 先日、衝撃のメールが届きました。 グーグルアナリティクスからアクセス解 …
-
STINGER5の文字サイズを変更する方法
つい先日、今頃になって気がついたのですけどね、 「なんか、うちのブログ、文字小さ …