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