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

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

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

Screen Shot 2016-01-18 at 11.46.45

これは辛い!

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

functions.phpに追加

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

add_editor_style();

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

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

editor-style.css

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

@import url( 'style.css' );

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

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

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

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

Simplicity1.8.4

/*ビジュアルエディターのスタイルを書く*/

ここに書いていきます。

css

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

@charset "UTF-8";
.mceContentBody {
    font-family: メイリオ,Meiryo,Osaka,“ヒラギノ角ゴProW3″,“HiraginoKakuGothicPro”,“MS Pゴシック”,“MSPGothic”,sans-serif;
    font-size: 16px;
    color: #666;
    line-height: 250%;
}
.clear{
  clear:both;
}
h2 {
    border-left: 1px solid #000;
    margin: 40px -29px 20px;
    padding: 25px 30px;
    font-size: 26px;
    color: #4d595f;
    background: -moz-linear-gradient(top,#fefefe 0%,#e8e8e8);
    background: -webkit-gradient(linear,left top,left bottom,from(#fefefe),to(#e8e8e8));
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #dadada;
    -moz-box-shadow: 1px 1px 1px rgba(138,138,138,0.6), inset 0 0 5px rgba(255,255,255,1);
    -webkit-box-shadow: 1px 1px 1px rgba(138,138,138,0.6), inset 0 0 5px rgba(255,255,255,1);
    box-shadow: 1px 1px 1px rgba(138,138,138,0.6), inset 0 0 5px rgba(255,255,255,1);
    text-shadow: 0 -1px 3px rgba(255,255,255,0.8), 0 1px 0 rgba(255,255,255,0.3);
}

他のワードプレス サイト

@charset "UTF-8";
.mceContentBody {
    font-family: メイリオ,Meiryo,Osaka,“ヒラギノ角ゴProW3″,“HiraginoKakuGothicPro”,“MS Pゴシック”,“MSPGothic”,sans-serif;
    font-size: 16px;
    color: #666;
    line-height: 250%;
    width: 640px;
}
h2 {
    font-size: large;
    font-weight: bold;
    border-left: 7px solid #C07393;
    border-bottom: 1px solid #C07393;
    padding: 5px;
    margin: 70px 0px 30px;
}

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

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

とりあえず解決

シェアする

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

フォローする