0%

Programmingプログラミングナレッジ

Posted:2019.02.05

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

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 日本語版

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】