グーテンベルグ（ブロックエディタ）をCSSで調整する目的と注意点

WordPressのグーテンベルグ（ブロックエディタ）で記事を入稿する際、「編集画面と公開後のサイトで見た目が全然違う」と感じたことはありませんか？

例えば、編集画面では読みやすい行間だったのに、公開すると詰まって見える。あるいは、見出しやボタンのデザインが本番サイトと異なるため、全体の仕上がりをイメージしにくい。

こうした「プレビューと本番のズレ」は、記事公開後の手戻りや修正作業を増やす原因になります。

  • 目的は「編集画面とサイト本番のスタイル差を縮める」こと。ライティング時の見た目が近いほど、公開後のズレや戻し作業が減ります。
  • やり過ぎ注意：管理画面のUIそのもの（サイドバーやツールバー）に影響しないよう**スコープ（適用範囲）**を限定します。
  • アプローチは大きく2つ
    1. editor-style.css を使い、エディタ専用のCSSを読み込む
    2. admin_enqueue_scripts / enqueue_block_editor_assets で管理画面にだけ読み込む

用語メモ：「ブロックエディタ」＝Gutenberg。投稿画面の本文エリアは React ベースで構築され、専用のクラス名で包まれています。

エディタ用CSSを有効化します（editor-style.css と add_theme_support の設定）

検索意図：エディタ専用CSSの基本的な設定方法を知りたい。

1) functions.php にサポート宣言

// テーマでエディタスタイルを有効化
add_action('after_setup_theme', function () {
  // エディタスタイルを使う宣言
  add_theme_support('editor-styles');
  // 読み込むファイル（テーマ直下または任意パス）
  add_editor_style('css/editor-style.css'); // 例: /wp-content/themes/your-theme/css/editor-style.css
});

2) editor-style.css を作成

最小構成の例（後述の「よく使うセレクタ」を踏まえたスコープ化）：

/* editor-style.css 例 */
.editor-styles-wrapper {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.8;
  color: #222;
}

.editor-styles-wrapper p {
  margin: 0 0 1.2em;
}

.editor-styles-wrapper .wp-block-heading h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  margin: 1.2em 0 0.6em;
}

補足：

  • add_theme_support('editor-styles') を宣言しないと、add_editor_style() が効きません。
  • editor-style.css は管理画面の本文プレビュー専用です。テーマ本番用のCSSとは別管理にすると安全です。

管理画面だけにCSSを読み込みます（admin_enqueue_scripts の使い方）

検索意図：editor-style.css だけでは足りない／条件付きでCSSを追加したい。

enqueue_block_editor_assets（ブロックエディタ限定で確実）

add_action('enqueue_block_editor_assets', function () {
  // ブロックエディタでのみ読み込み（クラシックエディタでは読まれません）
  wp_enqueue_style(
    'my-editor-extra',
    get_template_directory_uri() . '/css/editor-extra.css',
    [],
    filemtime(get_template_directory() . '/css/editor-extra.css')
  );
});

admin_enqueue_scripts（管理画面全体→絞り込みで安全に）

add_action('admin_enqueue_scripts', function ($hook) {
  // 投稿/固定ページのブロックエディタ画面のみ
  // 例: post.php(編集), post-new.php(新規)
  if ($hook === 'post.php' || $hook === 'post-new.php') {
    // さらにブロックエディタかを厳密にチェック
    $screen = get_current_screen();
    if ($screen && method_exists($screen, 'is_block_editor') && $screen->is_block_editor()) {
      wp_enqueue_style(
        'my-editor-scope',
        get_template_directory_uri() . '/css/editor-scope.css',
        [],
        filemtime(get_template_directory() . '/css/editor-scope.css')
      );
    }
  }
});

補足：

  • 追加CSSは本番テーマCSSを上書きせず、エディタ向け微調整に限定すると事故が減ります。
  • 変更頻度が高い微調整は editor-extra.css のように分けるとメンテ楽。

よく使うセレクタを理解します（.editor-styles-wrapper／.block-editor／.wp-block など）

検索意図：どのクラスに当てれば安全に効くか知りたい。

  • .editor-styles-wrapper
    エディタ内の本文エリア全体を包むラッパー。まずここを起点にスコープすると、管理画面のUIを汚染しにくい。 .editor-styles-wrapper .wp-block { max-width: 720px; } /* コンテンツ幅の視覚的ガイド */
  • .block-editor / .block-editor-writing-flow
    Gutenbergエディタの内部構造用。UI側のクラスも含むため、本文見た目の調整は .editor-styles-wrapper 優先。
  • .wp-block
    すべてのブロックのベース。個別ブロックは .wp-block-paragraph, .wp-block-heading, .wp-block-button など。 .editor-styles-wrapper .wp-block-paragraph { /* 段落ブロック */ } .editor-styles-wrapper .wp-block-heading { /* 見出しブロック */ } .editor-styles-wrapper .wp-block-button .wp-block-button__link { /* ボタン */ }
  • ユーティリティ
    • 画像：.wp-block-image img
    • リスト：.wp-block-list li
    • 引用：.wp-block-quote
    • テーブル：.wp-block-table table

まずは「.editor-styles-wrapper を最上位に必ず付ける」を習慣化すると安全です。

具体例で調整します：見出し・段落・ボタンのプレビューを整えます

検索意図：すぐ使える実用CSSを知りたい。

見出し（Heading）

/* 見出しの階層感と余白を統一 */
.editor-styles-wrapper .wp-block-heading h1 { font-size: clamp(26px, 3.2vw, 34px); margin: 1.4em 0 .6em; }
.editor-styles-wrapper .wp-block-heading h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 1.3em 0 .6em; }
.editor-styles-wrapper .wp-block-heading h3 { font-size: clamp(18px, 2.2vw, 22px); margin: 1.2em 0 .5em; }

/* 下線バリエーション（サイト風プレビュー） */
.editor-styles-wrapper .wp-block-heading h2.is-style-underline,
.editor-styles-wrapper .wp-block-heading h3.is-style-underline {
  border-bottom: 2px solid currentColor;
  padding-bottom: .25em;
}

段落（Paragraph）

/* 読みやすい行長と行間 */
.editor-styles-wrapper {
  --measure: 72ch; /* 最大文字幅 */
}
.editor-styles-wrapper .wp-block-paragraph {
  max-width: var(--measure);
  line-height: 1.9;
  letter-spacing: .02em;
}

/* 強調の見え方 */
.editor-styles-wrapper em  { background: linear-gradient(transparent 60%, #fff2a8 0); }
.editor-styles-wrapper strong { font-weight: 700; }

ボタン（Buttons）

/* ブロックボタンのデフォルト見え方を本番寄りに */
.editor-styles-wrapper .wp-block-button .wp-block-button__link {
  display: inline-block;
  padding: .8em 1.2em;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .06s ease, box-shadow .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* 透過（アウトライン）スタイル想定 */
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid currentColor;
}

/* ホバー時のフィードバック */
.editor-styles-wrapper .wp-block-button .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

補足：

  • .is-style-* はブロックの「スタイル」機能（エディタ右側）で付くクラス。サイトのデザインに合わせて増やすと便利。

レスポンシブ・ダークモードにも対応します（メディアクエリ・prefers-color-scheme を使います）

検索意図：プレビュー時にモバイルやダークテーマでも崩れないCSSが知りたい。

レスポンシブ（横幅が狭いとき）

/* 幅 600px 以下でタイポサイズと余白を微調整 */
@media (max-width: 600px) {
  .editor-styles-wrapper { line-height: 1.85; }
  .editor-styles-wrapper .wp-block-heading h1 { font-size: 24px; }
  .editor-styles-wrapper .wp-block-heading h2 { font-size: 21px; }
  .editor-styles-wrapper .wp-block-paragraph { letter-spacing: .01em; }
  .editor-styles-wrapper .wp-block { max-width: 92%; }
}

ダークモード（OS設定に追従）

@media (prefers-color-scheme: dark) {
  .editor-styles-wrapper {
    color: #e9e9e9;
    background: #121212; /* エディタの本文領域だけ暗くする例 */
  }
  .editor-styles-wrapper a { color: #8ecbff; }
  .editor-styles-wrapper .wp-block-button .wp-block-button__link {
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
  }
  .editor-styles-wrapper .wp-block-quote {
    border-left: 4px solid #4aa3ff;
    background: rgba(255,255,255,.04);
  }
}

補足：

  • 管理画面全体を暗くしないように、あくまで本文領域（.editor-styles-wrapper）内だけで配色を変更します。

反映されないときのチェックリストです（キャッシュ・優先度・!important の扱い）

検索意図：CSSが効かないときの原因切り分けを知りたい。

  1. ファイルパスと読み込み順
    • add_theme_support('editor-styles') は入っているか？
    • add_editor_style('css/editor-style.css') のパスが正しいか？
    • 追加CSSは enqueue_block_editor_assets で後から読み込むと上書きしやすい。
  2. キャッシュ
    • ブラウザキャッシュ／サーバーのキャッシュプラグインをクリア。
    • wp_enqueue_style() の第4引数（バージョン）を filemtime() にしてキャッシュバスト。
    wp_enqueue_style('my-editor-extra', get_template_directory_uri() . '/css/editor-extra.css', [], filemtime(get_template_directory() . '/css/editor-extra.css') );
  3. セレクタのスコープと強さ
    • .editor-styles-wrapper を先頭に付けているか？
    • 競合が強い場合はセレクタの粒度を上げる（例：.editor-styles-wrapper .wp-block-button .wp-block-button__link）。
    • !important は最終手段。多用するとメンテ不能に。
  4. 対象画面の確認
    • そもそもブロックエディタで開いているか（クラシックではないか）。
    • admin_enqueue_scripts を使う場合は $hook や get_current_screen()->is_block_editor() で到達しているか確認。
  5. テーマJSONとの競合
    • theme.json を併用している場合、エディタ側のスタイル生成と競合することがあります。まずはCSSだけで解決し、必要なら theme.json に寄せる設計を検討。
  6. プラグイン由来の上書き
    • デザイン系プラグインが強い優先度でCSSを注入している可能性。Chrome DevTools で「どのCSSが勝っているか」を確認。

仕上げのテンプレ（そのまま使えるスターター）

functions.php

add_action('after_setup_theme', function () {
  add_theme_support('editor-styles');
  add_editor_style('css/editor-style.css');
});

add_action('enqueue_block_editor_assets', function () {
  wp_enqueue_style(
    'my-editor-extra',
    get_template_directory_uri() . '/css/editor-extra.css',
    [],
    filemtime(get_template_directory() . '/css/editor-extra.css')
  );
});

css/editor-style.css（抜粋）

.editor-styles-wrapper {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.9;
  color: #222;
}

.editor-styles-wrapper .wp-block { max-width: 720px; }
.editor-styles-wrapper .wp-block-paragraph { max-width: 72ch; margin: 0 0 1.2em; }
.editor-styles-wrapper .wp-block-heading h2 { font-size: clamp(22px, 2.6vw, 28px); }

/* ボタン */
.editor-styles-wrapper .wp-block-button .wp-block-button__link {
  display: inline-block; padding: .8em 1.2em; border-radius: 9999px; font-weight: 700;
  transition: transform .06s ease, box-shadow .2s ease; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.editor-styles-wrapper .wp-block-button .wp-block-button__link:hover {
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* レスポンシブ & ダーク */
@media (max-width: 600px) {
  .editor-styles-wrapper .wp-block { max-width: 92%; }
}
@media (prefers-color-scheme: dark) {
  .editor-styles-wrapper { color: #e9e9e9; background: #121212; }
}

必要に応じて、実際のサイトのタイポ・配色・余白ルールに合わせて変数化（--color-primary など）しておくと、本番とエディタを同じトークンで管理できて後々ラクです。リライトや追記もお任せください。