WordPressでスマホ表示が崩れる原因と直し方｜よくあるレイアウト崩れを解決
「パソコンでは問題ないのに、スマホで見るとレイアウトが崩れている…」
このようなご相談は、WordPressサイトでは非常によくあります。
特に多いのが、
- 横スクロールが出てしまう
- 画像がはみ出す
- 文字サイズが不自然になる
- カラムレイアウトが崩れる
といったケースです。
実際、スマホ表示の崩れは見た目だけの問題ではなく、
ユーザー離脱やお問い合わせ率低下にも直結します。
本記事では、実際の修正案件でも多い
スマホ表示が崩れる原因と具体的な対処法を分かりやすく解説します。
スマホ表示が崩れる主な原因
① flexレイアウトがスマホ対応されていない
PC表示でよくあるレイアウトです。
display: flex;さらに子要素に、
width: 50%;などを指定しているケースです。
PCでは問題ありませんが、スマホでもそのまま50%が適用されると、横並びが維持されてレイアウトが崩れる原因になります。
② メディアクエリが設定されていない
スマホ表示では、画面サイズごとにCSSを切り替える必要があります。
そのために使うのが
メディアクエリです。
例えば、
@media (max-width: 768px) {
.item {
width: 100%;
}
}このように設定すると、
- 768px以下の場合のみCSSを変更できます。
③ 文字サイズが固定されている
よくあるのが、
font-size: 32px;のように固定しているケースです。
PCではちょうど良くても、スマホでは、
- 大きすぎる
- 改行がおかしい
- はみ出す
などの原因になります。
特に見出し部分で発生しやすい問題です。
④ 画像サイズが適切に調整されていない
画像に固定幅を指定している場合、
width: 1200px;のような状態だと、スマホ画面からはみ出してしまいます。
そのため、基本的には以下の指定が推奨されます。
img {
max-width: 100%;
height: auto;
}画像を親要素に合わせて自動縮小できます
ブレイクポイントの理解がかなり重要
スマホ表示の崩れを防ぐ上で、
ブレイクポイントの理解は非常に重要です。
ブレイクポイントとは、
画面サイズごとにレイアウトを切り替える基準
のことです。
SWELLテーマのブレイクポイント
SWELLテーマでは主に、
- 960px
- 600px
がブレイクポイントとして使用されています。
実際にはどう切り替わっているのか？
例えばSWELLブロックの「リッチカラム」を使用し、
- PC：3列
- タブレット：2列
- スマホ：1列
と設定している場合、実際には以下のように切り替わります。
960px以上 → 3列（PC表示）
959px〜600px → 2列（タブレット表示）
599px以下 → 1列（スマホ表示）
つまり、
- 960pxはPC扱い
- 959pxになった瞬間に2列へ変更
という仕様になります。
CSS側もブレイクポイントを合わせる必要がある
例えばフォントサイズを調整する場合、
@media (min-width: 960px) {
.text {
font-size: 24px;
}
}
@media (max-width: 959px) {
.text {
font-size: 21px;
}
}このように設定することで、
リッチカラムの切り替えタイミングとCSSを一致できます。
ブレイクポイントがズレると、レイアウトや余白が崩れる原因になります
WordPress標準カラムとの違いに注意
SWELLブロックと標準カラムは切り替えタイミングが違う
例えば同じページ内で、
■ SWELLリッチカラム
→ 960px / 600pxで切り替え
■ WordPress標準カラム
→ 約767pxで切り替え
このような状態になっている場合、
959px以下 → SWELLリッチカラムが切り替わる
767px以下 → WordPress標準カラムが切り替わる
つまり、
同じページ内でレイアウト変更タイミングがズレる
という問題が発生します。
結果として起こること
- 余白がズレる
- フォントサイズが合わない
- 一部だけ崩れる
など、管理がかなり複雑になります。
解決策
SWELLテーマを使用している場合は、可能な限りSWELLブロック（リッチカラム）で統一するのがおすすめです
理由として、
- ブレイクポイントが統一される
- CSS管理がしやすい
- 修正箇所が減る
というメリットがあります。
よくあるスマホ崩れの例
・横スクロールが出る
→ 要素幅が画面を超えている
・画像がはみ出す
→ width固定指定
・2カラムのまま表示される
→ メディアクエリ未設定
・文字サイズが大きすぎる
→ PC用フォントサイズがそのまま適用
今すぐできる対処法
① Chromeの検証ツールで確認する
Chromeの検証ツールを使うことで、
スマホ表示を再現できます。
まずはここで原因を確認するのがおすすめです。
② ブレイクポイントを確認する
テーマごとの切り替えタイミングを確認しましょう。
特にSWELLでは、
- 960px
- 600px
が重要になります。
③ 幅指定を見直す
固定幅（px）ではなく、
- %
- vw
などを使うことで柔軟に調整できます。
④ 画像サイズを調整する
max-width: 100%;
height: auto;は基本設定としておすすめです。
それでも直らない場合
ここまで試しても改善しない場合、
- テーマ独自CSS
- プラグインの影響
- JavaScriptによる制御
など、専門的な原因の可能性があります。
無理に修正すると別の箇所まで崩れることがあります
プロに依頼すべきケース
- 原因が分からない
- スマホだけ崩れる
- 修正に時間をかけたくない
- 確実に直したい
このような場合は、専門家へ依頼するのがおすすめです。
無料相談のご案内
当方では、WordPressのスマホ表示修正やレイアウト調整を承っております。
・原因調査から修正まで一貫対応
・365日 8:00〜23:00対応（急ぎのご相談も可能）
・最短即日でのスピード対応
・個人対応のため柔軟かつ迅速に対応可能
スマホ表示の崩れでお困りの方は、お気軽にご相談ください。
