WordPressの追加CSSが反映されないとき｜保存・読み込み・適用を分ける確認手順

WordPressで文字の色や余白を変更したのに公開ページが変わらないときは、「保存したCSS」「公開ページが取得したCSS」「対象の要素に採用された値」を分けて確認します。何も変わらないという見た目だけでは、キャッシュが原因か、指定が別の要素を向いているか、ほかのルールに上書きされているかを判断できません。

この記事は、WordPressを更新する企業の担当者と、修正を引き継ぐ制作会社の実装担当に向けた調査手順です。自分で確認できる保存先と公開URLを整理し、技術担当へ渡す証拠を残せます。すべてのプラグインを停止したり、既存CSSを消したりする前に、一つの変更を追ってください。

1. 変えたい場所と、見ているページを揃える

対象URL、変えたい箇所、期待する色や余白、実際の表示、保存した日時を記録します。トップと詳細ページ、テスト環境と本番、ログイン中と一般公開では、表示条件が違う場合があります。同じ名前のページを見ていることだけで一致とはしません。

一つの変更に絞って再現する

たとえば「サービス詳細の見出しだけ色を変えたいが、管理画面では変わり、公開ページでは変わらない」と書けば、ページと要素を追えます。これは想定例で、Acquaの障害事例ではありません。複数の設定やプラグインを同時に変えると、どの変更で表示が変わったか分からなくなります。

修正前のCSSと設定、影響するページ、戻す方法を保存します。フォームや共通メニューへ影響する変更なら、作業中の更新や試験方法も担当者と揃えます。表示を直すために本番のテーマを切り替える操作は、原因確認とは分けて判断してください。

2. 追加CSSを保存した場所を確認する

クラシックテーマのカスタマイザーと、ブロックテーマのサイトエディターは同じ画面ではありません。使用中のテーマ、WordPressの版、権限、追加機能を確認し、どの編集欄へ保存したかを記録します。テーマ独自の設定やページビルダーにCSS欄がある場合も、標準の追加CSSと混同しません。

WordPressのカスタマイザーの説明とスタイルの説明を参照できます。ブロックテーマのスタイルにはサイト全体とブロック種類別のCSSがあります。特定の一個のブロックだけを変更したつもりでも、同じ種類のブロック全体へ作用する設定かもしれません。

プレビューで変わったことと、保存して一般公開へ反映したことは別です。保存後に編集欄を開き直し、入力した内容が残っているかを見ます。画面の名称や配置は版とテーマで異なるため、見当たらない機能を無理に別の欄へ貼り付けず、使用環境を確認します。

3. 公開ページに指定が届いているかを調べる

実装担当は公開ページを開き、対象の要素と、そのページが読み込むCSSを調べます。管理画面に新しい内容が残っていても、公開側のHTMLやCSSが古い場合、指定を強くする修正では解決しません。外部CSS、ページ内のstyle、テーマや追加機能が生成するCSSを区別します。

取得できたことと、内容が新しいことを分ける

NetworkでCSSの応答を確認するときは、URL、状態、返された内容、確認日時を残します。HTTP200という状態だけで、新しい指定が含まれると判断しないでください。ファイル名が似ていても別の環境や生成ファイルかもしれません。見ているページがどのCSSを取得したかを起点にします。

ページ内の追加CSSは、外部ファイルとしてNetworkに現れるとは限りません。見つからない場合は、公開HTMLとElements側の指定を合わせて調べます。ChromeのCSS検査資料では、要素のStylesとComputedを使い、ルールと実際の値を確認する方法が説明されています。

4. 届いたCSSが対象の要素へ適用されているかを見る

CSSが新しいのに表示が変わらない場合は、対象要素が指定と一致するか、値が有効か、画面幅などの条件が成立するか、ほかの指定が採用されるかを調べます。本文の文字ではなく親の枠に色を付けていた、といった対象の違いもあります。ルールが見えることと、期待する値が使われることは別です。

MDNの詳細度の解説では、優先順位は詳細度だけで決まるわけではないことが説明されています。重要度やレイヤーなどの関係もあるため、「後ろへ書けば必ず勝つ」「!importantを足せばすべて直る」と一律に処理しません。採用されている値と出典を見て修正します。

5. キャッシュとCSSの競合を別々に扱う

古いCSSが返っている場合には、ブラウザー、サーバー、CDN、最適化機能などの保存場所を確認します。新しいCSSが届いて競合している場合に、すべてのキャッシュを消しても、競合の指定自体は残ります。消去ボタンを押したことを修正完了にしないようにします。

診断用の閲覧と通常の閲覧を分ける

別のブラウザーや新しい閲覧状態で比較できますが、共有の配信キャッシュまで無効になるとは限りません。ブラウザー側の一時的なキャッシュ無効化も、通常の利用者への配信を保証しません。HTTPキャッシュの解説を参考に、対象の応答と配信構成を照合します。

必要な消去や再生成は、対象と影響を確認して限定します。毎回違うURLを付ける、キャッシュを恒久的にすべて無効にする、最適化機能を無差別に停止する方法を標準にしません。必要な処理が分からない場合は、観察した値とURLを担当者へ渡してください。

6. 修正は一か所ずつ、保存先と差分を残す

原因が分かったら、対象の保存先で必要な指定だけ修正します。全見出しへ効く指定が必要か、特定ページだけかを分けます。広い範囲への上書きを重ねると、別のページや後日の更新が崩れる場合があります。既存指定を削る場合も、利用箇所と戻し方を先に確認します。

ブラウザーの開発者ツールで値を変えて改善しても、それは試験した閲覧状態での確認です。WordPressやテーマの正本へ保存されたとは限りません。採用した修正を正しい保存先へ反映し、ページを開き直して確認します。親テーマのファイルを直接直すことも、更新後の保持とは別に検討が必要です。

変更の保存場所を引き継ぐ場合は、子テーマと変更の保持へ進めます。本記事はCSSが届き、採用されるまでの診断を扱い、子テーマの更新手順そのものを重複しません。

7. PC・スマホ・操作状態で意図した表示を読み戻す

修正した公開URLで、PCとスマホ、変更が切り替わる幅の前後を確認します。見出しの色や余白だけでなく、文字の折り返し、横はみ出し、メニューやフォーム、同じ指定が使われる別ページを見ます。縮めたブラウザーと実機の確認は条件を分けて記録してください。

完了条件は保存成功より先に決める

「対象の見出しが指定の色になり、他ページの見出しは保持される」「スマホでもボタンが押せる」など、読者が使える状態を条件にします。確認URL、幅、操作、採用値、残課題を残せば、制作会社と同じ結果を見て判断できます。開発者ツールの一時変更だけで納品完了にはしません。

画像が旧版のままという問題は画像差し替えの確認で参照先やサイズ別画像を調べます。表示速度が目的なら表示速度の改善へ切り分けます。CSSの色を直したことを、速度・検索・問い合わせの成果として数えません。

8. Acquaへ調査を依頼するときの材料と完成状態

企業向けWeb運用へは、対象URL、変えたい場所、期待した表示、保存した欄と日時、試した条件を伝えられます。技術担当がいない場合は原因を決めつけず、公開画面で起きることから相談してください。パスワードを最初の問い合わせ本文へ書かないようにします。

制作会社向け実装支援へは、支給仕様、テーマと追加機能、読み込まれたCSS、採用される指定、変更可能な範囲、検収と公開担当を共有します。調査、限定修正、公開確認、更新時の引き継ぎを分けて対応範囲を確認します。すべてのテーマや配信サービスへの操作を一律に約束しません。

支援後は、意図した見た目と操作が公開で確認でき、次の担当者が保存先と差分、影響範囲、戻し方を説明できる状態を目指します。相談窓口では困る画面と必要な完成状態を分かる範囲で記入してください。料金と権限・作業範囲は現状を確認して決めます。