WordPressのビジュアルエディターはCSSを適用することで好みの見た目にすることができます。
通常はCSSを適用するためには少しめんどくさいことをしなければならないのですが、Simplicityは初めからCSSを適用するための仕組みが備わっていますので、とても簡単に見た目を変更することができます。
デフォルト
まずはWordpressデフォルトでの表示です。
見出しは段階的に大きさが変化していますが、ぱっと見で見出しレベルがわかりにくいですね。
フォントも明朝体で堅苦しいです。
Simplicity
Simplicityでは最初からCSSが適用されています。Simplicityデフォルトの記事のデザインと同じですね。
※左端の灰色の縦線はビジュアルエディターそのものの枠線です。
オリジナル
記事で使用しているデザインと同じにしてみました。フォントも変更しています。
実際の記事でどのように表示されるのかがわかりやすくていいですね。
ソースコード
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
body.mceContentBody {
font-family: Lato, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h2 {
background-color: #0091C5;
color: #fff;
padding: 15px 25px;
border: none;
}
h3 { border-bottom: 5px solid #0091C5; }
h4 { border-bottom: 5px dashed #0091C5; }
こちらのコードをそのままコピーしてもらえれば上の画像のようになります。
子テーマを選択して「ビジュアルエディターのスタイルシート(editor-style.css)」に貼りつけてください。
その際、カスタマイザーの「管理画面」で「ビジュアルエディターにSimplicityスタイルを適用」にチェックが入っていることを確認してください。デフォルトでチェックが入っているはずです。
ビジュアルエディターでもWebフォントを使用することができます。
「Lato」というのがWebフォントの名前で、Googleフォントからimportしています。
ビジュアルエディターのbodyに適用するものは「body.mceContentBody」と指定してください。
記事では見出しを「.article h2」などと指定していると思いますが、それでは適用されないので単に「h2」としてください。
まとめ
僕は見出しとフォントと行間をいじっているくらいなので、それほど大きな違いがあるわけではないのですが、CSSをいじりまくっている人にとってはビジュアルエディターで実際のデザインを見ることができるのはかなりはかどるのではないでしょうか。
「あれがしたいな」と思ったときにはすでに設定が組み込まれているSimplicityは細かいところまで手の行き届いた本当によくできたテーマだと思います。
ビジュアルエディターの見た目を記事と同じにしたいという方はぜひチャレンジしてみてください。
