2026年5月20日

WordPressのモバイル表示が崩れる場合の解決方法

テーマ・デザイン

はじめに

WordPressサイトのモバイル表示が崩れる主な原因は「viewportメタタグの欠如」「固定幅の要素」「メディアクエリの不足」です。ChromeのDevToolsでモバイルシミュレーションを使いながら原因を特定し、CSSで修正できます。

症状・原因

スマートフォンで表示すると横スクロールが発生する
文字が小さすぎる・ボタンが押しにくい
画像がはみ出して崩れる
PCでは正常なのにスマートフォンだけ崩れる

解決手順

ステップ1：DevToolsでモバイル表示を確認する

Chrome DevToolsのモバイルシミュレーション:

1. F12 → ツールバーの「デバイスアイコン」をクリック（Ctrl+Shift+M）
2. デバイスを選択:
   → iPhone SE: 375px
   → iPhone 14: 390px
   → Galaxy S20: 360px
3. 横スクロールが発生する要素を特定:
   → Elements タブで各要素の幅を確認
   → 赤枠が画面幅を超えている要素に注目
4. Networkタブ → 「モバイルをシミュレート」でスロットリング確認

ステップ2：viewportメタタグを確認する

// header.phpまたはfunctions.phpで確認
// wp_head() が呼ばれていればWordPressが自動的に出力する

// 手動で確認
wp eval "echo get_bloginfo('name') . PHP_EOL;"
// → head内のviewportタグを確認:
// <meta name="viewport" content="width=device-width, initial-scale=1">

// テーマにviewportがない場合、functions.phpで追加
add_action('wp_head', function(): void {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">' . PHP_EOL;
}, 1);

ステップ3：横スクロールの原因を特定・修正する

/* 横スクロールの原因を探す */
/* すべての要素に赤枠を付けてはみ出しを確認（デバッグ用） */
* { outline: 1px solid red; }

/* 修正: 固定幅の要素をレスポンシブに変更 */

/* NG: 固定幅 */
.site-content {
    width: 960px;
}

/* OK: 最大幅 + 余白 */
.site-content {
    max-width: 960px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 画像のはみ出しを防ぐ */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* テーブルの横スクロール */
.entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

ステップ4：メディアクエリを追加する

/* モバイルファーストのブレークポイント */
/* スマートフォン（デフォルト） */
.site-header {
    padding: 10px 15px;
    font-size: 14px;
}

.nav-menu {
    display: none; /* モバイルでは非表示 → ハンバーガーで制御 */
}

/* タブレット以上（768px〜） */
@media (min-width: 768px) {
    .site-header {
        padding: 20px 30px;
        font-size: 16px;
    }

    .nav-menu {
        display: flex;
    }
}

/* PC（1024px〜） */
@media (min-width: 1024px) {
    .site-content {
        max-width: 1200px;
        margin: 0 auto;
    }
}

ステップ5：フォントサイズとタッチターゲットを最適化する

/* モバイルでのフォントサイズ（16px未満は自動ズームが発生） */
body {
    font-size: 16px; /* 最小16px */
    -webkit-text-size-adjust: 100%; /* iOSの自動拡大を防ぐ */
}

/* タッチターゲットは最小44×44px（Appleガイドライン） */
.nav-menu a,
.btn,
input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
}

/* フレキシブルグリッド */
.column-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

ステップ6：Google Mobile-Friendly Testで確認する

# WordPressのモバイル対応状況を確認
wp eval "echo get_bloginfo('url') . PHP_EOL;"

# レスポンシブ対応テーマかどうか確認
wp theme get $(wp theme list --status=active --field=name) --field=tags --format=json | grep -i responsive

# Googleのモバイルフレンドリーテスト（ブラウザで確認）
# https://search.google.com/test/mobile-friendly

# サイトのHTMLにviewportが含まれるか確認
wp eval "
\$html = wp_remote_get(home_url('/'));
\$body = wp_remote_retrieve_body(\$html);
echo strpos(\$body, 'viewport') !== false ? 'viewport: OK' : 'viewport: NG';
echo PHP_EOL;
"

注意事項

font-size: 16px 未満の入力フィールドは、iOSで自動ズームが発生します。フォームのinputには必ず16px以上を設定してください
box-sizing: border-box をグローバルに設定するとパディングを含めた幅計算になり、レイアウトが崩れにくくなります
Google Core Web Vitals の CLS（レイアウトシフト）スコアにも、モバイルレスポンシブの品質が影響します

まとめ

モバイル表示崩れはDevToolsのモバイルシミュレーションで特定し、「viewportタグ確認 → 固定幅をmax-widthに変更 → img: max-width: 100% → メディアクエリ追加」の順で修正します。box-sizing: border-box のグローバル設定も有効です。

Post Views: 13