表示が崩れると、焦りますよね。
でも多くの場合「あなたの操作ミス」ではなく、テーマ(見た目の土台)やプラグイン(追加機能)の相性・更新の影響で起きます。
今日は、原因を最短で絞る“切り分け手順”を、初心者向けにまとめます。
まず最初に:触る前の準備(3分)
・崩れているURLを控える(トップ/下層どこ?)
・崩れ方をメモ(横並び→縦積み、文字がはみ出す、ボタンが押せない等)
・スクショを撮る(PC/スマホ両方あると強い)
この3つがあるだけで、後の対応が一気にラクになります。
切り分けの大原則
「キャッシュ・最適化」→「プラグイン」→「テーマ」の順で疑うと迷いません。
いきなり全部を触らず、順番に“可能性の高いもの”から消していくイメージです。
Step1:キャッシュを消す
・ブラウザの更新(再読み込み)
・キャッシュ系プラグインのキャッシュ削除
・サーバーキャッシュ/CDNを使っているなら削除
表示崩れは、古いCSS(デザインの指示書)が残って起きることがよくあります。
Step2:プラグインが原因かを確認
できれば「テスト環境(ステージング)」で行うのが安心です。
本番でやる場合は、作業前にバックアップを取ってください。
手順はシンプルです。
1.まず“重そうな系”だけ停止(キャッシュ/最適化、圧縮、画像遅延、エディタ拡張)
2.直ったら、その中に原因がいます
3.1個ずつONに戻して、崩れた瞬間のプラグインを特定
直らなければ、次のグループ(フォーム、スライダー、翻訳、セキュリティ等)へ進みます。
よくある犯人は「CSS/JSの圧縮・結合」「遅延読み込み」です。
特定できたら、そのプラグインの“最適化設定”を弱める(CSS結合OFFなど)と直ることがあります。
Step3:テーマが原因かを確認
プラグインを全部止めても直らない場合、テーマ側の可能性が上がります。
テスト環境で、テーマを一時的にデフォルト(Twenty Twenty系)に切り替えてみてください。
それで直るなら、原因は「テーマのCSS」か「子テーマの追加CSS」にあることが多いです。
【チェックポイント】
・子テーマのcustom.css / 追加CSSに最近触っていないか
・テーマ/ビルダーのアップデート直後から崩れていないか
・特定ページだけなら、固定ページテンプレートやブロック設定が原因かも
最後:原因が絞れたら、次にやること
・プラグイン原因:設定を見直す/代替プラグインを検討/開発元に問い合わせ
・テーマ原因:追加CSSを一時OFF→どこで崩れるか確認/子テーマ差分を見直す
そして、作業を誰かに頼む場合は、次のテンプレで渡すと一発で伝わります。
【共有テンプレ】
URL:
いつから:
崩れ方:
PC/スマホ/ブラウザ:
直る条件(あれば):
直らない条件:
直った/崩れた操作(プラグイン名・設定):
スクショ:
表示崩れは“原因さえ特定できれば”半分勝ちです。
今日やるなら、まずは「キャッシュ削除→重い系プラグイン停止」だけでOK。焦らずいきましょう。