ワードプレスで作ったサイトの記事を書く所、ビジュアルエディタが実際のサイトのページと見え方が違うのでちょっと不便な場合があります。
一番困るのはalignleft・alignrightで画像の横に文章を書く場合で、その場合は最後にclearしてalignをリセットするのですが、ビジュアルエディタではCSSにclearが無いのでテキストが右側に限界まで表示されてしまう現象が起きる。
これは辛い！
ということでビジュアルエディタの見た目がある程度、実際の表示に近いようにちゃんと表示されるようにカスタマイズします。
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”,“ＭＳ Ｐゴシック”,“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”,“ＭＳ Ｐゴシック”,“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に書けばより近い表示になりそうです。
子テーマを使った場合も同様にeditor-style.cssをコピーして子テーマのフォルダに移動します。
反映されない場合は、ブラウザのキャッシュをクリアしましょう！
とりあえず解決
コメント