WordPressのビジュアルエディターのスタイルをカスタマイズする方法いろいろ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

WordPressの記事を作成するとき、投稿画面のビジュアルエディターを用いている方も多いかと思います。

ビジュアルエディターは、デフォルトの状態だと、フォントサイズも小さめですし、WindowsデフォルトではMSゴシックが選択されます。

デフォルトのWordpressビジュアルエディター

このままでも、もちろん十分使えます。ただ、できればもう少し文章を編集しやすく表示出来れば、より使いやすくなるかと思います。

ということで今回は、こういった、デフォルトのビジュアルエディターのスタイルを、自分好みにカスタマイズして、見やすく記事を書く方法を紹介したいと思います。

photo by Alexander Gounder

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

主な手順

ビジュアルエディターに独自のスタイルを適用させる主な手順は以下の2手順です。

  1. functions.phpファイルに独自スタイル用のコードを書く(1行)
  2. テーマ(子テーマ)フォルダ内にCSSファイルを作成する
  3. 作成したCSSファイルにスタイルを書き込む

このような手順を踏むことで、結構簡単に以下のようにビジュアルエディターに独自のスタイルを反映させることができます。

設定カスタマイズ後のWordpress ビジュアルエディター

僕は、Simplicityというテーマを使っているので、Simplicityと同様の表示にしてみました。他のテーマを利用している場合は、ご利用のテーマのスタイルに合わせると、かなり書きやすくなると思います。

以下では、その詳細な手順を紹介します。

functions.phpファイルの編集

ビジュアルエディターにスタイルを追加するためには、まずfunctions.phpに「ビジュアルエディター用CSSファイルを使うよ」と宣言するコードを書く必要があります。

コードといっても、難しい記述はなく、functions.phpに以下の1行を書き加えればOKです。

これで、テーマフォルダ直下の「editor-style.css」ファイルが読み込まれる設定になります。

上記のコードを、子テーマ内の「functions.php」に記入すれば、子テーマ内の「editor-style.css」ファイルが読み込まれます。子テーマでテーマをカスタマイズしている場合は、子テーマに記入した方が良いかと思います。

以下の説明では、「functions.php」に「add_editor_style();」を記入したものとして説明します。

add_editor_styleその他の書き方

add_editor_style()に引数を、指定することで、ビジュアルエディター用のCSSファイル名などを自由に指定することもできます。

細かな設定が必要ない場合は、こちらの項目は読み飛ばしてください。

例えば以下のように書くと、テーマフォルダ内、「css」フォルダの中にある、「admin-editor.css」ファイルのスタイルがビジュアルエディターに読み込まれます。

また、ファイルを複数指定する場合は、以下のように配列を用いて複数ファイルの指定をすることもできます。

上記は、Wordpressにデフォルトで含まれている「Twenty Fifteen」というテーマで使われている方法です。

add_editor_style()を用いて、「css/editor-style.css」、「genericons/genericons.css」、「関数により自前のWEBフォントCSSファイルの呼び出し」を行っています。

ただ通常個人が利用する分には、add_editor_style();とだけ書き加えて、「editor-style.css」を編集する方法で十分かと思います。

エディタースタイル用のCSSファイルを作成

次は、テーマフォルダ直下に「editor-style.css」というファイルを作成します。

子テーマで利用する場合は、子テーマフォルダ直下に作成してください。

子テーマに作成したときは、以下のような感じになります。

エディタースタイルファイルを作成

作成したファイルにスタイルを書く

最後に「editor-style.css」を手持ちのテキストエディターで開いて、スタイルを書き込みます。

ただ、ビジュアルエディター用のスタイルの書き方は、通常とは少し異なります。

ビジュアルエディターのbody要素に反映するスタイルを書くには、以下のように書く必要があります。

CSSセレクタが、body#tinymce.wp-editorとなっていることにご注意ください。

ただ、見出しとかの修正なら

と書くだけで十分です。

「editor-style.css」に上記のように記入しただけで、以下のような表示になります。

親テーマにエディタースタイルを適用した状態

子テーマの「editor-style.css」で、以下のように上書きしたとすると、

赤背景が上書きされ以下のように青色になります。

子テーマにエディタースタイルを適用した状態

で、例えばSimplicityのような表示にさせようと以下のように書いたときは、

以下のような表示になります。

設定カスタマイズ後のWordpress ビジュアルエディター

Simplicityレイアウトの引用やテーブル

注意点

editor-style.cssに、style.cssのスタイルを、そのまま貼り付けても、同じような表示にはなりません。

ビジュアルエディターで使えない書き方

というのも、style.cssなどでは、特定のエリアだけに反映するスタイルシートを書くために、以下のように書かれていることが多いからです。

上記は、#mainカラム内のH2見出しに反映されるように書かれています。

ただ、ビジュアルエディターには#mainカラムは存在していません。なので、スタイルが呼び出されず、上記のスタイルは反映されません。

ビジュアルエディター用の書き方

ビジュアルエディターに反映させるには、以下のように書く必要があります。

もしくは以下のように、body#tinymce.wp-editor配下に適用する形で書いてもOKです。

まとめ

このような感じで、以下の3手順で結構簡単にスタイルを変更することができます。

  1. functions.phpにadd_editor_style();と追記する
  2. editor-style.cssファイルを作成する
  3. editor-style.cssに好みのスタイルを書く

今回、ビジュアルエディターのカスタマイズをし、エディターの表示が、実際のテーマとほぼ同じになったことで、見やすさが全然違います。

記事を書くのにも、出来上がった状態を見ながら書けるので、改行の使い方なども完成品を想像しながら入れることができます。

というわけで「Wordpressデフォルトのビジュアルエディターが見づらくて使いづらい」といった場合には、おすすめのカスタマイズ方法です。

※Simplicity1.7.7のバージョンアップで、この設定は追加予定です。

『WordPressのビジュアルエディターのスタイルをカスタマイズする方法いろいろ』へのコメント

  1. 名前:ケイタ 投稿日:2015/07/05(日) 16:07:58 ID:c15c086cd

    度々コメントさせてもらっているケイタです。
    先月から Simplicity を使ってブログを始めたのですが、「WordPressのビジュアルエディタ使えるよ」という記事を書いたので、すごく参考になります。

    しかも、

    ※Simplicity1.7.7のバージョンアップで、この設定は追加予定です。

    とのことで、本当素晴らしいですね…。

  2. わいひら 名前:わいひら 投稿日:2015/07/05(日) 17:28:01 ID:c494bcb1b

    ブログを始められたのですね。
    Sublime Text、Sass、Wordpress、CSSなど僕の興味ある内容ばかりです。
    RSSで購読させていただきますね。

  3. 名前:アシベ 投稿日:2015/12/08(火) 13:00:20 ID:3400c7389

    こんにちは、WordPressに関する詳しい情報がたくさん載っているのでとても重宝しています。
    質問なのですが、記事の指示に従いながらビジュアルエディタをCSSで装飾するところまではうまく行ったのですが、いざ公開してみるとクラスやIDが入っていないため反映されずになっています。(テンプレートテーマではなく自作テーマで行っています。)
    ビジュアルエディタと同じように投稿した記事にも同じように反映させるにはどのようにすればいいのでしょうか?
    ご伝授のほどお願い申し上げます。

  4. わいひら 名前:わいひら 投稿日:2015/12/08(火) 19:29:33 ID:9eef5b5c3

    質問なのですが、記事の指示に従いながらビジュアルエディタをCSSで装飾するところまではうまく行ったのですが、いざ公開してみるとクラスやIDが入っていないため反映されずになっています。(テンプレートテーマではなく自作テーマで行っています。)
    ビジュアルエディタと同じように投稿した記事にも同じように反映させるにはどのようにすればいいのでしょうか?

    ちょっと、質問内容を僕が理解できていないかもしれませんので質問させてください。
    ビジュアルエディターで設定したスタイルと同様に、公開した記事にもスタイルを適用したいということでしょうか?

    もしそうなら、「style.cssに、同様のスタイルを書く」か、「設定したスタイルシートファイルをstyle.cssで@importする」か、「テンプレートのヘッダー部分をカスタマイズして、headタグ内にlinkでCSSを読み込む」などすればいけるかと思います。
    ※ただし、自作テーマとのことなので、詳細がわからないため、上記の方法でうまくいくかはわからないです。

  5. 名前:アシベ 投稿日:2015/12/09(水) 20:04:24 ID:24335b504

    お返事いただきありがとうございます。

    ビジュアルエディターで設定したスタイルと同様に、公開した記事にもスタイルを適用したいということでしょうか?

    もしそうなら、「style.cssに、同様のスタイルを書く」か、「設定したスタイルシートファイルをstyle.cssで@importする」か、「テンプレートのヘッダー部分をカスタマイズして、headタグ内にlinkでCSSを読み込む」などすればいけるかと思います。

    上記のとおりにメインのstyle.cssに同様のスタイルを記述し、single.phpのthe_contentのと記述してみたところスタイルが適用されました。
    うれしい限りです

  6. わいひら 名前:わいひら 投稿日:2015/12/10(木) 15:20:31 ID:ff7bff2b1

    うまくいったようでよかったです。