「昨日までは大丈夫だったのに、急にサイトのデザインが崩れた」
「ブロックエディタ（Gutenberg）のカラムが縦積みになってしまう」
「要素間の余白（gap）が効かずにギチギチに詰まっている」
WordPressサイトを運営・制作していて、こんな冷や汗をかくような現象に遭遇したことはありませんか？
CSSをいじった覚えもないのに、ブロックエディタのレイアウトだけが崩壊している…。
その原因、実はSEOプラグイン「Yoast SEO」のたった一つの設定にあるかもしれません。
今回は、WordPress 5.9以降のサイトで発生しやすい、意外なトラブルの原因と解決策を教えます。
【解決策】まずはここをチェック！3クリックで直ります
原因の解説の前に、まずは直し方から。
もし「Yoast SEO」プラグインを使用しているなら、以下の設定を確認してください。
- WordPress管理画面から [Yoast SEO] > [検索での見え方 (Search Appearance)] をクリック。
- [一般 (General)] タブを開く。
- 下の方にある 「タイトルを強制的に書き換える (Force rewrite titles)」 というスイッチを探す。
- これが「ON（有効）」になっていたら、「OFF（無効）」 に切り替えて [変更を保存] をクリック。
これだけで、崩れていたレイアウトが元通りになるはずです。
「項目が見当たらない」場合
現在のYoast SEOのバージョンや、テーマが正しく設定されている場合、この項目自体が表示されない（隠されている）ことがあります。その場合は、このトラブルの原因は別にある可能性が高いです。
【検証】なぜ設定ひとつでデザインが崩壊するのか？
ここからは、「なぜそんなことが起きるのか？」を技術的に深掘りします。
この現象が発生したサイトのソースコードを、設定が「ONの状態」と「OFFの状態」で比較検証してみました。すると、<head>内に出力されるべき重要なCSSが、ONにした途端にごっそり消滅していることが判明しました。
消えてしまったコードの正体
比較の結果、以下のスタイル定義が出力されなくなっていました。
- id=’global-styles-inline-css’ (グローバルスタイル)WordPress 5.9以降で導入された theme.json ベースのスタイルです。サイト全体で使用する「色」や「余白」の定義（CSS変数）が含まれています。
- id=’wp-block-columns-inline-css’ (カラムブロック用CSS)カラムレイアウトを横並びにするための flex 指定などが書かれています。
- id=’wp-block-image-inline-css’ (画像ブロック用CSS)画像のスタイル制御用CSSです。
崩れるメカニズム
現在のWordPress（ブロックエディタ）は、レイアウトの制御をこれらの「インラインCSS」に大きく依存しています。
- カラムが縦になる理由：wp-block-columns-inline-css が読み込まれないため、.wp-block-columns { display: flex; } というスタイルが適用されず、div要素が通常通り縦に積まれてしまいます。
- 余白がなくなる理由：global-styles-inline-css が読み込まれないため、:root に定義されるはずの –wp–preset–spacing–… などのCSS変数が定義されず、余白（gap）の値が無効になります。
なぜYoast SEOがCSSを消してしまうのか？
ここからは推測になりますが、Yoast SEOの「タイトルを強制的に書き換える」機能の実装方法に原因があります。
この機能は、PHPの「出力バッファリング（Output Buffering）」という仕組みを使っています。ページが出力される直前に処理を割り込ませ、HTML全体を一時的に保存し、<title>タグを探して書き換えてから出力するという力技を行っています。
一方、近年のWordPressは、wp_head フックを使って動的にグローバルスタイルを生成・注入しています。Yoast SEOの「割り込み・書き換え処理」が、このWordPressコアのスタイル生成プロセスと競合し、スタイルの出力処理がスキップされる、あるいは正常にフックされずに出力漏れが発生していると考えられます。
【背景】そもそも、なぜこんな設定があるの？
「そんなに悪さをするなら、なぜこの機能があるの？」と思いますよね。
実はこれ、「レガシー（遺産）機能」なんです。
昔のWordPressテーマ（バージョン4.0以前など）は、テーマ側で適切にタイトルタグを出力できないものが多くありました。そうした古いテーマでもSEO設定を反映させるための「救済措置」として、この強制書き換え機能が存在しています。
しかし、現在の標準的なテーマは add_theme_support( 'title-tag' ); という関数を使って、WordPress推奨の方法でタイトルを出力しています。
つまり、現代のWordPressテーマを使っている限り、この設定は不要どころか、今回のような不具合の種になるということです。
まとめ
- 症状： ブロックエディタのレイアウト崩れ（カラム落ち、余白消失）。
- 原因： Yoast SEOの「タイトルを強制的に書き換える」がONになっていること。
- 技術的要因： 強制書き換え処理が、WordPressコアのグローバルスタイル出力を阻害している（CSSが出力されない）。
- 対策： 設定を「OFF」にする。
WEB制作の現場では、良かれと思ってONにしていた設定や、過去の案件から引き継いだ設定ファイルが、WordPressの進化に伴って牙を剥くことがあります。
「何もしていないのに崩れた！」と焦ったときは、まずは深呼吸をして、プラグインのレガシーな設定を疑ってみると解決への近道になるかもしれません。