2026年6月16日

Diviでモバイルレイアウトが崩れる場合の原因と修正手順

テーマ・デザイン

Diviで作ったページがスマートフォンで崩れる場合、多くはデスクトップ用に入れた固定値（幅・余白・文字サイズ）がそのままモバイルに引き継がれているか、どこかの要素が画面幅からはみ出していることが原因です。この記事では、崩れの原因を開発者ツールで特定する方法と、Diviのレスポンシブ設定・CSSでの直し方、修正が反映されないときのキャッシュの扱いまでを順に説明します。

作業の前に

Diviはテーマ本体にビルダーが組み込まれた製品で、Divi 4系とDivi 5ではビルダーの画面構成や一部の設定名が異なります（2026年10月現在）。この記事では両方に共通する考え方を中心に説明し、ボタンの位置などは一般的な表現にとどめます。お使いのバージョンの画面で、近い名前の項目を探してください。

作業前に次の2点を済ませておきます。

バックアップ：ページ単位の修正でも、グローバル設定やテーマオプションを触ると全ページに影響します。サイト全体のバックアップを取り、可能ならステージング環境で試します。
子テーマ：独自CSSを書く場合、Diviの「テーマオプション」のカスタムCSS欄か、Diviの子テーマの style.css に書きます。親テーマのファイルを直接編集すると、Diviの更新で消えます。

崩れ方から原因の見当をつける

モバイルの崩れは、見た目でおおよそ次の3種類に分かれます。

横スクロールが出る・右側に余白ができる：画面幅より広い要素があります。固定幅、マイナスのマージン、横からのアニメーションが典型的です。
文字や画像が窮屈・はみ出す：デスクトップ向けの大きな文字サイズや左右パディングがモバイルにも適用されています。
段組みの順番や高さがおかしい：カラムが縦に積み重なったときの順序、カラムの高さをそろえる設定、position: absolute 相当の位置指定で配置した要素が原因です。

Diviの既定のブレークポイントは、Divi 4系ではタブレットが980px以下、スマートフォンが767px以下として扱われます。Divi 5ではブレークポイントを調整できるようになっているため、独自CSSのメディアクエリを書くときは、サイトで使っている値に合わせてください。

開発者ツールではみ出しを特定する

ブラウザの開発者ツール（ChromeならF12）のデバイスモードで、幅375px程度の表示にしてから確認します。横スクロールが出ている場合は、コンソールで次のコードを実行すると、画面幅より右に出ている要素が一覧されます。

document.querySelectorAll('body *').forEach(function (el) {
  if (el.getBoundingClientRect().right > document.documentElement.clientWidth + 1) {
    console.log(el);
  }
});

出てきた要素のクラス名を見ると、Diviのどのモジュールか分かります。et_pb_section、et_pb_row、et_pb_column に続く番号付きのクラス（例：et_pb_row_3）が、ページ内の何番目の要素かを示しています。ビルダーで同じ順番の要素を開けば、問題の設定にたどり着けます。

修正1：デスクトップの固定値をデバイスごとに上書きする

Diviの多くの設定項目には、デスクトップ・タブレット・スマートフォンで別々の値を入れる機能があります。項目にマウスを乗せるとデバイス切り替えのアイコンが出るので、それを有効にしてスマートフォン用の値を入れます。

見直す項目の優先順位は次のとおりです。

行（ロウ）の幅と最大幅：「幅」をピクセルで指定していると、モバイルでも同じ幅を保とうとしてはみ出します。幅は%で指定し、最大幅をピクセルにするのが基本です。
余白（マージン・パディング）：デスクトップで左右に大きなパディングを入れていると、モバイルでは中身の幅がほとんどなくなります。スマートフォン用に小さな値を入れ直します。マイナスのマージンで要素を重ねている場合は、モバイルでは0に戻すと崩れが収まることが多いです。
文字サイズ：見出しのサイズが大きすぎると、長い単語や英数字が改行されずにはみ出します。スマートフォン用の値を小さくします。
位置指定：位置指定の設定で要素を absolute や fixed で配置している場合、モバイルでは別の位置に重なりやすくなります。スマートフォンでは位置指定を「既定」に戻すか、そのモジュールをモバイルで非表示にして代わりの要素を用意します。

モジュールをデバイスごとに出し分けたいときは、各モジュールの「詳細」（Advanced）タブにある表示設定で、スマートフォンやタブレットでの表示をオフにできます。複雑なレイアウトを無理にモバイルで再現するより、モバイル用の簡単な行を別に作り、デバイスごとに出し分けるほうが保守しやすい場合もあります。

修正2：横はみ出しを止める

横からスライドインするアニメーションや、画面外から入ってくる装飾があると、表示前の状態で横スクロールが発生します。該当するセクションや行の「詳細」タブにあるオーバーフローの設定で、横方向を「非表示」にすると、はみ出し部分が切り取られて横スクロールが止まります。

ただし、これははみ出しを隠すだけです。固定幅の画像や埋め込み要素など、本当に幅が大きすぎる要素はそのものの幅を直してください。埋め込みの地図や動画が原因の場合は、次のようなCSSで親の幅に収められます。モジュールの「詳細」タブでCSSクラスに my-embed を付けてから、カスタムCSS欄に書きます。

.my-embed iframe {
	max-width: 100%;
}

@media (max-width: 767px) {
	.my-embed iframe {
		height: 240px;
	}
}

メディアクエリの767pxは、Divi 4系の既定のスマートフォン幅に合わせた値です。ブレークポイントを変更している場合は、その値に置き換えます。

修正3：カラムの並び順と高さを整える

Diviでは、デスクトップで横に並んでいるカラムが、モバイルでは左から順に縦に積み重なります。「画像が左・文章が右」と「文章が左・画像が右」を交互に並べたレイアウトでは、モバイルで画像と文章の順番がそろわなくなります。

対処方法は2つあります。1つは、モバイル用に順番を入れ替えた行を別に作り、デバイスごとの表示設定で出し分ける方法です。もう1つは、行にCSSクラスを付けて、モバイルだけ並び順を反転させる方法です。

@media (max-width: 767px) {
	.my-reverse-row {
		display: flex;
		flex-direction: column-reverse;
	}
}

行の設定にある「カラムの高さを揃える」に相当する項目をオンにしていると、モバイルで不要な空白が出ることがあります。積み重ねたときに余白が気になる場合は、この設定を見直します。

修正が反映されないときのキャッシュ

Diviは、ページごとのCSSを静的ファイルとして生成して読み込む仕組みを持っています。設定を変えても古いCSSが読み込まれ続けることがあるので、次の順にキャッシュを削除します。

Diviのテーマオプション内にある、静的CSSファイルの生成に関する設定から、生成済みファイルを削除（クリア）します。
キャッシュプラグインのキャッシュを削除します。モバイル専用のキャッシュを分けて保存する設定がある場合は、そちらも対象にします。
CDNを使っている場合は、CDN側のキャッシュも削除します。

確認はシークレットウィンドウで行い、開発者ツールのデバイスモードだけでなく、実機のスマートフォンでも見ます。デバイスモードではスクロールバーの扱いやフォントの描画が実機と異なるため、実機でしか出ない崩れがあります。

それでも直らない場合

ここまでの手順で直らない場合は、プラグインとの競合を疑います。ステージング環境で、Divi以外のプラグインを停止して症状が消えるかを確認し、1つずつ有効化して原因を探します。子テーマに独自CSSを書いている場合は、一時的にそのCSSを外して、Divi標準の表示に戻るかも確認しておきます。

まとめ

Diviのモバイル崩れの多くは、デスクトップ用の固定幅・余白・文字サイズがモバイルに引き継がれていることが原因です。
開発者ツールで画面幅からはみ出す要素を探し、et_pb_ で始まるクラスからビルダー上の要素を特定します。
各項目のデバイス別設定でスマートフォン用の値を入れ、幅は%、最大幅はピクセルで指定します。
横スクロールはオーバーフロー設定で止められますが、幅が大きすぎる要素そのものも直します。
修正後はDiviの静的CSS、キャッシュプラグイン、CDNの順にキャッシュを削除し、実機で確認します。