WordPress子テーマのスタイルがブロック
エディターで反映されない問題の解決方法

2025-05-062025-04-23 by chiilabo

WordPressの子テーマを使っていると、サイト表示では問題なくスタイルが適用されているのに、記事を書くときのブロックエディターでは反映されないことがあります。この問題に直面したとき、単なる設定ミスだと思っていましたが、実はWordPressの設計に深い理由があることがわかりました。

1. 最初に見つけた問題点

GeneratePressの子テーマを使っていたところ、ブロックエディターでスタイルが反映されない状況に遭遇しました。調べてみると、functions.phpに原因がありました。

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Code language: JavaScript (javascript)

この設定では親テーマのスタイルは読み込まれますが、肝心の子テーマのスタイルが読み込まれていなかったのです。また、エディター用のスタイル設定も行われていませんでした。

1.1. シンプルすぎる解決策の落とし穴

最初は次のような単純な解決策を考えました。

子テーマのスタイルを正しく読み込む

add_action( 'wp_enqueue_scripts', 'enqueue_parent_and_child_styles' );
function enqueue_parent_and_child_styles() {
    // 親テーマのスタイルを読み込む
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    // 子テーマのスタイルを読み込む
    wp_enqueue_style( 'child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );
}
Code language: PHP (php)

同じスタイルをブロックエディターにも適用する

// ブロックエディター用のスタイルを追加
add_action( 'enqueue_block_editor_assets', 'add_block_editor_styles' );
function add_block_editor_styles() {
    // 既存の子テーマのスタイルをエディターにも適用する
    wp_enqueue_style( 'child-style-for-editor', 
        get_stylesheet_directory_uri() . '/style.css',
        array(),
        wp_get_theme()->get('Version')
    );
}
Code language: PHP (php)

しかし、実際にこの方法を試してみると、新たな問題が発生しました。フロントエンド用のCSSをそのままエディターに適用すると、次のような不都合が生じたのです：

フロントエンドで非表示にしている要素（display: none）がエディターでも非表示になり、編集できなくなる
ユーザー選択を禁止しているスタイル（user-select: none）がエディターでも適用され、テキスト選択ができなくなる
固定幅やマージン調整が編集作業の妨げになる

これは、「料理のレシピ」と「実際の料理」を同じように扱ってしまったようなものです。どちらも同じ料理に関するものですが、使う場面や目的が違うのです。

1.2. 実践的な解決策：エディター専用のスタイルファイル

これらの問題を解決するには、エディター専用のスタイルファイルを作成するのが最適な方法です。以下の手順で実装します：

子テーマのルートディレクトリにcssフォルダを作り、editor-style.css という新しいファイルを作成する
functions.php を次のように修正する：

<?php
// 親テーマと子テーマのスタイルを読み込む（フロントエンド用）
add_action( 'wp_enqueue_scripts', 'enqueue_parent_and_child_styles' );
function enqueue_parent_and_child_styles() {
    // 親テーマのスタイルを読み込む
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    // 子テーマのスタイルを読み込む
    wp_enqueue_style( 'child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );
}

// ブロックエディター用のスタイルを追加
add_action( 'enqueue_block_editor_assets', 'add_block_editor_styles' );
function add_block_editor_styles() {
    // エディター専用のスタイルファイルを読み込む
    wp_enqueue_style( 'child-editor-style', 
        get_stylesheet_directory_uri() . '/css/editor-style.css',
        array(),
        wp_get_theme()->get('Version')
    );
}
?>
Code language: HTML, XML (xml)

editor-style.css には、エディターで必要なスタイルだけを定義する：

/* エディター全体のスタイル */
.editor-styles-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 見出しのスタイル */
.editor-styles-wrapper h1 {
    font-size: 28px;
    font-weight: 500;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

/* 段落のスタイル */
.editor-styles-wrapper p {
    margin-bottom: 1.5em;
}

/* 画像のボーダー */
.editor-styles-wrapper .wp-block-image img {
    border: 1px solid rgba(93, 89, 75, .5);
}
Code language: CSS (css)

このように、フロントエンド用とエディター用で別々のスタイルを管理することで、それぞれの環境に最適化された表示と操作性を実現できます。

2. なぜすべてのスタイルが完全に同じようには見えないのか

サイト表示とエディター画面では完全に同じ見た目にはなりません。これには技術的な理由があります。

2.1. 異なるHTML構造

フロントエンド表示とエディター画面では、HTMLの構造が根本的に異なります。

フロントエンド側では、テーマによって定義された構造が使われます：

<article class="post">
  <header class="entry-header">
    <h1 class="entry-title">タイトル</h1>
  </header>
  <div class="entry-content">
    <p>コンテンツ</p>
  </div>
</article>
Code language: HTML, XML (xml)

一方、エディター側では編集機能のための特別な構造が使われます：

<div class="editor-styles-wrapper">
  <div class="block-editor-writing-flow">
    <div class="block-editor-block-list__layout">
      <div class="wp-block">
        <!-- ブロックの内容 -->
      </div>
    </div>
  </div>
</div>
Code language: HTML, XML (xml)

これは本の「内容」と「目次」が違うようなものです。同じ本の情報でも、目的によって構造が異なるのです。

2.2. クラス名とスコープの違い

サイト表示では .entry-content などのクラス名が使われますが、エディターでは .editor-styles-wrapper などの異なるクラス名が使われます。

例えば、次のようなスタイルはエディターでは効きません：

.blog .inside-article .entry-title { font-size: 20px; }
Code language: CSS (css)

エディターではこのクラスが存在しないからです。エディターで同じ効果を得るには：

.editor-styles-wrapper .wp-block-post-title { font-size: 20px; }
Code language: CSS (css)

のように書く必要があります。

3. なぜこのような設計になっているのか

この構造の違いには、深い設計理由があります。

編集と表示の分離 – エディターは編集するためのもの、フロントエンドは閲覧するためのものです。料理でいえば、キッチンと食卓の違いのようなものです。
モダンな技術基盤 – ブロックエディターはReactというJavaScriptの技術で作られており、コンポーネントベースの設計になっています。これは、家具をモジュール式に組み立てるようなものです。
リアルタイム編集のため – エディターは入力するたびに更新されるため、各部品が独立して動作する必要があります。
スタイルの干渉防止 – 管理画面のスタイルとコンテンツのスタイルが互いに影響しないよう、分離されています。これは、水と油を分けるようなものです。
後方互換性 – 長い歴史を持つWordPressは、古いテーマやプラグインとの互換性を維持する必要があります。

4. エディター専用スタイルの作成ポイント

エディター用のスタイルファイルを作成する際のポイントをいくつか紹介します：

必要最小限のスタイルに絞る – フロントエンドのすべてのスタイルをコピーするのではなく、エディターでの表示と編集に必要なスタイルだけを定義します。
編集操作を妨げないようにする – 選択禁止や非表示などの設定は避け、編集に必要な要素は常に操作できるようにします。
.editor-styles-wrapperをセレクタに含める – すべてのスタイル定義にこのクラスを含めることで、他の管理画面要素への影響を防ぎます。
フォントやカラーなど基本スタイルを優先する – 見出しのサイズ、フォント、色など基本的な視覚デザインを優先的に再現します。

5. まとめ

WordPress子テーマのスタイルをブロックエディターに反映させる最適な方法は、エディター専用のスタイルファイルを作成することです。単に子テーマのスタイルをエディターにも適用するだけでは、編集作業に支障をきたす問題が発生します。フロントエンドとエディターは構造が異なるため、それぞれの環境に最適化されたスタイル設定が必要です。この方法により、見た目の一貫性を保ちながら、快適な編集環境を実現できます。