【add_editor_style】ビジュアルエディターのスタイルシートを追加して投稿画面の本文デザインを調整する方法

編集画面のデザインが使いにくい!

自分でスタイルシートを編集して、サイトの表示デザインを変更することは比較的初心者の頃でもできますが、そのときに困るのが編集画面と投稿後の表示との差です。

もちろん、「プレビュー」をクリックしてみれば一発でわかるのですが、いちいち何度もやって確認するのはおっくうです。

せめて大まかなイメージだけでも、確認しながら記事を書いていきたいものです。挿入した画像が大きくなりすぎていちいちスクロールしなければいけない状態とか、けっこうイライラしてしまいますよね?

こういうときには functions.php にコードを追加して、投稿画面のデザインを変えてしまうのがおすすめです。

WordPress にはいろいろな PHP 関数が定義されていて、そのなかのひとつである「add_editor_style」を使えば簡単に変更することができます。

関数リファレンス add editor style   WordPress Codex 日本語版

関数リファレンス/add editor style – WordPress Codex 日本語版

方法

必要なのはエディタソフト FTP クライアントソフトだけです。おすすめは以下のもの。

エディタソフト

FTP クライアントソフト

まず編集画面用のスタイルシートを用意します。

これはエディタソフトで「新規作成」をして、中身を何も書き込まず、すぐに「名前を付けて保存」するだけでかまいません。ここで書いていなくても、管理画面から編集することができますからね。

このファイル名は「editor-style.css」にします。この名前にすることで管理画面のテーマファイル群に「ビジュアルエディターのスタイルシート」と日本語で表記されるようになります。

当ブログではこのような中身にしました。

続いて、このファイルを FTP クライアントソフトを使って、「ドメイン名/wp-content/themes/利用しているテーマ名/」にアップロードしましょう。

次に WordPress の管理画面にログインします。「外観」→「エディター」(テーマの編集)で、「テーマのための関数(functions.php)」へ行きます。

もちろん、間違ったときのためにあらかじめバックアップをとっておくことは必須ですね。

必要な作業は functions.php に、たった1行のコードを追加するだけ。

場所は、いちばん最後に置くのがいいと思います。まあ、絶対に最後に置かなければいけないわけでもないですが、あとで見つけやすい場所にしておくのが無難です。

これで準備は完了しました。

やってみた

デフォルトの設定はこちらでした。

編集画面でみるとこんな感じ。

デフォルトの文字サイズ

文字サイズ 13px はさすがに見にくいですね。目が疲れますし、タイプミスに気づきにくくなります。

さっそく変更してみます。管理画面の「外観」→「エディター」(テーマの編集)をクリックすると、下にある「スタイル」の欄に、

ビジュアルエディターのスタイルシート

ビジュアルエディターのスタイルシート(editor-style.css)」が追加されているはずです。あとはこちらにセレクタとプロパティと値を書いていけばいいだけです。

.mceContentBody { font-size:16px; }

たとえば font-size:20px に変更すると、

文字サイズを20pxに変更

このように、かなり見やすくなりました。とはいえ、20px だと大きすぎですが…

最終的には、投稿後に表示されるフォントと同じにしました。

文字サイズを16pxに変更

サイズが 16px で、フォントの種類は「“ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”メイリオ”,Meiryo,Osaka,”MS Pゴシック”,”MS PGothic”,Helvetica,Arial,sans-serif」です。

メインのスタイルシート(style.css)のデザインと同じにしておけば、投稿前の編集画面での表示と、投稿後の表示でそんなに差異を感じなくなります。

さいごに

思ったより簡単にできて、メリットはかなりあります。下書きの画面が使いづらいと感じているのなら、やってみてはいかがでしょうか?

下書きの画面で、あらかじめ本文の横幅を指定したり、挿入される画像のサイズ指定をしておけば、なおさらです。

関連記事

WordPress に設置した jQuery プラグインが動かない!Google にホスティングされている最新のバージョンに置き換えてライブラリ同士のコンフリクト(衝突)を回避する方法

WordPressにはデフォルトで本体内にjQueryが含まれています。基本的にはこれを使用すればいいのですが、たまに不具合が発生して動かなくなる場合があります。 たとえば、WordPressのjQueryプラグインとして配布されているもの…

WordPress の条件分岐でパソコンには表示させてもスマートフォンに表示させない方法

テーマ編集などでコンテンツを追加してくると、スマホとパソコンで表示を変えたくなってきますね。 「パソコンの大きな画面になら表示してもいいんだけど、スマホに表示させると画面からはみ出しちゃうな・・・」とか「スマの表示のこの場所に広告は出したく…