「子テーマのCSSを書き換えたのに、サイトの見た目がまったく変わらない…」WordPressを触り始めると、多くの人が一度はこの壁にぶつかります。
でも安心してください。この「反映されない」問題は、原因のほとんどが決まったパターンに当てはまります。つまり、上から順にチェックしていけば、ほとんどは自力で解決できるということです。
この記事では、初心者がまず確認すべきポイントを原因別のチェックリスト形式でまとめました。コードに詳しくなくても大丈夫。一緒に順番に見ていきましょう。
焦ってコードを何度も書き直す前に、まずは原因の切り分けから。実はコードが正しくても「反映されない」ことはよくあるんです。
結論｜WordPress子テーマが反映されない原因の9割はこの3つ
WordPressで子テーマが反映されない原因は、多くの場合「キャッシュ」「CSSの読み込み順」「編集場所のミス」です。まずはこの3つを確認しましょう。
反映されない原因 トップ3
① キャッシュが残っている（一番多い）
② CSSの読み込み順が間違っている
③ 編集している場所が違う
① キャッシュが残っている
変更はちゃんと保存されているのに、ブラウザやサーバーが古い状態を記憶（キャッシュ）していて、新しい表示が出てこないパターンです。実は反映トラブルの大半がこれです。
② CSSの読み込み順が間違っている
子テーマのCSSより親テーマのCSSが後に読み込まれていると、せっかくの記述が上書きされてしまいます。読み込み順は反映可否を左右する重要ポイントです。
③ 編集している場所が違う
「追加CSS」と「style.css」、固定ページと投稿ページ——そもそも編集している場所が表示箇所と違うという、意外と多い勘違いです。
まず最初に確認すべきこと【5分でできる】
本格的に原因を探す前に、まずは簡単な確認だけで直るケースがかなり多いです。難しい作業は不要なので、まずここから試してみてください。
ブラウザキャッシュを削除する
一番手軽で効果的なのがスーパーリロード（キャッシュを無視した再読み込み）です。下のショートカットを押すだけでOK。
| 環境 | ショートカット |
|---|---|
| Windows（Chrome等） | Ctrl + F5 または Ctrl + Shift + R |
| Mac（Chrome等） | Command + Shift + R |
これで直れば、原因はブラウザキャッシュで確定です。
スマホとPC両方で確認する
PCでは変わっていなくても、スマホで見ると反映されていることがあります。これはPC側にキャッシュが残っているサインです。逆に「自分のPCだけ変」なら、ほぼキャッシュが原因です。
ログアウト状態で確認する
WordPressにログインした状態だと、管理バーや独自のキャッシュ設定の影響で表示が変わることがあります。シークレットウィンドウ（プライベートモード）で開き、ログアウトに近い状態で確認してみましょう。
原因① キャッシュが残っている【一番多い】
WordPressの表示トラブルで最も多いのがキャッシュです。心当たりがある人は、ここを重点的にチェックしてください。
キャッシュプラグインを確認する
高速化のために入れているキャッシュ系プラグインが、古い表示を保存し続けていることがあります。設定画面から「キャッシュを削除（クリア）」を実行してみましょう。
- WP Super Cache
- W3 Total Cache
- LiteSpeed Cache
- WP Fastest Cache / Autoptimize など
Cocoonを使っている場合は、「Cocoon設定 → キャッシュ削除」タブからもキャッシュを消せます。
サーバー側キャッシュを確認する
プラグインだけでなく、レンタルサーバー自体がキャッシュ機能を持っていることがあります。サーバーの管理パネルから「キャッシュ設定」や「コンテンツキャッシュ」をオフ、または手動でクリアしてみましょう。
たとえばエックスサーバーには「Xアクセラレータ」というキャッシュ機能があり、これが原因で反映が遅れるケースもあります。サーバー選びで迷っている人はエックスサーバークイックスタートのデメリット5選も参考にどうぞ。
レンタルサーバー エックスサーバー
CDN（Cloudflareなど）の影響を確認する
CloudflareなどのCDNを使っている場合、世界中のサーバーに古いデータがコピーされて配信されていることがあります。Cloudflareの管理画面から「Purge Cache（キャッシュの全削除）」を実行しましょう。
キャッシュかどうか一瞬で見抜く方法
シークレットウィンドウや別のブラウザ（スマホ含む）で開いて、そこで正しく表示されていれば、原因は100%キャッシュです。
キャッシュ判定の早ワザ
シークレットモードで見て→直っていればキャッシュ確定／変わらなければ別の原因
原因② CSSが正しく反映されていない
CSSがそもそも読み込まれていないなら、どれだけ編集しても表示は変わりません。「書いた場所」と「読み込み」を確認します。
style.cssを編集している場合の注意点
子テーマのstyle.cssを編集する場合、ファイル先頭のテーマヘッダー（コメント部分）が壊れていると、子テーマ自体が正しく認識されません。また、子テーマでCSSを読み込む記述が抜けていると反映されないことがあります。
「追加CSS」に書いたのに反映されない場合
Cocoonには「外観 → カスタマイズ → 追加CSS」や「Cocoon設定」内のCSS入力欄があります。書く欄を間違えていると当然反映されません。どこに書くか迷ったら、初心者はまず追加CSS欄が安全です。
Cocoonの基本設定をまだ済ませていない人は、先にCocoonの初期設定はこれだけ｜ブログ開設後に最低限やることを確認しておくと、つまずきを減らせます。
CSSが読み込まれているか確認する方法
検証ツール（デベロッパーツール）を開き、body { background: red; }のような絶対に見た目が変わるテストCSSを一時的に書いてみましょう。背景が赤くなれば「読み込みはできている＝指定ミス」、変わらなければ「そもそも読み込まれていない」と切り分けできます。
原因③ CSSの指定ミス・優先順位の問題
CSSが読み込まれていても、指定ミスや優先順位で反映されないことがあります。ここはコードの中身を見ていきます。
クラス名・ID指定ミス
狙った要素のクラス名やIDが1文字でも違うと、CSSはまったく効きません。検証ツールで実際の要素を右クリックし、正しいクラス名をコピーして使うのが確実です。
CSSが上書きされている
同じ要素に対して、より詳細度（specificity）の高い別のCSSが当たっていると、そちらが優先されて自分の記述が負けます。検証ツールで対象要素を選ぶと、打ち消し線で「負けているCSS」が分かります。
!important を使う場面
どうしても優先させたいときの最終手段が!importantです。ただし乱用すると後で管理が大変になるので、本当に必要なときだけ使いましょう。
例：.entry-content p { color: #333 !important; }
効いていないCSSを見つける方法
検証ツールの「Styles」パネルで、対象要素に当たっているCSSが一覧表示されます。打ち消し線が引かれているプロパティが「他に負けて効いていないCSS」です。ここを見れば原因が一目で分かります。
原因④ 編集している場所が違うケース
実はコードではなく「編集場所の勘違い」もかなり多いです。正しく書いても、表示している場所が違えば変わりません。
固定ページと投稿ページを間違えている
編集していたのが投稿なのに、確認していたのが固定ページだった——という取り違えです。URLとタイトルが一致しているか確認しましょう。
トップページ設定が違う
「設定 → 表示設定」で、トップページが最新の投稿か固定ページかが決まります。ここの設定を勘違いしていると、編集したページがトップに出てこないことがあります。
テーマ側設定で上書きされている
「外観 → カスタマイズ」やCocoon設定での指定が、ページ個別の設定より優先されることがあります。色やレイアウトが変わらないときは、テーマ側の設定も疑いましょう。
ブロックエディタとテーマブロックの違い
通常のブロックと、Cocoon独自のブロックでは、当たるCSSが違うことがあります。独自ブロックはデザインが固定されている場合もあるので、ブロックの種類も確認しておきましょう。
原因⑤ 画像だけ反映されない場合のチェックポイント
CSSではなく画像だけ変わらない場合は、別の原因が考えられます。
同じファイル名で上書きしている
同名ファイルで差し替えると、ブラウザが古い画像をキャッシュして表示し続けることがあります。ファイル名を変える、もしくはスーパーリロードで解決することが多いです。
別サイズ画像が表示されている
WordPressは1枚の画像から複数サイズを自動生成します。表示場所によって別サイズが使われ、差し替えたサイズと違うことがあります。
画像キャッシュが残っている
CDNやキャッシュプラグインは画像も個別にキャッシュします。画像専用のキャッシュクリアも忘れず実行しましょう。
それでも直らないときの最終チェックリスト
ここまで試しても直らない場合は、環境側に問題がある可能性があります。次のリストを上から確認してみてください。
ブラウザ拡張機能
広告ブロックやCSS変更系の拡張機能が表示に干渉することがあります。一度拡張機能をオフにして確認しましょう。
JavaScriptエラー
検証ツールの「Console」に赤いエラーが出ていると、JSが途中で止まり、見た目に影響することがあります。
無料サーバー環境の問題
無料サーバーは独自の制限や強制キャッシュで、反映が不安定なことがあります。本格運用なら、安定した有料サーバーへの移行も選択肢です（エックスサーバーで10分開設した全手順）。
本番環境以外で試す
どうしても切り分けできないときは、別の固定ページや下書きで同じCSSを試し、環境依存かコード依存かを確認します。
最終チェックリスト
☐ 拡張機能をオフにした
☐ Consoleにエラーが無いか見た
☐ サーバー/CDNのキャッシュを消した
☐ 別ページ・別ブラウザで再現を確認した
そもそもWordPressの子テーマとは？
ここまで読んで「そもそも子テーマって何？」という人向けに、基本もおさえておきましょう。子テーマとは、親テーマを壊さず安全にカスタマイズするためのテーマです。
親テーマと子テーマの違い
| 項目 | 親テーマ | 子テーマ |
|---|---|---|
| 役割 | テーマ本体（デザイン・機能の全体） | カスタマイズ専用 |
| ファイル | 完全なテンプレート一式 | style.cssなど最小限 |
| 更新時 | アップデートされる | カスタマイズが保持される |
| 有効化 | 基本は無効のまま | こちらを有効化して使う |
子テーマを使うメリット
子テーマを使うデメリット
Cocoonは公式が子テーマを配布しているので、初心者でも導入は簡単。カスタマイズするなら、最初から子テーマを有効化しておくのがおすすめです。
まとめ｜WordPress子テーマが反映されないときは順番に確認すれば解決できる
WordPressで反映されない原因の多くは、コードのミスではなくキャッシュや設定ミスです。慌てず、順番に確認していけば、ほとんどは自力で解決できます。
まずはこの順で確認
① スーパーリロード（Ctrl+F5）
② キャッシュプラグイン／サーバー／CDNのキャッシュ削除
③ CSSの読み込み・指定・優先順位
④ 編集場所の取り違いがないか
これから本格的にカスタマイズを進めるなら、土台づくりも大切です。あわせてWordPress初期設定でやることまとめとCocoonの初期設定はこれだけも読んでおくと、つまずきをぐっと減らせます。
「変わらない！」と焦ったら、まずスーパーリロード。これだけで解決することが本当に多いですよ。
よくある質問（FAQ）
- Q子テーマを有効化したのに反映されません。なぜですか？
- A
多くはキャッシュが原因です。まずスーパーリロード（Windows: Ctrl+F5 / Mac: Command+Shift+R）を試し、それでも変わらなければキャッシュプラグイン・サーバー・CDNのキャッシュを順に削除してください。
- Q追加CSSとstyle.css、どちらに書けばいいですか？
- A
初心者はまず「追加CSS（カスタマイズ画面）」が安全です。テーマ更新の影響を受けにくく、書く場所も分かりやすいためです。本格的に管理したくなったら子テーマのstyle.cssへ移していきましょう。
- Q!importantは使っても大丈夫ですか？
- A
最終手段としてなら問題ありません。ただし多用すると後から上書き・管理が難しくなるので、まずはクラス指定や詳細度の調整で対応し、どうしても効かないときだけ使うのがおすすめです。
コメント