Ownedmedia ウェブ制作に役立つコンテンツを発信中!

WordPress 2019.02.05

WordPressのエディタ内でもCSSを反映させるエディタースタイルの適用方法

Tags: ,,

WordPress案件のクライアントワークでも、お客さんからのご要望として時々上がってくるのが、エディタ内にもスタイルを適用させる、エディタースタイルを使うケースなのですが、ついつい忘れがちになるので備忘録として残しておきたいと思います。

 

エディタースタイルは、WordPressのエディタ内で適用させるCSSのことで、該当するCSSファイルを用意して、指定することで適用されるようになります。まず、エディタースタイルが適用されていない場合、つまりデフォルトの表示ではこのようになります。

WordPressのエディタ内でもCSSを反映させるエディタースタイルの適用方法

 

編集する人のリテラシーによっては、なかなか取っ付きにくいと思われるかもしれませんね。そこで、このエディタ内の表示にもCSSが適用されるようにしていきます。まずは「functions.php」に下記の通り記述し、エディタースタイルを有効化させます。この時に独自のCSSを使う場合には該当するファイルのパスとファイル名を直接引数へと指定します。

【functions.php】

add_editor_style();

// 独自ディレクトリおよびファイルを指定
add_editor_style('PATH/FILE_NAME.css');

 

ちなみにですが、デフォルトの場合はテーマファイル直下の「editor-style.css」を参照する形になっています。ここではデフォルトの仕様で進めていきます。そこで、下記のようにテーマファイル直下に「editor-style.css」を用意します。

wp-content
 ┗ themes
  ┗ USER_THEME
   ┗ editor-style.css

 

「editor-style.css」には実際にエディタ内で適用させるスタイルを記述していきます。この時に確実に適用させるためにも、WordPressのエディタ要素に付与されているclass名をセレクタに追記しておくことをオススメします。下記の例では「.wp-editor」になります。

【editor-style.css】

.wp-editor h1 {
  background: #ccc;
  font-weight: bold;
  margin-bottom: 30px;
}

 

これで改めてエディタを確認すると、、こんな感じでCSSが適用されて、よりブログのイメージに近づけることができます。(サンプルはモノクロのため少しわかりにくいのですが、、)

WordPressのエディタ内でもCSSを反映させるエディタースタイルの適用方法

 


 

エディターには比較的簡単にスタイルを適用させることができますので、必要に応じて気軽に対応できそうですね。

 

(参考にさせて頂いたサイト)
Editor Style – WordPress Codex 日本語版

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?