ワードプレスのスマホ表示が崩れる原因と直し方｜初心者向け7つの対処法

はじめに

ワードプレスで作ったサイトをスマホで確認したときに、「文字が重なる」「画像が画面からはみ出す」「表が横に切れる」「メニューが開かない」など、表示が崩れて困った経験はありませんか。

今は多くのユーザーがスマホからサイトを見ています。そのため、PCではきれいに表示されていても、スマホ表示が崩れていると読みにくくなり、離脱の原因になります。特にブログや店舗サイト、企業サイトでは、スマホでの見やすさがとても重要です。

ワードプレスのスマホ表示が崩れる原因は、テーマ・プラグイン・画像サイズ・CSS・キャッシュ・高速化設定など、さまざまです。ただし、原因を1つずつ確認していけば、初心者でも改善できるケースは多くあります。

この記事では、「ワードプレス スマホ 崩れる」と悩んでいる方向けに、スマホ表示が崩れる主な原因と、初心者でも試しやすい7つの対処法をわかりやすく解説します。

1. ワードプレスのスマホ表示が崩れるときにまず確認すべきこと

ワードプレスのスマホ表示が崩れると、すぐにテーマやプラグインを変更したくなるかもしれません。しかし、原因を特定せずに設定を変えると、さらに表示が崩れたり、元に戻せなくなったりすることがあります。

まずは、どの環境で、どのページが、どのように崩れているのかを確認しましょう。

1-1. 本当にスマホだけで表示が崩れているか確認する

最初に確認したいのは、「スマホだけで表示が崩れているのか」という点です。

PCでも崩れている場合は、テーマ全体やHTML、CSSの問題である可能性があります。一方で、PCでは問題なく、スマホだけ崩れている場合は、レスポンシブ設定やスマホ用CSS、画像・表の横幅設定が原因になっていることが多いです。

確認するときは、次のようなページをチェックしましょう。

トップページだけでなく、記事ページ、固定ページ、カテゴリーページ、問い合わせページなども確認します。特定の記事だけ崩れている場合は、その記事内の画像・表・HTMLタグ・埋め込みコンテンツが原因かもしれません。

サイト全体で崩れている場合は、テーマやプラグイン、カスタムCSS、高速化設定など、全体に影響する部分を疑いましょう。

1-2. PC表示・タブレット表示・別のスマホで見え方を比較する

スマホ表示が崩れるときは、1台のスマホだけで判断しないことも大切です。

iPhoneでは崩れているがAndroidでは問題ない、Chromeでは崩れるがSafariでは正常に見える、というケースもあります。また、スマホの画面サイズによって、崩れ方が変わることもあります。

できれば次の環境で確認しましょう。

PC、タブレット、iPhone、Android、Chrome、Safariなど、複数の環境で見比べると原因を絞りやすくなります。自分のスマホだけで崩れている場合は、ブラウザキャッシュが原因の可能性もあります。

逆に、どのスマホでも同じように崩れている場合は、サイト側の設定やデザインに問題がある可能性が高いです。

1-3. 崩れ方の種類を確認する｜横にはみ出す・文字が重なる・画像が大きい

「スマホ表示が崩れる」といっても、崩れ方にはいくつかの種類があります。どのように崩れているかによって、原因も対処法も変わります。

よくある表示崩れには、次のようなものがあります。

画像がスマホ画面からはみ出している場合は、画像に固定幅が指定されている可能性があります。表や比較表が横にはみ出している場合は、テーブルの幅がスマホ画面に合っていないことが多いです。

文字が重なっている場合は、行間やフォントサイズ、カラム設定、CSSの指定ミスが原因かもしれません。メニューが開かない場合は、JavaScriptのエラーやプラグインの干渉が考えられます。

また、広告が大きすぎて本文を圧迫している、YouTubeやGoogleマップの埋め込みが画面幅を超えている、ボタン同士が近すぎて押しにくい、といったケースもあります。

まずは「何が」「どこで」「どのように」崩れているのかをメモしておくと、後の作業がスムーズです。

1-4. 直す前にバックアップを取る

ワードプレスの表示崩れを修正する前に、必ずバックアップを取りましょう。

特に、テーマファイル、CSS、プラグイン設定、WordPress本体の更新を行う場合は、バックアップが重要です。誤って設定を変更してしまっても、バックアップがあれば元に戻せます。

バックアップは、サーバーのバックアップ機能や、WordPressのバックアッププラグインを利用して行えます。ファイルだけでなく、データベースもバックアップしておくと安心です。

初心者の方は、いきなりテーマファイルを編集するのではなく、バックアップを取ったうえで、簡単に戻せる範囲から確認していきましょう。

2. ワードプレスのスマホ表示が崩れる主な原因

ワードプレスのスマホ表示が崩れる原因は1つとは限りません。複数の原因が重なっていることもあります。

ここでは、よくある原因を順番に解説します。

2-1. キャッシュが残っていて古いデザインが表示されている

ワードプレスのスマホ表示が崩れる原因として多いのが、キャッシュです。

キャッシュとは、ページを速く表示するために、一度読み込んだデータを一時的に保存する仕組みです。便利な機能ですが、デザインを修正した後も古いCSSや古いレイアウトが表示されてしまうことがあります。

たとえば、PCでは修正後のデザインが表示されているのに、スマホでは古いデザインのまま崩れて見えることがあります。この場合、実際には修正できているのに、スマホブラウザやキャッシュ系プラグイン、サーバー側のキャッシュが古い情報を表示している可能性があります。

表示崩れを確認するときは、まずキャッシュを削除してから再確認しましょう。

2-2. テーマがレスポンシブ対応していない

レスポンシブ対応とは、PC・タブレット・スマホなど、画面サイズに合わせてデザインを自動調整する仕組みです。

最近のワードプレステーマは多くがレスポンシブ対応していますが、古いテーマや独自に作られたテーマでは、スマホ表示に十分対応していない場合があります。

テーマがスマホ対応していないと、PC用の横幅のままスマホに表示され、画面からはみ出したり、サイドバーが無理に表示されたり、文字や画像が小さくなりすぎたりします。

特に、長年更新されていないテーマを使っている場合は注意が必要です。

2-3. プラグイン同士が干渉している

ワードプレスでは、プラグインを使うことで簡単に機能を追加できます。しかし、プラグイン同士が干渉すると、スマホ表示が崩れることがあります。

たとえば、高速化プラグインがCSSやJavaScriptを圧縮した結果、メニューが開かなくなることがあります。広告プラグインがスマホ幅に合わない広告を表示して、本文が横にずれることもあります。

目次プラグイン、画像最適化プラグイン、スライダープラグイン、ページビルダー系プラグインなども、テーマとの相性によって表示崩れを起こすことがあります。

最近プラグインを追加・更新したあとにスマホ表示が崩れた場合は、そのプラグインが原因の可能性があります。

2-4. 画像や表に固定幅が設定されている

スマホ表示が横にはみ出す原因として特に多いのが、画像や表の固定幅です。

たとえば、画像に次のような指定があると、スマホ画面より画像が大きく表示されることがあります。

HTML
<img src="sample.jpg" width="800">

また、表に次のような固定幅がある場合も、スマホ画面からはみ出しやすくなります。

HTML
<table style="width: 900px;">

スマホの画面幅はPCより狭いため、800pxや900pxなどの固定幅があると、横スクロールが発生したり、レイアウト全体が崩れたりします。

画像や表は、スマホ画面に合わせて縮小されるように設定することが大切です。

2-5. CSSやHTMLの記述ミスがある

カスタムCSSや記事内のHTMLにミスがあると、スマホ表示が崩れることがあります。

たとえば、CSSの閉じカッコが不足している、HTMLの閉じタグが抜けている、divタグの入れ子が崩れている、などのミスです。

PCでは一見問題なく見えても、スマホ表示ではカラムが崩れたり、文字が重なったりすることがあります。

特に、記事内に独自のHTMLを貼り付けている場合や、外部サービスのタグ、広告タグ、ランキングタグなどを入れている場合は注意しましょう。

2-6. カラム・余白・フォントサイズがスマホ向けになっていない

PCでは見やすい2カラム・3カラムのデザインでも、スマホでは横幅が足りずに崩れることがあります。

たとえば、横並びのボックスをスマホでもそのまま表示していると、文字が詰まったり、画像が小さくなりすぎたり、レイアウトがはみ出したりします。

また、余白が大きすぎると本文の表示幅が狭くなります。フォントサイズが大きすぎると見出しが折り返されすぎたり、ボタン内の文字がはみ出したりすることもあります。

スマホでは、PCとは別の余白・フォントサイズ・カラム設定が必要です。

2-7. AMPや高速化設定が影響している

AMPや高速化設定が原因で、スマホ表示が崩れることもあります。

AMPはスマホページを高速表示するための仕組みですが、通常ページとは異なるHTMLやCSSで表示されるため、デザインが変わったり、一部の装飾が反映されなかったりすることがあります。

また、CSS圧縮、JavaScript遅延読み込み、不要CSS削除などの高速化設定によって、必要なデザインや動作が読み込まれなくなるケースもあります。

高速化は大切ですが、設定を強くしすぎると表示崩れの原因になることがあります。

3. 対処法1｜ブラウザ・WordPress・サーバーのキャッシュを削除する

ワードプレスのスマホ表示が崩れるとき、まず試したいのがキャッシュの削除です。

キャッシュが原因の場合、難しい修正をしなくても、キャッシュを削除するだけで直ることがあります。

3-1. スマホブラウザのキャッシュを削除する

まずは、スマホのブラウザキャッシュを削除しましょう。

スマホのChromeやSafariには、過去に表示したページのデータが保存されています。そのため、サイト側で修正しても、スマホでは古いCSSや画像が表示され続けることがあります。

iPhoneのSafariを使っている場合は、設定アプリからSafariの履歴やWebサイトデータを削除できます。Chromeの場合は、アプリ内の履歴メニューから閲覧履歴データを削除できます。

ただし、キャッシュを削除すると、他のサイトのログイン状態や閲覧履歴にも影響することがあります。必要に応じて、シークレットモードで確認する方法もおすすめです。

3-2. WordPressのキャッシュ系プラグインを確認する

次に、WordPress側のキャッシュ系プラグインを確認します。

代表的なキャッシュ系プラグインには、ページキャッシュ、CSS圧縮、JavaScript圧縮、画像遅延読み込みなどの機能があります。これらのプラグインが古いデータを保存していると、修正内容がスマホ表示に反映されないことがあります。

キャッシュ系プラグインを使っている場合は、管理画面から「キャッシュ削除」「キャッシュクリア」「Purge Cache」などのボタンを探して実行しましょう。

また、CSSやJavaScriptの圧縮機能を使っている場合は、一時的に停止して表示を確認するのも有効です。

3-3. サーバー側のキャッシュをクリアする

レンタルサーバーによっては、サーバー側でキャッシュ機能が有効になっていることがあります。

サーバーキャッシュが残っていると、WordPress側で修正しても、古いページが表示される場合があります。特に、高速化機能があるサーバーでは、管理画面からキャッシュを削除できることがあります。

サーバーの管理画面にログインし、「キャッシュ」「高速化」「ページキャッシュ」などの項目を確認しましょう。使っているサーバーによって名称は異なります。

WordPressのキャッシュを削除しても直らない場合は、サーバー側のキャッシュも忘れずに確認してください。

3-4. キャッシュ削除後にシークレットモードで再確認する

キャッシュを削除したら、スマホのシークレットモードやプライベートブラウズで再確認しましょう。

シークレットモードでは、通常よりもキャッシュの影響を受けにくいため、現在の表示状態を確認しやすくなります。

また、別のスマホや別のブラウザでも確認すると、より正確に判断できます。キャッシュ削除後に表示が正常になった場合は、原因はキャッシュだった可能性が高いです。

逆に、キャッシュを削除しても崩れたままの場合は、テーマ・プラグイン・CSS・画像サイズなど、別の原因を確認していきましょう。

4. 対処法2｜テーマがスマホ対応しているか確認する

キャッシュを削除してもワードプレスのスマホ表示が崩れる場合は、テーマを確認しましょう。

テーマはサイト全体のデザインを管理しているため、スマホ表示に大きく影響します。

4-1. 使用中テーマのレスポンシブ対応を確認する

まず、現在使っているテーマがレスポンシブ対応しているか確認します。

テーマの公式サイトや配布ページに、「レスポンシブ対応」「スマホ対応」「モバイルフレンドリー」などの記載があるか見てみましょう。

古いテーマや無料配布されているテーマの中には、PC表示を前提に作られていて、スマホ表示が十分に調整されていないものもあります。

また、テーマ自体はレスポンシブ対応でも、独自カスタマイズによってスマホ表示が崩れている場合もあります。特に、子テーマや追加CSSを使っている場合は、そこに原因があるかもしれません。

4-2. テーマを最新版に更新する

テーマが古いままだと、最新のWordPress本体やプラグインとの相性が悪くなり、表示崩れが起きることがあります。

管理画面の「外観」からテーマの更新があるか確認しましょう。更新がある場合は、バックアップを取ったうえで最新版に更新します。

ただし、テーマファイルを直接編集している場合、更新によってカスタマイズ内容が消えることがあります。直接編集している可能性がある場合は、必ずバックアップを取り、必要であれば子テーマを使うようにしましょう。

テーマを更新した後は、スマホ表示だけでなく、PC表示や各ページのレイアウトも確認してください。

4-3. 一時的に別テーマへ切り替えて原因を切り分ける

テーマが原因かどうかを確認するには、一時的に別テーマへ切り替えてみる方法があります。

たとえば、WordPress公式テーマなど、シンプルでスマホ対応しているテーマに切り替えて、スマホ表示が直るか確認します。

別テーマにすると表示が正常になる場合、現在使っているテーマやテーマのカスタマイズが原因の可能性があります。逆に、別テーマでも崩れる場合は、プラグインや記事内のHTML、画像、表などが原因かもしれません。

本番サイトでいきなりテーマを切り替えるのが不安な場合は、テスト環境やステージング環境で確認すると安全です。

4-4. 初心者はスマホ対応済みテーマを選ぶ

初心者の方は、最初からスマホ対応済みのテーマを選ぶのがおすすめです。

スマホ対応済みのテーマであれば、記事本文、見出し、画像、メニュー、サイドバー、ボタンなどがスマホ向けに調整されています。自分で複雑なCSSを書かなくても、ある程度きれいに表示されます。

テーマを選ぶときは、デザインだけでなく、更新頻度、サポート情報、表示速度、レスポンシブ対応、ブロックエディター対応なども確認しましょう。

長期間更新されていないテーマは、今後のWordPress本体やプラグインとの相性で問題が起きる可能性があります。

5. 対処法3｜プラグインを停止して表示崩れの原因を探す

テーマに問題がなさそうな場合は、プラグインを確認します。

ワードプレスのスマホ表示が崩れる原因として、プラグインの干渉はよくあります。

5-1. 最近追加・更新したプラグインを確認する

まず、表示崩れが起きる直前に追加・更新したプラグインがないか思い出しましょう。

スマホ表示が崩れたタイミングと、プラグインの追加・更新のタイミングが近い場合、そのプラグインが原因の可能性があります。

特に、次のようなプラグインは表示に影響しやすいです。

高速化プラグイン、キャッシュプラグイン、広告管理プラグイン、目次プラグイン、画像最適化プラグイン、スライダープラグイン、ページビルダープラグイン、ポップアップ表示プラグインなどです。

これらのプラグインを使っている場合は、設定内容も含めて確認しましょう。

5-2. プラグインを1つずつ停止してスマホ表示を確認する

原因を探すときは、プラグインを1つずつ停止してスマホ表示を確認します。

すべてのプラグインを一気に停止すると、どのプラグインが原因かわかりにくくなります。まずは、最近追加・更新したプラグインや、表示に関係しそうなプラグインから順番に停止しましょう。

1つ停止したらスマホで確認し、表示が直ったかチェックします。直らなければ元に戻して、次のプラグインを確認します。

特定のプラグインを停止したときに表示が直る場合、そのプラグインが原因である可能性が高いです。その場合は、設定を見直す、代替プラグインを探す、テーマとの相性を確認するなどの対応を行います。

5-3. 高速化・広告・目次・画像最適化プラグインに注意する

スマホ表示崩れで特に注意したいのが、高速化・広告・目次・画像最適化系のプラグインです。

高速化プラグインは、CSSやJavaScriptを圧縮・結合・遅延読み込みすることがあります。これにより、必要なスタイルが読み込まれなかったり、スマホメニューが動かなくなったりすることがあります。

広告プラグインは、スマホ幅に合わない広告を表示してしまうことがあります。広告が大きすぎると、本文が横にずれたり、画面全体が狭くなったりします。

目次プラグインは、見出しの読み込みやスクロール動作に影響する場合があります。画像最適化プラグインは、画像サイズや遅延読み込みの設定によって、画像の表示位置が崩れることがあります。

これらのプラグインは便利ですが、設定を強くしすぎると表示崩れの原因になるため注意しましょう。

5-4. 不要なプラグインを削除して競合を防ぐ

使っていないプラグインは、停止するだけでなく削除することも検討しましょう。

不要なプラグインが多いと、サイトが重くなるだけでなく、プラグイン同士の競合やセキュリティリスクも高まります。

似たような機能のプラグインを複数入れている場合も注意が必要です。たとえば、キャッシュ系プラグインを複数入れると、設定が重複して表示崩れを起こすことがあります。

ワードプレスはプラグインを入れすぎるほど管理が難しくなります。必要な機能だけに絞り、定期的に整理しましょう。

6. 対処法4｜画像・表・埋め込みコンテンツの横幅を調整する

スマホ表示が横にはみ出す場合は、画像・表・YouTube・Googleマップ・広告タグなどの横幅を確認しましょう。

特定の記事だけスマホ表示が崩れる場合は、その記事内のコンテンツが原因であることが多いです。

6-1. 画像がスマホ画面からはみ出していないか確認する

画像がスマホ画面からはみ出している場合は、画像の幅が固定されている可能性があります。

CSSで次のように指定すると、画像が親要素の幅に合わせて縮小されやすくなります。

CSS
img {
  max-width: 100%;
  height: auto;
}

max-width: 100%;は、画像が画面幅より大きくならないようにする指定です。height: auto;は、画像の縦横比を保ったまま高さを自動調整する指定です。

記事内で画像に直接widthが指定されている場合は、固定幅を削除するか、CSSで上書きしましょう。

また、横長すぎる画像はスマホで見にくくなることがあります。必要に応じて、スマホでも見やすい比率の画像に差し替えることも大切です。

6-2. 表や比較表に横スクロール設定を入れる

表はスマホ表示で崩れやすい要素の1つです。

特に、比較表や料金表のように列数が多い表は、スマホ画面に収まりにくくなります。無理に縮小すると文字が小さくなり、読みにくくなることもあります。

その場合は、表の外側に横スクロール用のボックスを作る方法があります。

HTML
<div class="table-scroll">
  <table>
    <tr>
      <th>項目</th>
      <th>プランA</th>
      <th>プランB</th>
      <th>プランC</th>
    </tr>
    <tr>
      <td>料金</td>
      <td>1,000円</td>
      <td>2,000円</td>
      <td>3,000円</td>
    </tr>
  </table>
</div>

CSS
.table-scroll {
  overflow-x: auto;
}

.table-scroll table {
  min-width: 600px;
}

このようにすると、スマホでは表だけを横スクロールできるようになります。ページ全体が横にずれるのを防げるため、スマホ表示の崩れ対策として有効です。

6-3. YouTube・Googleマップ・広告タグの幅を確認する

YouTube動画、Googleマップ、広告タグなどの埋め込みコンテンツも、スマホ表示が崩れる原因になります。

たとえば、iframeに固定幅が指定されていると、スマホ画面からはみ出すことがあります。

HTML
<iframe width="800" height="450"></iframe>

このような固定幅がある場合は、CSSで親要素に合わせて表示されるように調整します。

CSS
iframe {
  max-width: 100%;
}

YouTube動画の場合は、アスペクト比を保ちながらレスポンシブ表示にする方法もあります。

CSS
.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

広告タグについても、スマホ用のレスポンシブ広告を使っているか確認しましょう。PC用の大きな広告をスマホでも表示していると、画面幅を超えてレイアウトが崩れることがあります。

6-4. 固定幅指定をmax-widthに変更する

スマホ表示を崩さないためには、固定幅よりも可変幅を使うことが重要です。

たとえば、次のような固定幅指定はスマホでは崩れやすくなります。

CSS
.content-box {
  width: 800px;
}

スマホ対応を考えるなら、次のように変更します。

CSS
.content-box {
  width: 100%;
  max-width: 800px;
}

width: 100%;で画面幅に合わせ、max-width: 800px;でPC表示時の最大幅を制限できます。

画像、表、ボックス、ボタン、埋め込みコンテンツなどに固定幅が使われていないか確認しましょう。特に、pxで大きな幅を指定している箇所は注意が必要です。

7. 対処法5｜CSS・HTMLのミスを修正する

ワードプレスのスマホ表示が崩れる原因が、CSSやHTMLの記述ミスにある場合もあります。

特に、追加CSSや記事内のHTMLを編集したあとに崩れた場合は、その変更箇所を確認しましょう。

7-1. カスタムCSSに固定幅や過剰な余白がないか確認する

WordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」を使っている場合は、そこにスマホ表示を崩す指定がないか確認しましょう。

たとえば、次のような指定はスマホで横にはみ出す原因になります。

CSS
.main-content {
  width: 1000px;
  margin-left: 100px;
}

PCでは問題なくても、スマホでは横幅が足りず、画面外にはみ出してしまいます。

スマホでも崩れにくくするには、次のように調整します。

CSS
.main-content {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

また、左右の余白を大きく取りすぎると、スマホで本文が狭くなります。スマホでは余白を小さめにするなど、画面サイズに合わせた調整が必要です。

7-2. メディアクエリでスマホ用のデザインを指定する

PCとスマホでデザインを変えたい場合は、メディアクエリを使います。

メディアクエリとは、画面幅に応じてCSSを切り替える仕組みです。

たとえば、スマホでは余白やフォントサイズを小さくしたい場合、次のように指定できます。

CSS
@media screen and (max-width: 767px) {
  .content {
    padding: 16px;
  }

  h1 {
    font-size: 24px;
  }

  .box {
    width: 100%;
  }
}

このCSSは、画面幅が767px以下のときに適用されます。

ワードプレスのスマホ表示が崩れる場合、PC用のCSSだけでデザインされていて、スマホ用の指定が不足していることがあります。スマホでは1カラムにする、余白を調整する、フォントサイズを変更するなど、必要に応じてメディアクエリを追加しましょう。

7-3. flex・gridレイアウトがスマホで崩れていないか確認する

最近のテーマやカスタムデザインでは、flexやgridを使ったレイアウトがよく使われます。

PCでは横並びで美しく表示できますが、スマホでも横並びのままだと、幅が足りずに崩れることがあります。

たとえば、横並びのカードがスマホでは窮屈になる場合は、スマホだけ縦並びに変更します。

CSS
.card-list {
  display: flex;
  gap: 24px;
}

.card {
  width: 33.333%;
}

@media screen and (max-width: 767px) {
  .card-list {
    flex-direction: column;
  }

  .card {
    width: 100%;
  }
}

gridの場合も同じです。

CSS
.grid-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media screen and (max-width: 767px) {
  .grid-list {
    grid-template-columns: 1fr;
  }
}

スマホでは横幅が限られるため、横並びの要素は1列にするのが基本です。

7-4. 閉じタグ不足やHTMLの入れ子ミスを確認する

記事内にHTMLを直接書いている場合は、閉じタグ不足や入れ子ミスにも注意しましょう。

たとえば、divタグを閉じ忘れると、その後のレイアウト全体に影響することがあります。

HTML
<div class="box">
  <p>本文が入ります。</p>

このように閉じタグが抜けていると、別の要素まで同じボックスの中に入ったように扱われ、表示が崩れることがあります。

正しくは次のように閉じます。

HTML
<div class="box">
  <p>本文が入ります。</p>
</div>

また、リストタグやテーブルタグの入れ子ミス、不要なタグのコピー、外部ツールから貼り付けたHTMLなども原因になります。

特定の記事だけスマホ表示が崩れる場合は、その記事内のHTMLを確認しましょう。

8. 対処法6｜スマホ向けのレイアウト・文字サイズに調整する

スマホ表示では、PCと同じレイアウトをそのまま使うと読みにくくなることがあります。

スマホでは画面幅が狭く、指で操作するため、レイアウト・文字サイズ・ボタン間隔をスマホ向けに調整することが大切です。

8-1. 2カラム・3カラムをスマホでは1カラムにする

PCでは、本文とサイドバーの2カラムや、カードを横に並べる3カラムがよく使われます。

しかし、スマホで2カラムや3カラムのまま表示すると、1つひとつの要素が小さくなり、文字が読みにくくなります。場合によっては、横にはみ出したり、文字が重なったりします。

スマホでは基本的に1カラム表示にしましょう。

CSS
.layout {
  display: flex;
  gap: 32px;
}

.main {
  width: 70%;
}

.sidebar {
  width: 30%;
}

@media screen and (max-width: 767px) {
  .layout {
    flex-direction: column;
  }

  .main,
  .sidebar {
    width: 100%;
  }
}

このように、PCでは横並び、スマホでは縦並びにすると、画面幅に合わせた見やすいレイアウトになります。

8-2. ボタンやリンクの間隔を広げる

スマホでは、マウスではなく指で操作します。そのため、ボタンやリンクの間隔が狭いと、押し間違いが起きやすくなります。

特に、メニュー、CTAボタン、問い合わせボタン、ページ送り、SNSシェアボタンなどは、スマホで押しやすいサイズと間隔にする必要があります。

ボタンが小さすぎる場合は、paddingを調整します。

CSS
.button {
  display: inline-block;
  padding: 14px 20px;
  font-size: 16px;
}

また、ボタン同士が近すぎる場合は、marginやgapを使って間隔を空けます。

CSS
.button-list {
  display: flex;
  gap: 16px;
}

@media screen and (max-width: 767px) {
  .button-list {
    flex-direction: column;
  }
}

スマホでは、押しやすさもデザインの一部です。見た目だけでなく、操作しやすいかも確認しましょう。

8-3. 見出しや本文のフォントサイズを調整する

スマホ表示で文字が大きすぎると、見出しが何行にも折り返されたり、ボタン内の文字がはみ出したりします。逆に小さすぎると、読みにくくなります。

本文はスマホでも読みやすいサイズに設定しましょう。一般的には、本文は16px前後が読みやすいことが多いです。

見出しは、PCとスマホでサイズを変えると見やすくなります。

CSS
h1 {
  font-size: 36px;
}

h2 {
  font-size: 28px;
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 22px;
  }

  body {
    font-size: 16px;
    line-height: 1.8;
  }
}

見出しが長すぎる場合は、文章そのものを短くすることも大切です。スマホでは、1行あたりの文字数が少ないため、長い見出しは読みにくくなります。

8-4. ヘッダー・メニュー・サイドバーの表示を確認する

スマホ表示で特に崩れやすいのが、ヘッダー、メニュー、サイドバーです。

ヘッダーのロゴが大きすぎると、メニューや検索ボタンと重なることがあります。スマホメニューが開かない場合は、JavaScriptのエラーやプラグイン干渉が原因かもしれません。

サイドバーは、スマホでは本文の下に回すか、非表示にするケースが多いです。PCと同じように横に表示しようとすると、本文幅が狭くなり、読みづらくなります。

また、追尾ヘッダーや固定メニューを使っている場合は、スマホ画面を圧迫していないか確認しましょう。画面上部に大きな固定要素があると、本文が読みにくくなります。

スマホでは、シンプルで操作しやすいヘッダーやメニューを意識しましょう。

9. 対処法7｜AMP・高速化設定・広告表示を見直す

キャッシュ、テーマ、プラグイン、CSSを確認してもスマホ表示が崩れる場合は、AMP・高速化設定・広告表示を見直しましょう。

これらはスマホ表示に大きく影響することがあります。

9-1. AMPページだけ表示が崩れていないか確認する

AMPを使っている場合は、通常ページとAMPページで表示が違うことがあります。

通常ページでは問題ないのに、AMPページだけデザインが崩れている場合は、AMP用のテンプレートやCSSが原因かもしれません。

AMPページでは、使えるHTMLやCSSに制限があります。そのため、通常ページで使っている装飾やスクリプトが反映されないことがあります。

まずは、崩れているページが通常ページなのかAMPページなのか確認しましょう。AMPページだけ崩れている場合は、AMPプラグインの設定やAMP用テンプレートを見直します。

不要であれば、AMPを一時的に無効化して表示を確認する方法もあります。

9-2. CSS圧縮・JavaScript遅延読み込みを一時停止する

高速化プラグインのCSS圧縮やJavaScript遅延読み込みは、表示速度を改善する一方で、デザインや動作に影響することがあります。

たとえば、CSSを結合したことで読み込み順が変わり、スマホ用CSSが正しく反映されなくなることがあります。JavaScriptを遅延読み込みしたことで、スマホメニューやスライダーが動かなくなることもあります。

表示崩れが起きた場合は、次の設定を一時的に停止して確認しましょう。

CSS圧縮、CSS結合、不要CSS削除、JavaScript圧縮、JavaScript結合、JavaScript遅延読み込み、画像遅延読み込みなどです。

一度にすべて変更すると原因がわかりにくくなるため、1つずつ停止してスマホ表示を確認するのがおすすめです。

9-3. 広告タグがスマホ画面を圧迫していないか確認する

広告を設置しているサイトでは、広告タグがスマホ表示を崩すことがあります。

特に、PC用の横長広告をスマホでも表示している場合、広告が画面幅を超えて、ページ全体が横にずれることがあります。

また、広告の読み込み位置によっては、本文や見出しと重なったり、余白が不自然に広がったりすることもあります。

スマホでは、レスポンシブ広告やスマホ向けサイズの広告を使うようにしましょう。広告タグを記事内に直接貼っている場合は、そのタグに固定幅がないか確認してください。

広告が原因かどうかを調べるには、一時的に広告表示を停止してスマホ表示を確認します。広告を停止すると直る場合は、広告サイズや配置を見直しましょう。

9-4. 高速化設定を1つずつ戻して原因を特定する

高速化設定を見直すときは、1つずつ変更することが大切です。

複数の設定を同時に変更すると、どれが原因だったのかわからなくなります。

たとえば、まずCSS圧縮をオフにして確認します。直らなければ元に戻し、次にJavaScript遅延読み込みをオフにして確認します。このように、1つずつ試すことで原因を特定しやすくなります。

原因がわかったら、その機能だけを無効にする、除外設定を使う、別のプラグインに変更するなどの対応を行います。

高速化は大切ですが、表示が崩れていては意味がありません。表示の安定性を優先しながら、必要な範囲で高速化しましょう。

10. どうしてもスマホ表示が直らないときの対処法

ここまでの対処法を試してもワードプレスのスマホ表示が直らない場合は、少し踏み込んだ確認が必要です。

焦って設定を変更し続けるのではなく、原因を切り分けながら対応しましょう。

10-1. WordPress・テーマ・プラグインを最新版にする

まず、WordPress本体、テーマ、プラグインが最新版になっているか確認します。

古いバージョンのままだと、互換性の問題で表示崩れが起きることがあります。特に、WordPress本体だけ更新して、テーマやプラグインが古いままだと、不具合が出る場合があります。

更新前には必ずバックアップを取りましょう。更新後は、スマホ表示、PC表示、問い合わせフォーム、メニュー、広告、画像、表などを確認します。

ただし、古いテーマやプラグインを使っている場合、最新版に更新しても問題が解決しないことがあります。その場合は、別テーマや代替プラグインへの変更も検討しましょう。

10-2. エラーが出る前の状態に復元する

表示崩れが起きる前の状態がわかっている場合は、バックアップから復元する方法もあります。

たとえば、テーマを編集した直後、プラグインを更新した直後、CSSを追加した直後に崩れた場合は、その変更を元に戻すことで直る可能性があります。

サーバーの自動バックアップ機能を使っている場合は、問題が起きる前の日付に復元できることがあります。

ただし、復元すると、その後に投稿した記事や設定変更も戻ってしまう場合があります。復元前には、現在のデータもバックアップしておきましょう。

10-3. 開発者ツールでスマホ表示を確認する

PCのブラウザにある開発者ツールを使うと、スマホ表示を疑似的に確認できます。

Chromeの場合、ページ上で右クリックして「検証」を開き、スマホ表示モードに切り替えることで、画面幅を変えながら確認できます。

開発者ツールでは、どの要素が横にはみ出しているのか、どのCSSが適用されているのかを確認できます。たとえば、特定の画像や表、広告タグが画面幅を超えている場合、その要素を見つけやすくなります。

初心者には少し難しく感じるかもしれませんが、「どの要素が原因で横スクロールが発生しているか」を探すだけでも役立ちます。

10-4. 自力で直せない場合は専門家に相談する

CSSやHTML、テーマファイルの編集が必要な場合、初心者が無理に修正すると、さらに表示が崩れることがあります。

特に、テーマファイルを直接編集する必要がある場合や、JavaScriptエラーが関係している場合、複数のプラグインが干渉している場合は、専門家に相談した方が安全です。

相談するときは、次の情報をまとめておくとスムーズです。

表示が崩れているページのURL、崩れている箇所のスクリーンショット、使用しているテーマ名、最近追加・更新したプラグイン、いつから崩れたか、PCでは正常かスマホだけ崩れるか、などです。

情報が整理されていると、原因特定が早くなり、修正費用や作業時間も抑えやすくなります。

11. スマホ表示崩れを防ぐためのチェックリスト

ワードプレスのスマホ表示崩れは、公開前や更新後の確認で防げることが多いです。

一度直して終わりではなく、日頃からチェックする習慣をつけましょう。

11-1. 記事公開前にスマホ実機で確認する

記事を公開する前には、必ずスマホ実機で確認しましょう。

PCの編集画面だけでは、スマホでの見え方は正確に判断できません。特に、画像、表、ボタン、広告、目次、吹き出し、ランキング、埋め込み動画などは、スマホで崩れていないか確認する必要があります。

プレビュー機能だけでなく、実際のスマホで表示して、文字が読みやすいか、横にはみ出していないか、ボタンが押しやすいかをチェックしましょう。

11-2. テーマやプラグイン更新後に表示確認する

テーマやプラグインを更新した後は、スマホ表示を確認しましょう。

更新によってCSSやJavaScriptの読み込みが変わり、表示が崩れることがあります。特に、高速化系、広告系、ページビルダー系、目次系、画像最適化系のプラグインを更新した後は注意が必要です。

更新後は、トップページだけでなく、記事ページ、固定ページ、カテゴリーページ、問い合わせページなども確認しましょう。

可能であれば、本番サイトで更新する前にテスト環境で確認すると安心です。

11-3. 画像・表・広告の横幅を固定しない

スマホ表示崩れを防ぐには、画像・表・広告の横幅を固定しないことが重要です。

画像にはmax-width: 100%;を指定し、表は必要に応じて横スクロールできるようにします。広告はレスポンシブ対応のものを使い、PC用の大きな広告をスマホにそのまま表示しないようにしましょう。

記事内でHTMLを直接書く場合も、width="800"やstyle="width: 900px;"のような固定幅指定には注意してください。

スマホ画面はPCより狭いため、柔軟に縮小・調整されるデザインを意識することが大切です。

11-4. 定期的にバックアップを取る

スマホ表示崩れに限らず、ワードプレスを運営するなら定期的なバックアップは必須です。

テーマやプラグインの更新、CSSの変更、記事の編集、WordPress本体のアップデートなど、何か問題が起きたときにバックアップがあれば復元できます。

バックアップは、ファイルとデータベースの両方を取るのが基本です。サーバーの自動バックアップ機能や、バックアッププラグインを活用しましょう。

また、バックアップを取るだけでなく、復元方法も確認しておくと安心です。いざというときに戻せる状態を作っておくことが、サイト運営の安全性につながります。

まとめ

ワードプレスのスマホ表示が崩れる原因は、キャッシュ、テーマ、プラグイン、画像や表の固定幅、CSSやHTMLのミス、スマホ向けレイアウトの不足、AMPや高速化設定など、さまざまです。

まずは、スマホだけで崩れているのか、特定のページだけなのか、どの要素が崩れているのかを確認しましょう。そのうえで、キャッシュ削除、テーマ確認、プラグイン停止、画像や表の横幅調整、CSS・HTML修正、スマホ向けレイアウト調整、高速化設定の見直しを順番に試すことが大切です。

特に初心者の方は、いきなりテーマファイルを編集するのではなく、バックアップを取ったうえで、キャッシュ削除やプラグイン停止など、元に戻しやすい方法から始めるのがおすすめです。

スマホ表示は、サイトの読みやすさや使いやすさに直結します。記事公開前やテーマ・プラグイン更新後には、必ずスマホ実機で確認し、画像・表・広告が画面からはみ出していないかチェックしましょう。日頃から確認する習慣をつければ、ワードプレスのスマホ表示崩れを防ぎやすくなります。