【WordPress】編集画面のeditor-style.cssが効かない対処法6選

「WordPressでeditor-style.cssをアップロードしたら編集画面が明朝体になって全然効いてない!?」

編集画面のeditor-style.cssが効かない原因と対処法6選を紹介します。

【原因1】CSS内に@importがある

@importはCSSを読み込むことができます。

とくにWebフォントを読み込むときに使います。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');

editor-style.cssに@importがあると「@importが効かない」ではなく「editor-style.cssが効かな」くなります。

WordPressの編集画面が明朝体に変わっていたらこの現象の可能性が高いでしょう。

【解決方法】@importを消す

@importの行を消すとeditor-style.cssが効くようになります。

Webフォントを使いたい場合は、Webフォントをダウンロードし、@font-faceで指定しましょう。

@font-faceは以下のように使います。

@font-face{
	font-family: "Noto Sans Japanese";
	src:url("images/NotoSansJP-Medium.otf");
}
body{
	font-family: 'Noto Sans Japanese', sans-serif;
}

@font-face内のsrcではダウンロードしたフォントの場所を指定します。

@font-face内のfont-familyでは任意の名前をつけます。

bodyなどのfont-familyではつけた名前と同じ名前を指定します。

具体的な方法は下記をご覧ください。

【原因2】functions.phpの記述を間違えている

WordPressの編集画面が明朝体にもなっていない場合はfunctions.phpの記述を間違えている可能性があります。

下記をfunctions.phpに追記しましょう。

//ビジュアルエディタ用スタイル適用
function my_theme_setup() {
  //add_theme_support() で editor-styles を指定
  add_theme_support( 'editor-styles' );
  
  //add_editor_style() で読み込むスタイルシートを指定
  add_editor_style( 'editor-style.css' ); 
}
add_action( 'after_setup_theme', 'my_theme_setup');

functions.phpをまだ作っていない場合は下記を記述したファイルに「functions.php」と名前をつけてテーマのフォルダ内に保存しましょう。

<?php
//この間に記述
?>

【原因3】余計なセレクタがある

「bodyは効いているのにh2が効いていない」というときは余計なセレクタがあるかもしれません。

editor-style.cssはstyle.cssからそのままコピペすることが多いでしょう。

その場合下記のように先祖要素のセレクタも指定していることがあります。

main h2{
   font-size:2em;
}

WordPressの編集画面ではその先祖要素はないため外しましょう。

h2{
   font-size:2em;
}

【原因4】キャッシュが読まれている

editor-style.cssに限らず、CSSが効かないときのあるあるですが、キャッシュが読まれている、つまりCSSの更新が反映されていないことがあります。

F5またはCtrl+F5で再読み込みしてみましょう。

【原因5】アップロードされていない

functions.phpやeditor-style.cssを更新したのにアップロードしていないパターンです。

もう一度アップロードしましょう。

また、アップロードソフト側の問題でアップロードされていない場合もあります。

アップロードソフトを再起動してみましょう。

また、ファイル側の保存を忘れている場合もあります。

Ctrl+Sなどでファイルを保存しましょう。

その他、下記を参考に更新されていない可能性をつぶしていきましょう。

【原因6】CSSを間違えている

CSSの記述を間違えていたり、優先度が弱くてCSSが効いていない可能性があります。

下記記事を参考に見直してみてください。

【まとめ】editor-style.cssが効かない原因

【原因1】CSS内に@importがある
→@importを消す
→Webフォントを使いたい場合はWebフォントをダウンロードし、@font-faceで指定

【原因2】functions.phpの記述を間違えている
→見直す

【原因3】余計なセレクタがある
→先祖要素のセレクタを消す

【原因4】キャッシュが読まれている
→F5かCtrl+F5で再読み込み

【原因5】アップロードされていない
→再アップロード、ソフトの再起動

【原因6】CSSを間違えている
→見直す

以上、編集画面のeditor-style.cssが効かない原因と対処法6選でした。