Hara Daizo WordPressのレスポンシブ対応は、画面幅に合わせてレイアウト、文字、画像、ナビゲーションを調整することです。現在のテーマが対応していても、固定幅のブロック、長い表、追加CSSによってスマホだけ崩れることがあります。
まず実機で問題を再現し、テーマ設定、ブロック設定、CSSの順に直すと影響を限定できます。この記事では確認方法から個別要素の修正、速度と操作性まで説明します。
WordPressのレスポンシブ対応とは
レスポンシブWebデザインは、同じURLとHTMLを使いながら、画面幅に応じて表示方法を変える設計です。Googleも実装・保守がしやすい方法としてレスポンシブデザインを推奨しています。
対応は「スマホで一列になる」だけではありません。次の要素をまとめて確認します。
- コンテンツが横にはみ出さない
- 文字を拡大しなくても読める
- リンクやボタンを押し分けられる
- メニューを開閉できる
- 画像や動画が画面幅に収まる
- 重要な内容が端末によって欠けない
PCとスマホで別URLを作るより、同じ内容を画面に合わせて並べ替える方法が管理しやすくなります。
WordPressがスマホ対応しているか確認する方法
管理画面のプレビューだけで合否を決めず、公開画面を複数の幅と実機で確認します。
- ブラウザーの開発者ツールで幅を連続的に縮める
- 320、375、768、1024ピクセル付近を目安に確認する
- iPhoneとAndroidの実機で縦向き・横向きを試す
- メニュー、フォーム、表、動画を実際に操作する
- 横スクロールや文字の重なりを記録する
特定の端末名だけに合わせず、崩れが始まる内容上の幅を見つけます。ログイン中は管理バーやキャッシュ除外で表示が変わるため、ログアウト状態も確認してください。
ページ種別も重要です。トップページだけでなく、長い記事、検索結果、カテゴリー、フォーム、404ページを確認します。
WordPressをレスポンシブ対応する方法
修正は、影響の小さい順に行います。
| 優先 | 方法 | 向く問題 |
|---|---|---|
| 1 | テーマ更新・公式設定 | 既知の不具合、標準レイアウト |
| 2 | ブロック設定 | 列、幅、余白、文字サイズ |
| 3 | 画像・埋め込み設定 | 固定幅メディア |
| 4 | 追加CSS | 設定にない個別調整 |
| 5 | 子テーマ・構造変更 | テンプレート自体の問題 |
変更前にバックアップを取り、検証環境で1項目ずつ直します。レスポンシブ対応プラグインを追加するだけで、テーマ固有の固定幅やJavaScriptまで自動的に直るわけではありません。
古いテーマなら、コード修正にかかる保守負担と、現行のレスポンシブ対応テーマへ移行する負担を比較してください。
スマホ表示が崩れる主な原因
横スクロールや重なりの原因は、画面幅より大きい要素です。
- ピクセルで固定したwidthやmin-width
- 大きな画像、iframe、動画
- 折り返せない長いURLや英数字
- 多数の列を持つ表
- 負の余白や絶対配置
- 固定ヘッダーと本文の重なり
- プラグインが出力する独自CSS
開発者ツールでbodyの幅を超える要素を探し、問題の要素だけを修正します。全体へoverflow-x:hiddenを付けると、はみ出しを隠すだけで、操作すべき内容まで見えなくなるため根本対応にはなりません。
テーマを一時的に変える検証やプラグイン停止は、本番ではなく検証環境で行います。
テーマ・ブロック設定でスマホ表示を調整する
ブロックテーマでは、グループ、カラム、ナビゲーション、画像などの設定を確認します。テーマが流動的な文字サイズや間隔を提供している場合は、固定値を追加する前に利用します。
カラムは小さい画面で縦積みになる設定を使い、並び順が読書順と一致するかを確認します。PCでは画像・文章の交互配置が自然でも、スマホで画像が連続することがあります。
ナビゲーションブロックでは、小さい画面でメニューアイコンを表示する設定があります。テーマ独自のスマホメニューと重複しないよう、実際に開閉してください。
クラシックテーマではカスタマイザーやテーマ設定のブレークポイント、ロゴ幅、サイドバー、コンテナ幅を確認します。設定名と有無はテーマごとに異なります。
メディアクエリ（CSS）で調整する
標準設定で直せない場合は、問題が始まる幅にメディアクエリを使います。WordPressに全テーマ共通の標準ブレークポイントはないため、端末の通称ではなく内容が崩れる幅で決めます。
.responsive-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
@media (max-width: 48rem) {
.responsive-card {
grid-template-columns: 1fr;
}
}対象に独自クラスを付け、サイト全体のdivやimgへ強すぎる指定をしません。追加位置、詳細度、相対単位の考え方は「メディアクエリとCSS」で確認できます。
変更後は境界の前後を連続的に動かし、急な余白、文字切れ、意図しない順番変更がないかを見ます。
画像・動画・表をレスポンシブにする
WordPressは4.4以降、生成する画像HTMLへsrcsetとsizesを付け、ブラウザーが画面や解像度に応じた画像を選びやすくしています。ただし、これは画像の配信サイズを選ぶ仕組みであり、CSSの固定幅やレイアウト崩れを直すものではありません。
画像と動画では、コンテナを超えない幅を設定します。
.entry-content img,
.entry-content video,
.entry-content iframe {
max-width: 100%;
}
.entry-content img,
.entry-content video {
height: auto;
}iframeは縦横比を保つラッパーやaspect-ratioを使います。画像をCSSで縮めても元ファイルが巨大なら転送量は減らないため、適切な画像サイズも選びます。
表は情報を削る前に、列を短くする、見出しを明確にする、横スクロール可能な領域へ入れる方法を検討します。重要な比較軸をスマホだけ非表示にすると、内容差が生じます。
スマホ表示の速度・使いやすさを改善する
スマホは回線やCPUが限られるため、表示崩れがなくても重いページは使いにくくなります。大きな画像、使わないJavaScript、Webフォント、過剰な追従要素を点検します。
優先して確認する項目は次のとおりです。
- ファーストビュー画像の容量と寸法
- 画面を覆うポップアップ
- タップ領域の間隔
- 固定ヘッダーの高さ
- フォームの入力種類とエラー表示
- レイアウトの大きな移動
具体的な計測と改善順は「スマホでの表示速度改善」で確認できます。速度指標だけを追わず、メニューやフォームを実際に完了できるかも評価してください。
修正後に確認する端末・画面
修正後は、次の組み合わせを最低限確認します。
| 対象 | 確認内容 |
|---|---|
| 小型スマホ縦 | 横幅、長い語、固定要素 |
| 一般的なスマホ縦横 | メニュー、フォーム、動画 |
| タブレット縦横 | カラム切り替え、余白 |
| PC狭幅・広幅 | 最大幅、左右の空き、画像 |
| キーボード操作 | フォーカス、開閉、順序 |
トップページ、記事、一覧、問い合わせ完了までの導線を通します。キャッシュを削除した初回表示と、再訪時の両方を確認すると、読み込み順による崩れも見つけやすくなります。
よくある質問
技術的には可能でも、固定幅のテンプレートや古いプラグインが多いと修正範囲が広がります。現行テーマへの移行と保守費用を比較し、検証環境で判断します。
配置や折りたたみ方を変えることはできますが、重要な本文をスマホだけ削るのは避けます。Googleはモバイル版の内容をインデックスと評価に使い、主要コンテンツをPCと同等にするよう案内しています。
必須ではありません。現行テーマとブロックで対応できる場合が多く、プラグインだけで個別のCSSや表を完全修正することはできません。問題箇所を特定してから必要性を判断します。
まとめ
WordPressのレスポンシブ対応では、まず実機と複数幅で崩れを再現し、テーマ設定、ブロック、メディア、追加CSSの順に修正します。固定幅、長い表、埋め込み、追従要素はスマホ崩れの主な原因です。
見た目だけでなく、メニュー、フォーム、タップ操作、表示速度、PCと同等の主要内容まで確認してください。修正後にページ種別と端末を横断して試すことで、一部の画面だけに残る不具合を見つけられます。