パソコンでは普通に見えるのに、スマホだけ文字やボタンが崩れる。こういうときはCSSを足す前に、ブラウザの幅を狭めて、どこから崩れるかを確認します。
「特定の端末だけ」なのか「ある幅を下回ると崩れる」のかで、直す場所が変わるためです。まずは崩れる境目とページを特定します。
この記事でわかること
この記事では、CSSを足す前に、崩れる幅とページを特定するところまでを進めます。
- スマホだけ崩れるときに、最初に確認すること
- 端末固有の問題と、画面幅による問題を分ける方法
- 画像、表、ボタン、長い文字列で見たいポイント
- 自分で確認を続ける範囲と、修正を止めたい条件
CSSを足す前に、崩れ始める画面幅を探す
手元のスマホを見ながら直そうとすると、その1台にぴったり合う数値を入れることになります。それで直ったように見えても、少し幅の違う端末では、また崩れます。よくある展開です。
なので、パソコンのブラウザ幅をゆっくり狭くして、同じページを見てみてください。途中で同じ崩れが出たなら、端末の問題ではなく、画面幅に応じたレイアウトの問題です。ここが分かるだけで、話がずいぶん進みます。
分かった範囲で、こんなことを控えておきます。
- 崩れ始めるおおよその画面幅
- 崩れるページのURL
- 崩れる要素
- 縦向きと横向きの違い
- 正常に見える幅
正確なピクセル数まで調べる必要はありません。「スマホの縦向きだと崩れて、横向きにすると直る」。これだけでも手がかりになります。
私は手元の1台に合わせてCSSを書きません。その端末では直っても、少し幅の違う画面でまた崩れるからです。
正常と異常の境目さえ分かれば、どこを直せばよいか見当がつきます。
端末のせいか、幅のせいかを分ける
同じページを、できれば2つ以上の環境で見比べます。
- 問題が起きたスマホで縦向き・横向きを比べる
- 別のスマホで同じページを開く
- パソコンのブラウザ幅を狭くして再現するかを見る
- 別のブラウザでも同じ状態になるかを見る
複数の端末で、同じくらいの幅になると崩れる。それならレイアウト側の問題です。逆に、特定の1台の特定ブラウザだけなら、その環境やキャッシュを疑うことになります。
ここで目指すのは、端末をたくさん集めることではありません。「どこでも起きる」「特定の端末だけ」「一定の幅だけ」。このどれに近いかが分かれば十分です。
一つ気をつけたいのが、ブラウザの拡大率です。無意識に変わっていることがあるので、標準に戻してから確認します。
端末側で文字サイズを大きくしている場合は、その状態もメモしておきます。文字を大きくしただけでボタンやメニューが重なるなら、幅ではなく、文字量に耐えられない作りになっているのかもしれません。
崩れるページと要素を、一つずつ絞る
「サイト全体がスマホで崩れている」と感じても、実際に見ていくと、特定のページの特定の部品だけ、ということがよくあります。全部を一度に直そうとせず、最初に見つけたページから始めます。
書き出すと、こんな感じです。
- サービスページの料金表だけ横にはみ出す
- ブログ記事内の横長画像だけ画面から切れる
- 全ページ共通の問い合わせボタンが本文に重なる
- メニューを開いたときだけ文字が重なる
上の2つと下の2つでは、対応がまったく違います。共通部分なら1か所直せば全ページに効きますが、逆に言えば全ページに影響が出ます。記事内の表や画像なら、その記事だけの話かもしれません。
どちらか判断できないうちにCSSを足すのは、おすすめしません。崩れていたページは直っても、正常だったページが崩れることがあるからです。ページURLと、全体・拡大のスクリーンショットを1枚ずつ残しておくと、直したあとに比べられます。
メモがそろうと、直す場所が決まる
架空の例で、ここまでのメモを埋めてみます。
崩れ始める幅：おおよそ400pxより狭くなったとき
崩れるページ：サービスページ／料金ページ／お知らせ一覧
崩れる要素：料金表が横にはみ出す
縦横の違い：横向きにすると直る
正常に見える幅：420px以上3ページで起きていますが、共通部品の問題とは限りません。3つとも料金表を載せているだけかもしれないからです。
ここで見るのは、ページ数ではなく崩れていないページに同じ要素があるかです。
- 料金表のない他ページは正常 → 料金表そのものの問題。その表だけ直す
- 料金表のないページでも崩れる → 共通のCSSかテーマ設定。全ページに影響する
前者なら、直す範囲は表だけです。後者は1か所直せば全ページに効く代わりに、正常だったページまで巻き込みます。
同じ「3ページで崩れている」でも、打ち手はここで分かれます。だから幅を特定したあと、すぐCSSへ行かずに要素を絞ります。
崩れやすい要素には、それぞれ見どころがある
スマホ表示で困りやすい要素は、だいたい決まっています。最初に見るポイントを挙げておきます。
画像が切れる、ぼやける
画像そのもののサイズだけでなく、画像を囲んでいるブロックの幅と、実際に表示されている画像URLを見てください。WordPressは1枚の画像から複数サイズを自動生成して、画面幅に応じてブラウザが使うものを選ぶ仕組みです。
つまり、パソコンとスマホで別のファイルを読んでいる可能性があります。元画像を差し替えたのに片方だけ古いまま、という状態はこれで起こります。両方の画像URLを比べれば、すぐはっきりするはずです。
表が横にはみ出す
列の多い表や、長い文章が入った表は、スマホの幅には収まりません。文字サイズを極端に小さくして無理やり収めたくなりますが、それだと読めません。
横スクロールで読ませるか、項目を縦に並べ直すか。どちらかを選ぶことになります。
どの列を残すか、スマホだけ並びを変えていいか。これはデザインの話に見えて、実は情報の優先順位の話です。迷ったら見た目だけで判断せず、相談してもらうほうが安全だと思います。
ボタンやメニューの文字が重なる
ボタンの幅を固定していたり、文字を折り返さない設定になっていたりすると、文言が少し長くなるだけで収まらなくなります。文言を短くして済ませるのか、2行になっても読める作りにするのか、方針を決めてから手を付けます。
共通メニューは全ページに出るので、1ページだけを見て幅を固定するのは避けたいところです。
画面下の固定ボタンが本文を隠す
問い合わせや電話の固定ボタンは、端末の高さやブラウザの表示領域によって、重なる範囲が変わります。ボタン自体だけでなく、ページ最下部までスクロールしたときに、最後の文章やリンクを押せるかどうかまで確認してみてください。
Cookie同意の表示やチャットが重なっている場合は、どれを優先するかの整理が先です。片方をずらすだけだと、別の幅でまた重なります。
崩れる前に、何をしたか思い出す
気づいた日時の少し前に、何か変更していないか振り返ってみてください。
- WordPress本体、テーマ、プラグインを更新した
- ページへ表や画像を追加した
- ボタンや見出しの文言を変えた
- CSSやテーマ設定を変更した
- キャッシュや画像最適化の設定を変えた
心当たりが見つかっても、すぐ元に戻せばいいとは限りません。特に更新を戻す判断は慎重に。
セキュリティ更新だった場合、戻すことで別のリスクを抱えることになります。変更日時、対象、変更した人を控えて、戻せる状態かを確かめてから進みます。
テーマやプラグインの更新直後から崩れたなら、CSSの追加は後回しです。戻す対象と触らない範囲は、更新後に表示が崩れたときの確認順で整理できます。
スマホだけ古いCSSや画像を読んでいるように見えるときは、別のブラウザや別端末でも同じか確認します。キャッシュを消す場合は、ブラウザ、WordPress、サーバー、CDNを一度にまとめて消さないこと。何が効いたか分からなくなるので、対象と結果を記録しながら一つずつ進めます。
自分で確認できる範囲と、修正を止めたい条件
画面幅を変えて再現を見る、URLとスクリーンショットを残す、縦横や別ブラウザで比べる、直前の変更を整理する。ここまではサイトを触らずにできるので、安心して進められます。
次のような場合は、CSSを追加したり更新を戻したりする前に、一度相談してもらったほうが安全です。
- 複数ページの共通メニューやボタンが崩れている
- 管理画面やログイン後のページで発生する
- 決済、問い合わせ、会員登録の操作を妨げている
- テーマやプラグインの更新直後に起きた
- ある幅を直すと、別の幅で崩れる
- 既存のCSSがどこから適用されているか分からない
特に「ある幅を直すと別の幅で崩れる」は、その場しのぎのCSSが積み重なっているサインです。足すほど絡まっていくので、どこかで整理したほうが結果的に早くなります。
相談するときは、ページURL、端末とブラウザ、再現する幅、縦横の違い、直前の変更、試した操作。この6つがあれば十分です。原因を推測して伝えるより、確かめられた事実だけをそろえてもらうほうが、調査は速く進みます。
おわりに
スマホだけ崩れるときは、CSSを足す前に、どの画面幅から崩れるかを確認してみてください。端末固有か幅固有かを分けて、ページと要素、直前の変更まで絞れれば、正常なところまで巻き込んで壊すリスクを減らせます。
複数の画面幅に影響していたり、テーマやプラグインまで確認が必要だったり。そういう場合は、今の状態を整理したうえで修正までお力になれるかもしれませんので、お気軽にご相談ください。
