WordPressの「ビジュアルエディタ」にCSSを適用して見やすくしてみた！

こんにちは！

最近は朝起きたらブログのアクセス数チェック、お昼休みにもチェック、帰宅後と寝る前にもチェックして完全なるブログの虜になっている社員Aです👩

自分の予想と真逆の記事がものすごく読まれたりして、こういうユーザーのニーズを理解するにはやはり数値化するのが一番手っ取り早いなと思いました。

さて今回は、WordPressの「ビジュアルエディタ」を見やすくカスタマイズしてみましたので記事にしていきたいと思います！

味気ないWordpressのビジュアルエディタ

WordPressのビジュアルエディタで執筆しているとき、味気なさを感じることはないですか？

見出しである「H1」や「H2」をつけても、一応分かりますが、文字が太く大きくなっただけ…

この見にくさを改善したいと思い、いろいろ調べた結果このビジュアルエディタにCSSを当てられるということを知りました。

実際にCSSを当てると下記のようなビジュアルエディタになりました。

ビジュアルエディタにスタイルを適用するメリット

1. プレビュー画面を見なくても本番さながらの見た目で編集できる
2. 編集時の見出し設置のミスなどが減る

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

ここからは、ビジュアルエディタにCSSを適用する手順を説明していきます。

1.editor-style.cssを作成する

まずは、エディタ専用のCSSファイルを作成します。

見出しやBOXのスタイルシートなど、本番環境で使っているスタイルシートから必要なものをピックアップし、この「editor-style.css」に記述していきます。

完成したスタイルシートはテーマ内に置いておきます。

2.editor-style.cssを読み込む

続けて、先程作成したeditor-style.cssをサイトに読み込みます。

functions.phpを開き、「add_editor_style」関数を使って読み込みます。

下記のように記載してください。

add_editor_style('editor-style.css.css');

editor-style.cssの部分は、テーマ内に置いている場合は上記のパス記述で構いません。

上記のたった1行でビジュアルエディタにeditor-style.cssで指定したスタイルが適用されます。

まとめ

この方法でブログ執筆を始めてから、かなり編集が楽になりました。

ほぼサイトと同じ状態の見た目になるので、実際の記事レイアウトを把握しながら書けます。

ブロガーの方や、お客様に管理画面を引き渡す際にもこちらの設定をしておくだけでもかなり便利だと思います！

ぜひ試してみてください！