スマホ表示が崩れる典型パターン
WordPressサイトはPCでは綺麗でも、スマホでだけ「横スクロールが出る」「文字が小さい」「ボタンが押しにくい」 といった問題が起きがちです。原因の多くは、要素の横幅が画面サイズを超えてしまうことにあります。
まずは「何がはみ出しているか」を見つけるだけで、解決までの距離が一気に短くなります。
スマホ崩れは“現象”ではなく“原因のある構造”です。原因を特定できれば、ほぼ確実に直せます。
よくある症状（スマホ崩れあるある）
横スクロールが出る
- 表（テーブル）がはみ出している
- 画像・iframeの幅が固定
- 長い英数字URLが改行されない
文字が小さく読みづらい
- フォントサイズがPC基準
- 行間が詰まっている
- 余白が狭い
ボタンが押しにくい
- タップ領域が小さい
- ボタン同士が近すぎる
- 固定ボタンが被っている
画像・動画がはみ出す
- widthがpx固定
- iframeにレスポンシブ対応がない
- レイアウトの親要素が狭い
原因特定の最短手順（これだけやればOK）
- 1
スマホ実機 or Chrome開発ツールで再現する
まずはスマホで現象が出る状態を確認します。PCのブラウザなら、Chromeのデベロッパーツールでスマホ幅に切り替えます。
- 2
横スクロールが出る場合は「はみ出し要素」を探す
だいたいは「表・画像・iframe・長い文字列」のどれかです。原因が1つ見つかれば解決は簡単です。
- 3
CSSで「幅100%」と「最大幅」を徹底する
固定pxをやめて、親要素に合わせて縮むように設定します。基本は max-width:100%; が最強です。
- 4
最終チェック：複数ページで再発していないか
1ページで直っても、同じ構造が別ページにあると再発します。全体で共通CSS化しておくと安定します。
すぐ使える万能CSS（困ったらこれ）
以下は「スマホ崩れあるある」に効きやすい汎用CSSです。 まずはこれを入れて、改善するか確認すると最短です。
/* 画像・動画のはみ出し防止 */
img, video{
max-width:100%;
height:auto;
}
/* iframe（GoogleマップやYouTubeなど）のはみ出し防止 */
iframe{
max-width:100%;
}
/* 長い英数字（URLなど）の折り返し */
.wpguide-wrap{
overflow-wrap:anywhere;
word-break:break-word;
}
/* テーブル（表）は横スクロール対応にする */
.table-scroll{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.table-scroll table{
min-width:700px; /* 必要なら調整 */
} テーブルは無理に縮めず、スマホでは横スクロールにする方が読みやすくて実用的です。
スマホで“読みやすい”見た目にする小技
- 本文のフォントサイズは 15〜16px を基準にする
- 行間は 1.7〜1.9 を確保する（詰まりすぎると読めない）
- ボタンは高さ44px以上（タップしやすさの目安）
- 余白（padding）を適切に取る（詰め込みすぎない）
スマホ最適化は「デザイン」ではなく「ユーザー体験」です。読みやすさが整うだけで離脱率が下がります。
