WordPressの表示崩れ｜よくある5パターンと自分でできる直し方【現役エンジニア解説】

「昨日まで普通だったのに、急にレイアウトが崩れた」——WordPressでよくあるトラブルです。現役エンジニアとして修正依頼を多く見てきた経験から、発生頻度の高い5パターンと、自分で試せる対処をまとめました。

①テーマ／プラグイン更新の直後に崩れた

最も多い原因です。更新でCSSや仕様が変わり、既存のカスタマイズと衝突します。まず「どの更新の後か」を切り分け、疑わしいプラグインを一つずつ停止して原因を特定します。

②スマホだけ崩れる（PCは正常）

レスポンシブ指定の抜けが原因です。ブラウザの検証ツールではみ出す要素を特定し、widthをmax-width:100%に、固定pxを%やremに置き換えると直ることが多いです。

③余白・文字サイズが意図と違う

CSSの優先度（詳細度）の問題です。テーマ標準CSSが自分の指定を上書きしています。追加CSSで対象を具体的に指定しましょう。!importantの乱用は後の崩れの元になるため、セレクタを的確に書くのが安全です。

④画像がはみ出す・粗い

サイズ指定漏れと巨大画像が原因です。max-width:100%; height:auto; を基本に。表示と同時にページも重くなるので、リサイズやWebP化がおすすめです。

⑤直したはずが反映されない

キャッシュ（プラグイン・サーバー・ブラウザ）が古い表示を保持しています。キャッシュクリアとスーパーリロードで確認してから判断しましょう。

■それでも直らない・触るのが不安なときは

表示崩れは「原因の切り分け」が9割です。バックアップを取ってから作業するのが鉄則ですが、本番サイトで手が止まる場合はご相談ください。出品サービス「ホームページ・LPの修正・更新を代行します（3,000円〜）」で、崩れの原因調査から修正までWordPress対応で承ります。

▶ サービスはこちら： https://coconala.com/services/4329729