WordPressでサイトを運用していると、「何もしていないのに急にレイアウトが崩れた…！」という恐ろしい瞬間があります。

先日、まさにその現象が太陽学園のサイトで発生しました。
しかも トップページは生きているのに、投稿ページだけが完全に崩壊。

今回はこのトラブルを、
F12（開発者ツール）でコードを確認 → 原因を特定 → 親テーマの再インストールで復旧
という流れで解決したので、実例としてまとめます。

■ 突然のレイアウト崩壊

ある日、投稿ページを開くと

コンテンツ幅が崩れてフルスクリーンに広がる
ヘッダーが縦にながくなってリンクボタンが表示されない
サイドバーが巨大に表示される

という状態に。

“CSSが壊れたのかな？” と思うけれど、
実際にページの <head> を見ると CSSは全部読み込まれている。

なのにレイアウトだけめちゃくちゃ、という謎の症状でした。

■ F12（開発者ツール）で原因を探る

一番役に立ったのが F12キーで開く「Elements（ソース確認）」。

ここで、
「HTML構造そのものがどう出ているか」を確認できます。

▼ 普通のSANGOなら

<body>
<div id="page" class="site">
<header class="c-header">…

このように
SANGO特有の “wrapper / container / header” が必ず出る 仕組みになっています。

ところが今回の崩れているページでは…

▼ 実際に出ていたHTML

<body>
<div id="wpadminbar">
<div id="container">（本文）
<style>…

なんと、
SANGOの構造が1本も出ていない！！！

つまり：

＝ CSSではなく
＝ HTML骨格そのものが読み込まれていない
＝テーマテンプレートの読み込みが途中で止まっている

ということが F12 で初めて判明しました。

この段階で
「CSSを直しても意味がない」
ことが確定します。

■ 原因候補を順番に切り分けた

HTMLが出ていない＝テーマが途中で止まっている、というときの原因は大きく3つ。

index.php のパスずれ
WordPressアドレス / サイトアドレスのズレ
親テーマ（SANGO本体）か functions.php のエラー

1と2を確認したところ、いずれも正常。
（index.php も確認済み、URL設定も正しい）

つまり残るのは 親テーマのファイル破損。

調べてみると、WordPress の更新や、テーマ更新の途中エラーなどで
親テーマ内の functions.php / header.php が壊れることがある とのことでした。

■ 親テーマ（SANGO）を再インストール → 即復旧！

最終的に行ったのは：

【SANGO親テーマの再インストール（上書き）】

外観 → テーマ → 新規追加
ZIPアップロード
「すでに存在しています。上書きしますか？」 → OK

これだけ。

すると…

一瞬で元どおりになりました！！！
（本当に即復旧）

SANGO本体の中の破損ファイルが正常な状態に戻ったことが原因です。

再インストールでなくても、新バージョンに更新でも直る可能性が高いので、新バージョンに更新のマークが出ている場合は試してみる価値があります。

■ まとめ：レイアウト崩れの原因は「CSS」じゃないことが多い

今回の経験で、改めてこう思いました。

✔ レイアウトが崩れたとき

→ F12（開発者ツール）で HTML構造を見るのが一番早い

✔ CSSが正常に読み込まれているのに崩れるとき

→ テーマが読み込まれていない＝テンプレートの停止

✔ SANGOの場合

→ 更新途中のファイル破損で header.php / functions.php が壊れることがある

✔ 親テーマの再インストールは“超有効”

→ ほぼ確実に復旧する

■ 今回の一件は、今後のトラブルシューティングの知識として大きい

「F12でHTML構造を見て、テーマが動いているか確認する」
「CSSではなくテーマの読み込みエラーを疑う」
「親テーマの再インストールという選択肢」

これらが分かっていれば、
同じようなトラブルに遭ったときも
すぐに原因を切り分けられます。

■ おわりに

今回は 原因が分かれば一瞬で直るトラブル でしたが、原因が見えないまま CSSだけ触っていたら、確実に数時間失っていたと思います。

同じような状況で困っている人の参考になれば嬉しいです。