WordPressエディタにCSS適用 見た目を実際の表示と同じようにしたい editor-style.css

スポンサーリンク

ワードプレスで作ったサイトの記事を書く所、ビジュアルエディタが実際のサイトのページと見え方が違うのでちょっと不便な場合があります。

一番困るのはalignleft・alignrightで画像の横に文章を書く場合で、その場合は最後にclearしてalignをリセットするのですが、ビジュアルエディタではCSSにclearが無いのでテキストが右側に限界まで表示されてしまう現象が起きる。

Screen Shot 2016-01-18 at 11.46.45

これは辛い!

ということでビジュアルエディタの見た目がある程度、実際の表示に近いようにちゃんと表示されるようにカスタマイズします。

functions.phpに追加

functions.phpに以下を入れます。

Simplicityを使ってる場合は親テーマに最初から入っているので入れる必要はありません。

コレを書くとデフォルトで「editor-style.css」ファイルを読みます。

editor-style.css

あとはeditor-style.cssに以下のようにサイトの表示に使っているstyle.cssを読みこめばある程度実際の表示に近いくらいに表示されますが、完璧ではないようです。

ただ、@importを使うのはあまりよくないようで、元のCSSを上書きするので読み込みが遅くなるようです。

まぁ、ビジュアルエディタ画面なのでユーザーが観るわけではないので今回は問題無いのかもしれません。

どちらにせよ@importだけだと完璧に再現できないので、ここからカスタマイズするしかなさそう。

エディタの中は.mceContentBodyで指定するようなのでテーマSimplicityだったらarticleの中身をコピペすれば良さそう。

Simplicity1.8.4

ここに書いていきます。

css

Simplicityのワードプレス サイト(Bey.jp)

他のワードプレス サイト

こんなふうに書いてみたら実際の表示に近くなってきた。

もっと変えるにはCSSをeditor-style.cssに書けばより近い表示になりそうです。

とりあえず解決

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする