「パソコンではきれいに見えるのに、スマホで見るとWordPressの表示が崩れている」と困っていませんか？
CSS修正を少し入れただけなのに、ボタンがはみ出す、画像が横に広がる、余白が急に詰まることがあります。
スマホ表示の崩れは、単なる見た目の問題に見えても、
問い合わせや購入の導線を止めてしまうことがあります。
特にスマホからのアクセスが多いサイトでは、早めの確認が必要です。
ただし、焦ってCSSを何度も上書きすると、原因がさらに分かりにくくなります。
まずは「どの画面幅で、どの要素が、どのCSSの影響で崩れているか」を切り分けるのが正解です。
よこやま良平ITエンジニアとして20年以上WordPressの制作・修正・復旧に携わってきたよこやま良平です。わたしの現場経験をもとに、スマホ表示だけ崩れる時の確認ポイントを初心者向けに整理します。
- CSS修正でスマホ表示だけ崩れる主な原因
- パソコン表示とスマホ表示を切り分ける確認手順
- メディアクエリやキャッシュで確認すべきポイント
- 業者に相談する前に残しておくとよい情報
CSS修正でスマホ表示が崩れた時は、追加したCSSだけを見るのではなく、
テーマのレスポンシブ設定、プラグインのCSS、キャッシュ、画面幅ごとの指定を合わせて確認します。
この記事では、自分で確認できる範囲と、無理に触らず相談した方がよい範囲を分けて解説します。
まずは原因の切り分けから進めましょう。
こんなお悩みはありませんか？
- ある朝、サイトを開いたら真っ白画面になっていた
- 管理画面にログインできなくなって手が止まった
- 身に覚えのない記事やページが勝手に増えていた
- プラグインを更新したらサイト全体が崩れてしまった
- 以前バックアップを取ったか自分でも覚えていない
累計1,000件以上のWordPressトラブル対応の経験から、「壊れる前に備える」ためのチェックリストを1冊にまとめました。
ログイン・本体・バックアップ・サーバー・運用の5分野を、50項目で「危険度・確認方法・対処法」まで解説しています。
セキュリティプラグイン・WordPressの教科書も含めた3大特典を、
今なら無料で受け取れます。
CSS修正でスマホ表示が崩れる原因
CSS修正でスマホ表示が崩れる時は、パソコン用の指定がスマホにも効いているか、スマホ用の指定が上書きされている可能性が高いです。
WordPressテーマの多くは、画面幅に応じてレイアウトを切り替えるレスポンシブ設計になっています。そのため、同じ要素でもパソコンとスマホで別のCSSが使われることがあります。
パソコン用CSSがスマホにも効いている
よくあるのは、横幅や余白を固定値で指定してしまうケースです。たとえば、横幅を大きなpx値で固定すると、スマホ画面では要素がはみ出します。
- 横幅を固定する `width` の指定
- 大きすぎる `margin` や `padding`
- 折り返しを止める `white-space` の指定
- 横並びを強制する `display:flex` の指定
このような指定は、パソコンでは問題なく見えても、スマホ幅になると一気に崩れます。修正する時は、画面幅ごとに効かせる範囲を分ける必要があります。
テーマやプラグインのCSSとぶつかっている
WordPressでは、テーマ、ブロックエディター、プラグイン、追加CSSの指定が重なって表示を作っています。そのため、自分で追加したCSSが思った通りに効かないことがあります。
特にSWELLなどの高機能テーマでは、ブロックごとにスマホ用の余白や横幅が細かく調整されています。そこへ強い指定を入れると、スマホだけ崩れる原因になります。
スマホ表示崩れを確認する順番
スマホ表示崩れを直す時は、いきなりCSSを書き換えず、表示確認の順番を決めることが大切です。
原因が分からないまま修正を重ねると、あとから元に戻せなくなります。まずは崩れている範囲と再現条件を記録しましょう。
どのスマホ幅で崩れるか確認する
最初に見るべきなのは、すべてのスマホで崩れるのか、特定の画面幅だけで崩れるのかです。スマホといっても、画面幅は端末によって違います。
- 崩れているページのURL
- 崩れている場所のスクリーンショット
- 確認した端末やブラウザ
- CSSを変更した日時と変更箇所
ブラウザの開発者ツールでスマホ幅に切り替える方法もありますが、最終確認は実機でも行うのが安全です。開発者ツールだけでは、ブラウザ差やキャッシュ差を見落とすことがあります。
【※画像挿入※ ブラウザの開発者ツールでスマホ幅を確認している画面】
直前に変更したCSSだけを一度外す
次に、直前に追加したCSSを一度コメントアウトして、表示が戻るか確認します。戻るなら、そのCSSが原因の可能性が高いです。
ただし、複数箇所を同時に変更している場合は、一括で戻すのではなく、1つずつ外して確認します。これにより、どの指定がスマホ表示に影響しているか分かりやすくなります。
/* いったん無効化して確認する例
.sample-area {
width: 980px;
}
*/
レスポンシブCSSで確認すべきポイント
レスポンシブCSSでは、スマホ用の画面幅に合わせて指定を分けることが重要です。
パソコン用の見た目だけを基準にCSSを書くと、スマホでは横幅が足りず、画像・ボタン・表・カラムが崩れることがあります。
固定幅ではなく最大幅で調整する
スマホ表示では、要素の横幅を固定しすぎないことが大切です。固定幅を使う場合でも、画面幅を超えないように最大幅を指定します。
.sample-box {
width: 100%;
max-width: 980px;
}このように、基本は横幅いっぱいに広げつつ、パソコン表示では最大幅を制限する考え方にすると、スマホでのはみ出しを防ぎやすくなります。
メディアクエリの上書き順を確認する
スマホだけ別のCSSを効かせる場合は、メディアクエリを使います。ただし、書く場所や優先順位を間違えると、意図した指定が効きません。
@media screen and (max-width: 767px) {
.sample-box {
padding: 16px;
display: block;
}
}この例では、画面幅が767px以下の時だけスマホ用の余白と表示方法に切り替えます。テーマ側にもスマホ用CSSがあるため、追加CSSは後から読み込まれる場所に書く必要があります。
- スマホ幅だけに効かせるCSSを分ける
- 横幅固定を避け、`max-width` を使う
- CSSの読み込み順と優先順位を見る
- 変更前のCSSを必ず保存しておく
CSS修正がスマホに反映されない時の確認
CSSを直したのにスマホ表示が変わらない場合は、CSSの書き方だけでなく、キャッシュや読み込み先も確認します。
WordPressでは、テーマ、プラグイン、サーバー、CDN、ブラウザの複数箇所でキャッシュが働くことがあります。古いCSSが残っていると、修正済みに見えません。
キャッシュを順番に削除する
スマホだけ古い表示が残る場合は、スマホブラウザ側のキャッシュも疑います。まずはシークレットモードや別ブラウザで確認すると切り分けしやすくなります。
- WordPressのキャッシュ系プラグインを削除する
- サーバー側キャッシュを削除する
- CDNを使っている場合はCDNキャッシュを削除する
- スマホブラウザをシークレットモードで確認する
CSSを書いた場所を確認する
追加CSS、子テーマのCSS、カスタムHTML内のCSS、プラグインのCSSなど、CSSを書く場所はいくつもあります。別の場所に書いた古い指定が残っていると、スマホ表示に影響します。
特に、以前の制作者が子テーマやプラグイン側にCSSを書いている場合、管理画面の追加CSSだけ見ても原因が分からないことがあります。
スマホ表示崩れを直す前に避けたい操作
スマホ表示崩れを急いで直したい時ほど、元に戻せない操作を避けることが大切です。
CSSは一見小さな修正に見えますが、テーマ全体のレイアウトやブロック表示に影響することがあります。特に本番サイトでは、変更履歴を残しながら進めましょう。
追加CSSをまとめて削除しない
原因が分からないからといって、追加CSSをまとめて削除するのは危険です。別のページで必要なデザインまで消えてしまうことがあります。
削除ではなく、まずはコメントアウトで一時的に無効化します。変更前の状態をメモしておけば、表示が悪化した時にも戻しやすくなります。
テーマファイルを直接編集しない
親テーマの `style.css` やテンプレートファイルを直接編集すると、テーマ更新時に変更が消えることがあります。初心者の方は、管理画面の追加CSSや子テーマで対応する方が安全です。
- 追加CSSをバックアップなしで全削除する
- 親テーマのファイルを直接編集する
- 複数箇所を同時に変更する
- キャッシュを確認せず修正を重ねる
CSS修正を依頼する前にまとめる情報
CSS修正を依頼する場合は、崩れている画面と変更履歴をまとめておくと、原因調査が速くなります。
「スマホで崩れています」だけでは、調査範囲が広くなります。どのページで、どの端末で、いつから崩れたのかを伝えるだけで、対応の精度が上がります。
スクリーンショットとURLを用意する
依頼前には、崩れているページのURLとスマホのスクリーンショットを用意します。可能なら、正常なパソコン表示のスクリーンショットもあると比較しやすくなります。
変更したCSSと日時を伝える
直前に追加・変更したCSSがある場合は、その内容と変更日時を伝えます。分からない場合でも、最後に触った管理画面やプラグイン名を共有すると調査の手がかりになります。
- 崩れているページURL
- スマホ表示のスクリーンショット
- パソコンでは正常かどうか
- 変更したCSSやプラグイン
- いつから崩れたか
CSS修正のスマホ表示崩れでよくある質問
CSS修正でスマホ表示が崩れた時は原因を切り分けて直そう
CSS修正でスマホ表示が崩れた時は、追加したCSSだけを疑うのではなく、画面幅、テーマCSS、プラグインCSS、キャッシュ、読み込み順を順番に確認することが大切です。
パソコンでは正常でも、スマホでは横幅や余白の条件が変わります。固定幅や強い上書き指定を入れている場合は、スマホ用に別指定を用意する必要があります。
- スマホ表示崩れは固定幅や上書きCSSが原因になりやすい
- まずは崩れている端末・画面幅・ページURLを確認する
- 変更前のCSSを保存してから1つずつ切り分ける
- 反映されない時はキャッシュとCSSの読み込み先を見る
- 問い合わせや購入導線が崩れている場合は早めに相談する
スマホ表示は、今のWebサイトではとても重要です。小さな崩れに見えても、読者が操作できない状態になっているなら、早めに復旧した方が安心です。
CSS修正後のスマホ表示崩れが自分で解決できない時は
ホームページの表示崩れ・WordPress修正・不具合復旧でお困りなら、
クイックレスキューが解決します。
- スマホで見た時だけ表示が崩れている
- CSSを直したのに反映されない
- テーマやプラグインのCSSが分からない
- 問い合わせボタンや購入導線が崩れている
- 自分で修正しようとしたが悪化しそうで不安
- 万一復旧できない場合やマルウェア駆除できない場合は全額返金保証で安心
- 90日間再感染保証・動作保証で安心
- 初期費用・調査費用0円で安心
