WordPressでスマホだけ表示が崩れる原因7選

こんにちは、Dr.WordPressです。

パソコンでは問題なく表示されているのに、スマホでサイトを確認すると、

「文字が画面からはみ出している」

「画像だけ大きく表示される」

「横スクロールが発生している」

「レイアウトがぐちゃぐちゃになっている」

といったトラブルが起こることがあります。

WordPressでスマホだけ表示が崩れる場合、WordPress本体ではなくCSSや画像、プラグインなどが原因になっているケースも多くあります。

今回は、WordPressでスマホだけ表示が崩れるときに確認したい7つの原因をご紹介します。

① CSSのレスポンシブ設定を確認する

まず確認したいのがCSSです。

現在のWebサイトでは、画面サイズに合わせてレイアウトを変更する「レスポンシブ対応」が一般的です。

例えば、

・PC用の横幅がそのまま指定されている

・スマホ用のCSSが設定されていない

・メディアクエリの指定が間違っている

・スマホ用CSSが別のCSSに上書きされている

などが原因で表示が崩れることがあります。

特にサイトをカスタマイズしたあとから崩れた場合は、追加したCSSを確認してみましょう。

② 画像や動画のサイズを確認する

画像や動画に固定の横幅が設定されていると、スマホの画面からはみ出すことがあります。

例えば、

width: 1000px;

のように大きな横幅が固定されているケースです。

PCでは問題なくても、画面幅の小さいスマホでは表示しきれず、横スクロールが発生する原因になります。

画像だけでなく、

・YouTube動画

・Googleマップ

・iframe

・バナー

なども確認してみましょう。

③ 長い文字やURLがはみ出していないか確認する

意外と見落としやすいのが、文章やURLです。

通常の文章であれば画面幅に合わせて折り返されますが、

・長いURL

・英数字の連続した文字

・メールアドレス

・長いファイル名

などは、うまく改行されず画面からはみ出す場合があります。

「サイト全体が少し横にスクロールできる」という場合は、特定の文字列が原因になっていないか確認してみましょう。

④ プラグインの表示を確認する

WordPressのプラグインによって追加されたパーツが、スマホ表示に対応していない場合があります。

例えば、

・お問い合わせフォーム

・表やテーブル

・スライダー

・SNS表示

・予約フォーム

・ポップアップ

などです。

「プラグインを追加したあとからスマホだけ崩れた」という場合は、そのプラグインが影響している可能性があります。

一度プラグインを停止するなどして、表示が変わるか確認してみましょう。

⑤ テーマや追加CSSを確認する

WordPressテーマ自体はスマホ対応していても、あとから追加したカスタマイズによって表示が崩れる場合があります。

特に、

・追加CSS

・子テーマ

・functions.php

・独自で追加したHTML

・ページビルダーの設定

などを変更している場合は注意が必要です。

「テーマを入れた直後は正常だったのに、カスタマイズしてから崩れた」

という場合は、直前に変更した部分を確認してみましょう。

⑥ キャッシュが残っていないか確認する

CSSを修正したのにスマホだけ表示が変わらない場合は、キャッシュが影響していることがあります。

例えば、

・WordPressのキャッシュプラグイン

・レンタルサーバーのキャッシュ

・ブラウザのキャッシュ

・CDNのキャッシュ

などです。

実際には修正できていても、古いCSSが読み込まれていることで「直っていないように見える」場合があります。

キャッシュを削除したり、別のブラウザやシークレットモードで確認したりしてみましょう。

⑦ 特定のスマホ・ブラウザだけ崩れていないか確認する

「スマホで崩れる」と思っていても、実際には特定の端末やブラウザだけで問題が発生している場合があります。

例えば、

・iPhoneのSafariだけ崩れる

・AndroidのChromeだけ崩れる

・古いスマートフォンだけ崩れる

といったケースです。

可能であれば、

iPhone・Android・複数のブラウザ

などで確認してみましょう。

PCのブラウザにある開発者ツールを使って、スマホサイズで表示を確認する方法もあります。

「スマホだけ崩れる」ときは横スクロールもチェック

スマホ表示のトラブルで特に多いのが、

横スクロールが発生しているケース

です。

サイトをスマホで開いて、左右に少し動かせる場合は、何かの要素が画面幅より大きくなっている可能性があります。

原因としては、

・固定幅の画像

・大きなテーブル

・長いURL

・iframe

・CSSのwidth指定

・余白の設定

などが考えられます。

どの要素が画面からはみ出しているのかを確認すると、原因を見つけやすくなります。

まとめ

WordPressでスマホだけ表示が崩れる場合は、

①CSSのレスポンシブ設定

②画像・動画のサイズ

③長い文字やURL

④プラグイン

⑤テーマ・追加CSS

⑥キャッシュ

⑦端末・ブラウザ

などを確認してみましょう。

「PCでは正常なのにスマホだけ崩れている」

「横スクロールが発生している」

「CSSを修正しても直らない」

という場合は、Dr.WordPressでWordPressの表示崩れに関するご相談も受け付けています。

実際のサイトを確認し、どの部分が原因になっているのかを調査しながら、できるだけ分かりやすく解決方法をご案内します。

相談だけでもお気軽にどうぞ。