はじめに

WordPress の Gutenberg エディタで記事を書く際に、h2 と h3 の表示を少し変えてみました。記事はちゃんと変更されたのですが、Gutenberg エディタ上の表示は元のままで、変更した内容が反映されていませんでした。

そこで、記事の h2、h3 のスタイルを Gutenberg エディタにも反映させる事ができましたので、その方法について説明します。

style.css の編集

表示用に作成した、Twenty Twenty Five 子テーマの style.css の内容です。h3 と h2 について変更しています。

/*
Theme Name: Twenty Twenty-Five Child
Version: 1.1
Template: twentytwentyfive
*/
/* 20250122 h3 の表示変更 左にライン、太字*/
h3 {
        border-left:5px solid #707f49;
        padding-top:9px;
        padding-bottom:9px;
        padding-left:9px;
        font-weight:bold;
}
/* 20250122 h2 の表示変更 太字 */
h2 {
        font-weight:bold;
}

• h2 : Bold
• h3 : 先頭に縦棒、Bold、及び padding 調整

この内容を子テーマの style.css に記入すれば、記事の方はちゃんと変更されます。

しかし、Gutenberg エディタの方には反映されませんでした。

functions.php の編集

Gutenberg エディタに CSS の内容を反映させるには、functions.php に次のような関数とフックを追加する必要があります。

// 20250125 Gutenburg Editor に表示用スタイルシートの内容を反映させる
function wpdocs_theme_add_editor_styles() {
  add_theme_support('editor-styles');
  add_editor_style('style.css');
}

add_action('after_setup_theme', 'wpdocs_theme_add_editor_styles');

今回は、表示用と Gutenberg エディタ用で同じ style.css を使用しました。

結果

Gutenberg エディタと記事の表示で、h2 と h3 の見た目が同じになりました。細かい事ですが気になっていましたので、解決できて良かったです。

qiita のこちらの記事を参考にしました。