WordPressで横スクロールが出る原因7選｜スマホ表示が崩れるときの確認方法

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

WordPressサイトをスマホで確認したときに、

「なぜか左右にスクロールできる」

「画面の右側に余白ができている」

「一部の画像や文字が画面からはみ出している」

といったことはありませんか？

PCでは正常に表示されているため、スマホで確認するまで気づかないこともあります。

WordPressで横スクロールが発生する場合、サイト全体ではなく、特定の要素がスマホの画面幅より大きくなっていることがよくあります。

今回は、WordPressで横スクロールが出るときに考えられる7つの原因と確認方法をご紹介します。

① 画像の横幅が大きくなっている

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

記事やページ内に設置した画像の横幅がスマホ画面より大きくなっていると、画像に合わせてページ全体が横に広がる場合があります。

例えば、

・画像に固定の横幅が設定されている

・追加したバナーがスマホ対応していない

・テーマのCSSが画像に適用されていない

・独自に追加した画像だけサイズがおかしい

といったケースです。

「特定のページだけ横スクロールが出る」という場合は、そのページに追加されている画像を確認してみましょう。

② 固定幅の要素が入っている

画像以外でも、横幅が固定された要素が原因になることがあります。

例えば、

・ボタン

・フォーム

・ボックス

・広告

・独自に追加したHTML

などです。

PCでは問題なく表示できる横幅でも、スマホでは画面に収まらないことがあります。

特に自分でCSSを追加している場合は、横幅を固定していないか確認してみましょう。

③ 表やテーブルがはみ出している

記事内に表を設置している場合も注意が必要です。

表は内容によって横幅が大きくなりやすく、スマホ画面に収まらない場合があります。

特に、

・項目数が多い表

・長い文章が入っている表

・横幅を固定している表

・料金表や比較表

などは横スクロールの原因になりやすいポイントです。

「表を追加したページだけ横スクロールが出る」という場合は、テーブル周辺の設定を確認してみましょう。

④ 長いURLや文字列がはみ出している

意外と見落としやすいのが、長い文字列です。

通常の日本語文章は画面幅に合わせて改行されますが、

・長いURL

・メールアドレス

・英数字が連続した文字

・ファイル名

などは、途中でうまく折り返されない場合があります。

その結果、ひとつの文字列がスマホ画面より横に広がり、ページ全体に横スクロールが発生することがあります。

記事を追加したあとから横スクロールが出た場合は、長いURLなどが入っていないか確認してみましょう。

⑤ YouTubeやGoogleマップなどの埋め込みが原因

WordPressでは、外部サービスをページ内に埋め込むことがあります。

例えば、

・YouTube

・Googleマップ

・SNS投稿

・外部フォーム

・iframe

などです。

こうした埋め込みコンテンツの横幅が固定されていると、スマホ画面からはみ出す場合があります。

「動画を追加してから横スクロールが出た」

「Googleマップを設置したページだけおかしい」

という場合は、埋め込み部分を確認してみましょう。

⑥ CSSの余白や位置指定が原因になっている

CSSの設定によって、要素が画面の外側へはみ出しているケースもあります。

特に、

・大きな左右の余白

・要素を左右へ移動する設定

・絶対配置

・横幅と余白を組み合わせた指定

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

見た目では少ししかズレていなくても、その要素が画面幅を超えることで横スクロールが発生することがあります。

「CSSを変更したあとから横スクロールが出た」という場合は、直前に変更した部分を確認してみましょう。

⑦ プラグインやテーマが影響している

自分でCSSを変更していなくても、テーマやプラグインによって横スクロールが発生する場合があります。

例えば、

・スライダー

・お問い合わせフォーム

・ポップアップ

・SNS表示

・ページビルダー

などです。

プラグインの更新などによってCSSが変わり、突然スマホ表示が崩れるケースもあります。

「昨日までは正常だった」

「プラグインを更新したあとから横スクロールが出る」

という場合は、直前に更新されたテーマやプラグインがないか確認してみましょう。

横スクロールの原因は「少しだけはみ出している要素」かも

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

「サイト全体のCSSがおかしいのでは？」

と思ってしまうかもしれません。

しかし実際には、

ひとつの要素が数ピクセルだけ画面からはみ出している

というケースもあります。

例えば、

・画像

・ボタン

・表

・フォーム

・長いURL

・埋め込みコンテンツ

などです。

まずは、どのページで横スクロールが発生しているのかを確認してみましょう。

すべてのページで発生しているのか、特定のページだけなのかによって原因を絞り込みやすくなります。

スマホで横スクロールが出るときの確認順序

原因が分からない場合は、次の順番で確認してみましょう。

STEP 1

横スクロールが出るページを確認する

STEP 2

画像やバナーがはみ出していないか確認する

STEP 3

表や長いURLを確認する

STEP 4

YouTubeやGoogleマップなどの埋め込みを確認する

STEP 5

直前に追加したコンテンツを確認する

STEP 6

CSSを変更していないか確認する

STEP 7

テーマやプラグインの更新状況を確認する

重要なのは、

横スクロール自体を無理に隠すのではなく、何がはみ出しているのかを確認すること

です。

横スクロールを非表示にするだけでは、原因となっている要素が途中で切れてしまう場合があります。

まずは、はみ出している要素を特定してから修正してみましょう。

PCでは正常なのにスマホだけ崩れる場合は？

PCでは問題なく、スマホだけ横スクロールが出る場合は、

スマホの画面幅に対応できていない要素がある可能性

があります。

特に、

・固定幅

・スマホ用CSS

・レスポンシブ設定

・メディアクエリ

などを確認したいところです。

また、iPhoneでは崩れるけれどAndroidでは正常など、特定の端末やブラウザだけで発生する場合もあります。

可能であれば複数の端末やブラウザでも確認してみましょう。

まとめ

WordPressで横スクロールが出る場合は、

① 画像の横幅

② 固定幅の要素

③ 表やテーブル

④ 長いURLや文字列

⑤ YouTubeやGoogleマップなどの埋め込み

⑥ CSSの余白や位置指定

⑦ プラグインやテーマ

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

特に、

「PCでは正常なのにスマホだけ横スクロールが出る」

「右側に謎の余白ができる」

「どの要素がはみ出しているのか分からない」

という場合は、ひとつの要素がスマホの画面幅を超えている可能性があります。

Dr.WordPressでも、WordPressのスマホ表示やレイアウト崩れに関するご相談を受け付けています。

実際のサイトを確認し、どの要素が横スクロールの原因になっているのかを切り分け、必要な修正方法をご案内します。

WordPressで困ったときの「まず聞ける場所」として、お気軽にご相談ください。