スマホでホームページが崩れる原因5つ｜自分で確かめる順番

パソコンではきれいに見えるのに、スマホで開くと文字がはみ出す、横にスクロールしてしまう、ボタンが押せない。お店や事務所のホームページでよくある「スマホ崩れ」の原因は、ほとんどが次の5つのどれかです。確かめる順番にまとめました。

■1. 横幅が固定された画像や表がある

いちばん多い原因です。パソコン用の大きさ（例：幅1000）で固定された画像・表・地図の埋め込みが1つあるだけで、ページ全体が横に広がります。スマホで横にスクロールできてしまうときは、まずここを疑います。はみ出している要素を1つ見つけて「画面の幅に合わせる」設定にすれば直ります。

■2. スマホ向けの設定（viewport）が抜けている

ページの先頭に、スマホの画面幅に合わせるための1行が入っていないと、パソコンの画面をそのまま縮小した表示になります。文字が極端に小さく見えるサイトはこの可能性が高いです。古い時期に作ったサイトや、自作のHTMLでよく起きます。

■3. 長い英数字やURLが折り返されない

メールアドレスやURL、英語の長い単語は、途中で改行されずに画面の外へはみ出すことがあります。「長い文字列を折り返す」指定を足すだけで直ります。

■4. メニューやボタンが重なっている

パソコン用の横並びメニューがスマホでは入りきらず、ロゴや他のボタンと重なって押せなくなります。スマホではメニューを折りたたむ（三本線のボタン）形に切り替える必要があります。

■5. テーマやプラグインの更新で崩れた

WordPressでは、テーマやプラグインを更新した直後に崩れることがあります。子テーマに書き足していた見た目の指定が、更新後の構造と合わなくなるのが原因です。「いつから崩れたか」を思い出すと、原因の見当がつきます。

■自分で確かめる方法

・スマホで開き、横にスクロールできるか試す（できるなら原因1か3）

・文字が全体に小さいなら原因2

・パソコンのブラウザの幅を細く縮めてみると、どの要素がはみ出しているか見つけやすい

■直すときの注意

見た目の指定を直接書き換える前に、必ず元のファイルを控えてください。WordPressでは、テーマ本体ではなく子テーマや「追加CSS」に書くと、更新で消えません。1か所直したら、iPhoneとAndroidの両方の幅で確かめます。

原因が分からない、触るのが不安という方向けに、スマホでの表示崩れを1か所直すサービスを出品しています。URLと崩れている画面を送っていただければ、1か所で直るかどうかを先にお答えします。