SimplicityでビジュアルエディターにCSSを適用する方法

WordPressのビジュアルエディターはCSSを適用することで好みの見た目にすることができます。

通常はCSSを適用するためには少しめんどくさいことをしなければならないのですが、Simplicityは初めからCSSを適用するための仕組みが備わっていますので、とても簡単に見た目を変更することができます。

スポンサーリンク
レクタングル(大)

デフォルト

見出し

まずはWordpressデフォルトでの表示です。

見出しは段階的に大きさが変化していますが、ぱっと見で見出しレベルがわかりにくいですね。

フォントも明朝体で堅苦しいです。

Simplicity

見出しSimplicity

Simplicityでは最初からCSSが適用されています。Simplicityデフォルトの記事のデザインと同じですね。

※左端の灰色の縦線はビジュアルエディターそのものの枠線です。

オリジナル

見出しcss

記事で使用しているデザインと同じにしてみました。フォントも変更しています。

実際の記事でどのように表示されるのかがわかりやすくていいですね。

ソースコード

@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 Pゴシック", "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; }

こちらのコードをそのままコピーしてもらえれば上の画像のようになります。

テーマの編集_‹_ヒキニートかく語りき_—_WordPress

子テーマを選択して「ビジュアルエディターのスタイルシート(editor-style.css)」に貼りつけてください。

カスタマイザー

その際、カスタマイザーの「管理画面」で「ビジュアルエディターにSimplicityスタイルを適用」にチェックが入っていることを確認してください。デフォルトでチェックが入っているはずです。

ビジュアルエディターでもWebフォントを使用することができます。

「Lato」というのがWebフォントの名前で、Googleフォントからimportしています。

ビジュアルエディターのbodyに適用するものは「body.mceContentBody」と指定してください。

記事では見出しを「.article h2」などと指定していると思いますが、それでは適用されないので単に「h2」としてください。

まとめ

僕は見出しとフォントと行間をいじっているくらいなので、それほど大きな違いがあるわけではないのですが、CSSをいじりまくっている人にとってはビジュアルエディターで実際のデザインを見ることができるのはかなりはかどるのではないでしょうか。

「あれがしたいな」と思ったときにはすでに設定が組み込まれているSimplicityは細かいところまで手の行き届いた本当によくできたテーマだと思います。

ビジュアルエディターの見た目を記事と同じにしたいという方はぜひチャレンジしてみてください。

スポンサーリンク
レクタングル(大)
レクタングル(大)
ヒキニートかく語りき
SimplicityでビジュアルエディターにCSSを適用する方法
この記事をお届けした
ヒキニートかく語りきの最新ニュース情報を、
いいねしてチェックしよう!