WordPressの表示がスマホだけ崩れる原因と直し方

WordPressの表示がスマホだけ崩れる原因と直し方

PCで見ると問題ないのに、スマホで見るとレイアウトが崩れている——このような「スマホだけ表示がおかしい」というご相談は非常に多いです。原因はいくつかのパターンに絞られるため、順番に確認していけば意外とすぐに直せることが多いです。

原因①：レスポンシブ対応が不十分なカスタムCSS

テーマやプラグインを導入した後に追加したカスタムCSSに、スマホ表示用の「メディアクエリ」が設定されていないケースです。PC表示を基準に書かれたCSSがそのままスマホにも適用され、要素がはみ出したり重なったりします。

直し方：ブラウザの開発者ツール（Chromeなら右クリック→検証→デバイスツールバー）でスマホ表示を再現しながら、崩れている箇所のCSSを特定し、画面幅が768px以下のときだけ適用されるスマホ用の表示条件を追加・調整します。

原因②：画像に固定の幅（px指定）が入っている

画像のサイズが600pxのように固定値で指定されていると、スマホの画面幅を超えてはみ出してしまいます。

直し方：画像の幅を「最大100%・高さは自動」で表示されるように指定すると、画面幅に応じて自動的に縮小されるようになります。

原因③：キャッシュプラグインの影響

CSSの修正を反映したはずなのにスマホでは変わらない、という場合はキャッシュが原因のことがあります。キャッシュプラグインの設定画面から「すべてのキャッシュを削除」を実行し、スマホ側もブラウザのキャッシュをクリアして再確認してください。

原因④：テーマとプラグインの競合

スライダーやフォームなど、JavaScriptを使うプラグインがテーマ側のスマホ用スクリプトと競合し、スマホでのみ表示が崩れることもあります。この場合は原因の切り分けに専門的な確認が必要になることが多いです。

まとめ

スマホ表示の崩れは、開発者ツールで再現しながら一つずつ潰していけば直せることが多いですが、原因が複合している場合は特定に時間がかかることもあります。

WordPressの不具合修正を8件、すべて評価5.0で対応してきました。「スマホで見るとここが変」という具体的な症状（できればスクリーンショット）を教えていただければ、最短スピードでお調べします。