発生条件を分ける
ページ、端末、ブラウザー、ログイン状態、画面幅で違いがあるか確認します。スクリーンショットとURL、更新対象・版を記録します。管理者だけ正常なら、未ログイン向けキャッシュの影響も疑います。
読み込み失敗を確認する
開発者ツールでCSS・JSの404やCSP違反、JavaScriptエラーを確認します。ファイルの更新日時やURLを照合し、ブラウザー、プラグイン、サーバー、CDNのキャッシュを区別します。全層を無計画に消すと一時的に負荷が増える場合があります。
テーマと製品の変更を調べる
変更履歴、子テーマの上書き、最適化機能、CSS結合・遅延読込みを検証環境で確認します。HTMLのクラス名やブロック構造が変わった場合は、旧構造を前提とした独自CSSを修正します。
修正後に確認すること
代表ページだけでなくナビ、フォーム、長い見出し、画像、PC・スマートフォンを確認します。暫定CSSを残すなら適用理由と撤去条件を記録し、上書きの積み重ねで別の崩れを増やさないようにします。
古い資産と新しいHTMLの組合せを調べる
HTMLは新しくCSSだけ古い場合、存在しないクラスや異なる構造に旧スタイルが適用されます。更新されたファイルのURL、版の付け方、CDNのキャッシュキーを確認します。管理者だけキャッシュを通らない構成では、未ログインでの確認が欠かせません。
最適化機能を切り分ける
CSS・JSの結合、圧縮、遅延実行を検証先で個別に確認します。全て停止して直った場合も、どの処理が必要な実行順を変えたかを調べます。原因に合う除外設定と、性能への影響を比較します。
よくある質問
CSSの!importantを増やして直してよいですか？
一時的に見えても別ページへ影響する場合があります。HTMLと既存ルールの変更を確認し、適切な責務と範囲で修正します。
PCだけ確認すればよいですか？
画面幅、メニュー、長い表、フォームで挙動が違うため、スマートフォンと主要な利用環境も確認します。