WordPressがスマホではみ出すとき、最初に確認する3つのこと

パソコンではきれいに見えるのに、スマホでは文字やボタンが画面の外へ。そんなときは、サイト全体を作り直す前に「どの部分が幅を広げているか」を確認します。

① 全ページか、特定のページだけか

トップページも記事も崩れるなら、ヘッダーや共通レイアウトを確認。表を置いたページだけなら、その表や画像が手がかりになります。更新前後のスクリーンショットがあると、変化も追いやすくなります。

② 固定幅の指定が残っていないか

今回の自主制作見本では、幅960pxの内容をスマホ画面に入れることで、はみ出しを再現しました。修正後は内容幅が280pxになり、枠内に収まりました。固定幅・最小幅・余白を整理するだけで改善するケースがあります。単に横方向を隠すと、ボタンや文章まで見えなくなることがあるため、原因の要素を確認するのが先です。

③ 画像・表・長い文字列を確認する

大きな画像、列数の多い表、改行されないURLなども確認対象です。画像は枠に合わせる、表は横スクロールにする、長い文字は折り返すなど、内容に合う方法を選びます。

修正後は「スマホで収まった」だけで終わらせません。パソコンでも見た目が変わりすぎていないか、メニューや問い合わせボタンが押せるかを確認します。

ご相談の際は、①該当ページ ②崩れている画面の画像 ③いつから起きたか、の3点があれば始められます。原因が分からなくても大丈夫です。

プロフィールのポートフォリオに、修正前後の自主制作見本を掲載しています。WordPressの表示崩れ・不具合修正は、下のサービスからご相談ください。