WordPress を 7.0 に上げたあと、投稿画面（ブロックエディター）の見た目が変わってしまった、という経験はありませんか？
Cruwの自社サイト（WordPress 7.0）でも、2026年9月に次の2つが起きました。
- テーマで用意していたエディター用のCSSが効かず、見出しや本文がサイトの記事と違う見た目になる
- 文字をドラッグして選択しても、どこを選択しているのかがわかりにくい
原因は、エディターの本文が iframe（画面の中の別の枠） の中に表示されるようになったのに、テーマのCSSが古い読み込み方・書き方のままだったことでした。この記事では、原因の確かめ方と、実際に行った修正を、コードと一緒に紹介します。
結論：add_editor_style で読み込み、セレクタを書き直す
対処は、次の3つです。
- エディター用のCSSを、
add_editor_style()で読み込む - CSSのセレクタから、
#editorなどの管理画面の要素を外す - 選択範囲の色（
::selection）を、エディター用のCSSで指定する
add_editor_style() で読み込んだCSSは、WordPress が iframe の中の本文に入れてくれます。iframe になる場合も、ならない場合も、同じCSSで動きます。
原因：エディターの本文が iframe の中に表示されるようになった
WordPress 7.0 で iframe になる条件が変わった
ブロックエディターの本文は、以前は管理画面と同じページの中に、そのまま表示されていました。現在は、管理画面のCSSと本文のCSSが混ざらないように、本文だけを iframe の中に表示する方式へ、段階的に切り替えが進んでいます。
WordPress 7.0 では、iframe にするかどうかの判定が変わりました。
| iframe になる条件 | |
|---|---|
| 以前 | サイトに登録されているブロックを見て判定。古い形式（APIバージョン2以下）のブロックを登録するプラグインが1つでもあると、iframe にならない |
| WordPress 7.0 | その投稿に実際に入っているブロック だけを見て判定。すべて APIバージョン3以上なら iframe になる |
| WordPress 7.1 | ブロックのAPIバージョンに関係なく、常に iframe になる |
つまり 7.0 からは、古い形式のブロックを登録するプラグインが入っていても、標準のブロックだけで書いた記事は iframe で表示されます。「7.0 に上げたら、急にエディターの見た目が変わった」のは、このためです。すでに公開されている 7.1 では常に iframe になるので、7.0 で症状が出ていないサイトも、7.1 に上げる前に確認しておくと安心です。
くわしくは、WordPress の開発者向けブログ「Iframed Editor Changes in WordPress 7.0」（英語）で案内されています。
iframe の中には、管理画面の要素がない
Cruwのテーマでは、エディター用のCSSを次のように読み込んでいました。
// 修正前
function add_my_assets_to_block_editor() {
wp_enqueue_style( 'my-gutenberg-style', get_stylesheet_directory_uri() . '/css/style-editor.min.css' );
}
add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );CSSのセレクタは、管理画面の要素から書き始めていました。
/* 修正前 */
#editor .editor-styles-wrapper {
font-size: 14px;
}
#editor .edit-post-visual-editor h2 {
color: #fff;
background-color: #00a6ff;
}iframe の中は、管理画面とは別のページです。#editor や .edit-post-visual-editor は、iframe の外側の管理画面にしかありません。そのため、これらから始まるセレクタは、iframe の中の本文には一致せず、スタイルが当たりません。
また、enqueue_block_editor_assets は、本来はエディターの操作画面（ツールバーやサイドバー）向けの読み込み口です。本文の見た目には、別の方法を使うのが今の正しいやり方です。
iframe になっているかを確かめる方法
投稿画面を開き、ブラウザの開発者ツール（Chrome なら F12 キー）の「Console」で、次の1行を実行します。
document.querySelector('iframe[name="editor-canvas"]')- iframe の要素が表示される → 本文は iframe の中に表示されています
nullと表示される → iframe になっていません
開発者ツールの「Elements」で本文の見出しを選び、テーマのCSSが当たっているかを見ると、原因を絞り込めます。
対処1：add_editor_style で読み込む
functions.php の読み込みを、次のように変えます。
// 修正後
add_action( 'after_setup_theme', function () {
add_theme_support( 'editor-styles' );
add_editor_style( 'css/style-editor.min.css' );
} );ポイントは3つです。
add_theme_support( 'editor-styles' )を、あわせて指定する- ファイルの場所は、テーマのフォルダからの相対パスで書く
- フックは
after_setup_themeを使う
この方法で読み込んだCSSは、WordPress が本文に入れるときに、各セレクタの前へ .editor-styles-wrapper を自動で付けます。管理画面のほかの部分に、スタイルがはみ出すことはありません。
対処2：CSSのセレクタを書き直す
.editor-styles-wrapper は WordPress が付けてくれるので、CSSには書きません。サイトの記事と同じように、要素をそのまま指定します。
/* 修正後 */
body {
color: #292929;
background-color: #fff;
font-size: 14px;
line-height: 1.8;
}
h2 {
color: #fff;
padding: .6em .8em;
border-radius: 14px;
background: linear-gradient(90deg, #0097db, #00b2ff 60%, #7fc8ff);
}
/* 本文の幅を、サイトの記事と同じにする */
.wp-block {
max-width: 956px;
}body に書いた指定は、エディターの本文全体（.editor-styles-wrapper）への指定に置き換えられます。文字の大きさや行間など、サイトでは body に書いている指定を、そのまま書けます。
サイトとエディターで、同じSCSSを使う
Cruwでは、あわせて「記事本文の見た目」を1つのファイルにまとめました。サイトの記事用とエディター用で別々に書いていると、片方だけを直して、見た目がずれていくためです。
// _entry-content.scss（記事本文の見た目。サイトとエディターで共通）
%entry-content {
h2 { /* 見出しの見た目 */ }
h3 { /* … */ }
pre { /* … */ }
}// サイト側
.entry-content {
@extend %entry-content;
}
// エディター側（style-editor.scss）
@import "./entry-content";
body {
@extend %entry-content;
}見出しやコードの見た目は、共通のファイルを直せば、サイトとエディターの両方に反映されます。
サイト側でCSSフレームワークが決めている値に注意
サイトで Bootstrap などのCSSフレームワークを使っている場合、段落の余白やリストの字下げは、フレームワークが決めています。エディターにはフレームワークが読み込まれないので、同じ値をエディター用のCSSに書き足します。
p {
margin-top: 0;
margin-bottom: 1rem;
}
ul,
ol {
margin-top: 0;
margin-bottom: 1rem;
padding-left: 2.5em;
}対処3：選択範囲の色を指定する
文字を選択したときの色は、::selection で指定できます。Cruwのテーマでは、エディター用のCSSに選択範囲の色の指定がありませんでした。そこで、背景の色ごとに、はっきり見える色を指定しました。
/* 通常の文字 */
::selection {
background: rgba(0, 151, 219, .3);
color: #0b2a4a;
}
/* 青い背景・白い文字の見出し */
h2::selection,
h2 *::selection {
background: #0b2a4a;
color: #fff;
}
/* 濃い背景のコードブロック */
pre::selection,
pre *::selection {
background: rgba(255, 255, 255, .35);
color: #fff;
}見出しやコードのように背景に色がある部分は、通常の文字と同じ選択色だと、背景になじんで見えなくなります。背景ごとに分けて指定するのがポイントです。
つまずきやすい点
ローカル環境と本番の WordPress のバージョンをそろえる
Cruwでは、ローカル環境の WordPress が古いバージョンのままだったため、最初は本番の症状を再現できませんでした。エディターの表示は、WordPress のバージョンで変わります。確認の前に、本番と同じバージョンにそろえましょう。
古い形式のブロックがあると、表示の方式が変わる
WordPress 7.0 では、投稿の中に APIバージョン2以下のブロックが1つでもあると、その投稿は iframe なしで表示されます。記事によって表示の方式が変わるので、「この記事では効くのに、別の記事では効かない」ということが起こります。
add_editor_style() で読み込んだCSSは、どちらの方式でも本文に入ります。方式のちがいを気にせずに済むのも、この方法をおすすめする理由です。
エディターの画面そのものを変えたいときは、別の読み込み口を使う
ツールバーやサイドバーなど、エディターの操作画面の見た目を変えたいときは、これまでどおり enqueue_block_editor_assets を使います。本文の見た目は add_editor_style()、操作画面は enqueue_block_editor_assets、と使い分けます。
よくある質問
クラシックテーマでも、この方法は使えますか？
使えます。Cruwの自社サイトも、ブロックテーマではなく、PHPのテンプレートで作ったクラシックテーマです。add_editor_style() は、どちらのテーマでも使えます。
CSSを変えたのに、エディターに反映されません。
ブラウザのキャッシュが残っていることがあります。投稿画面を開いた状態で、再読み込み（Windows は Ctrl + F5、Mac は Command + Shift + R）を試してください。それでも変わらないときは、add_editor_style() に書いたパスが、テーマのフォルダからの相対パスになっているかを確かめます。
エディターの見た目を、サイトとまったく同じにできますか？
本文の文字・見出し・余白などは、ほぼ同じにできます。ただし、ヘッダーやサイドバーなど、記事本文の外側はエディターにはありません。「記事本文の部分が、公開したときと同じに見える」ことを目標にするのがおすすめです。
まとめ
- WordPress 7.0 から、エディターの本文が iframe の中に表示される場面が増えた。7.1 では常に iframe になる（Cruwのサイトは 7.0 で確認）
#editorなどの管理画面の要素から書いたCSSは、iframe の中の本文には効かない- エディター用のCSSは
add_editor_style()で読み込み、選択範囲の色もあわせて指定する
「WordPress を更新したら、管理画面の表示が変わってしまった」「更新が不安で、古いバージョンのままになっている」といったご相談も承っています。長野県上田市のCruwまで、お問い合わせからお気軽にご相談ください。WordPress のフォームの不具合については、Contact Form 7で「メッセージの送信に失敗しました」と出る原因と対処法でも紹介しています。
