2026年7月11日

Elementorで全幅セクションが中央に揃わない・左右にずれる場合の修正方法

テーマ・デザイン

Elementorで「全幅」にしたはずのセクションやコンテナが左右どちらかに寄って見える場合、原因の多くは「テーマ側のコンテンツ幅に閉じ込められている」「ストレッチの計算がずれている」「ページに横方向のはみ出しがある」の3つのどれかです。この記事では、どの原因に当たるかを開発者ツールで見分ける方法と、原因ごとの直し方を順に説明します。

まず確認すること：セクションかコンテナか

Elementorには、従来の「セクション＋カラム」構造と、Flexboxベースの「コンテナ」構造があります。新しいサイトではコンテナが標準になっていますが、古いサイトや移行途中のページではセクションが残っていることがあります。どちらを使っているかで、全幅の仕組みが異なります。

セクション：レイアウト設定に「ストレッチセクション」というスイッチがあり、オンにするとJavaScriptでセクションの横幅と左位置を計算し、テーマの枠をはみ出して画面幅いっぱいに広げます。
コンテナ：「コンテンツ幅」で「ボックス」か「全幅」を選びますが、ストレッチの仕組みはありません。テーマ側の枠が狭いと、全幅にしてもその枠の中での全幅にとどまります。

編集画面で要素を選び、左パネルの「レイアウト」タブの項目を見れば判別できます。画面上の表記はElementorのバージョンや言語設定で変わることがあるので（2026年10月現在）、似た名前の項目を探してください。

作業の前に、サイト全体のバックアップを取っておきます。Elementorの設定変更はページ単位で元に戻せますが、テーマのテンプレート変更や追加CSSはサイト全体に影響します。CSSを書く場合は子テーマの style.css か、テーマの追加CSS欄を使い、親テーマのファイルは直接編集しないでください。

開発者ツールで原因を切り分ける

見た目だけで判断せず、ブラウザの開発者ツール（ChromeならF12）で次の3点を見ると、原因がほぼ絞り込めます。

ずれているセクションの親要素の幅：要素を選択して親をたどり、max-width や左右の padding を持つテーマ側の要素（.site-content や .entry-content など、名前はテーマによって異なります）があるかを見ます。ここで幅が制限されていれば「テーマの枠」が原因です。
セクション自体のインラインスタイル：ストレッチセクションの場合、要素に style="width: ...; left: ...;" が付きます。left がマイナス値になっていない、または値が画面幅と合っていないなら、ストレッチの計算に問題があります。
ページの横はみ出し：コンソールで次のコードを実行し、true が出れば横方向にはみ出している要素があります。

document.documentElement.scrollWidth > document.documentElement.clientWidth

はみ出している要素を特定するには、次のコードで画面幅より広い要素を一覧できます。

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

原因1：テーマのコンテンツ幅に閉じ込められている

もっとも多いのがこのケースです。テーマが本文エリアに最大幅や左右の余白、サイドバー用の領域を設けていると、Elementorのセクションはその内側に配置されます。左右の余白が非対称だったり、サイドバーの分だけ本文が左に寄っていたりすると、「全幅なのに中央に来ない」状態になります。

直し方は、ページのテンプレートを全幅向けに切り替えることです。

ページ設定のページレイアウト：エディター左下の歯車アイコン（ページ設定）から「ページレイアウト」を開き、「Elementor 全幅」を選びます。ヘッダーとフッターを残したまま、本文の枠を外せます。ヘッダーやフッターも含めて何も表示しないランディングページなら「Elementor キャンバス」を使います。
テーマ側のページ設定：Astra や GeneratePress など、ページ単位でコンテナ幅やサイドバーの有無を切り替えられるテーマもあります。テーマの設定で「サイドバーなし」「全幅」に相当する項目を選ぶと、Elementorのレイアウトと噛み合います。

ブロックテーマでElementorを使っている場合は、テーマの theme.json で定義されたコンテンツ幅が本文の子要素に適用され、中央寄せの幅制限がかかることがあります。この場合もまず「Elementor 全幅」を選び、それでも制限が残るなら、テーマ側のテンプレート（サイトエディター）で本文ブロックの幅設定を確認します。

原因2：ストレッチセクションの計算がずれている

セクションのストレッチはJavaScriptで位置を計算するため、次のような条件で結果がずれます。

JavaScriptの遅延・結合：WP Rocket などの最適化プラグインで「JavaScriptの遅延読み込み」や結合を有効にしていると、計算の実行が遅れたり失敗したりして、読み込み直後に左寄りで表示されることがあります。最適化プラグインの除外設定でElementorのフロントエンド用スクリプトを対象から外すか、一時的に最適化を止めて症状が変わるかを確かめます。
基準となる要素の設定：Elementorのサイト設定の「レイアウト」に、ストレッチの基準にする要素を指定する項目があります。ここにテーマの特定の要素が入っていると、その要素の幅に合わせて計算されます。通常は空欄（ウィンドウ基準）のままで問題ありません。
親要素の transform や overflow：テーマのアニメーションなどで親要素に transform が付いていると、位置計算の基準が変わってずれることがあります。

ストレッチは見た目の上で枠をはみ出させる仕組みなので、原因1のテンプレート変更で枠そのものを外すほうが安定します。コンテナへの移行を考えているなら、ストレッチに頼らない構成に切り替える機会でもあります。

原因3：横はみ出しで画面の中心がずれている

ページのどこかに画面幅より広い要素があると、ページ全体が横に広がり、中央の位置がずれて見えます。よくあるのは次の3つです。

100vwの指定：width: 100vw はスクロールバーの幅を含むため、Windowsのブラウザなどでは表示領域より十数ピクセル広くなり、その半分だけ右にずれて見えます。
マイナスのマージン：カラムやウィジェットに左右のマイナス値マージンを入れていると、その分はみ出します。
入場アニメーション：横からスライドインするアニメーションは、開始位置が画面外にあるため、表示前に横スクロールが発生することがあります。

はみ出している要素が見つかったら、その要素の幅やマージンを見直すのが本来の対処です。どうしても画面端まで広げたいコンテナには、親が中央寄せになっている前提で次のCSSを使えます。コンテナの「高度な設定」でCSSクラスに my-fullbleed を付けてから、子テーマの style.css か追加CSS欄に書きます。

.my-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* スクロールバー分のはみ出しで横スクロールが出る場合の保険 */
html {
	overflow-x: clip;
}

body { overflow-x: hidden; } でも横スクロールは消えますが、ヘッダーの position: sticky が効かなくなる副作用があります。overflow-x: clip はスクロール領域を作らないため、この副作用が起きにくい書き方です。ただしこれははみ出しを隠すだけなので、原因の要素は別途直しておきます。

原因4：中身の配置設定が中央になっていない

外枠は全幅で中央に来ているのに、中の文字やボタンだけが寄っている場合は、内側の設定の問題です。

コンテナでは、方向が「行」か「列」かによって、横方向の中央寄せに使う項目が「コンテンツの配置（justify）」と「アイテムの配置（align）」で入れ替わります。方向を変えたら配置設定も見直します。
コンテンツ幅を「ボックス」にすると、内側は既定のコンテンツ幅（サイト設定のレイアウトで指定）で中央に置かれます。全幅にした場合は左右のパディングが0のままだと端に張り付くので、パディングを左右同じ値で入れます。
ウィジェット個別の配置（見出しやボタンの「配置」）がレスポンシブごとに別の値になっていないか、デスクトップ・タブレット・モバイルを切り替えて確認します。

修正後の確認とキャッシュ

設定を変えても表示が変わらない場合は、キャッシュが残っている可能性があります。Elementorの「ツール」画面にあるCSSを再生成するボタンでElementorが出力するCSSファイルを作り直し、キャッシュプラグインやCDNのキャッシュも削除してから、シークレットウィンドウで確認します。

確認するときは、パソコンの画面幅を変えながら見るだけでなく、スクロールバーが表示される環境（Windowsのブラウザなど）と、実機のスマートフォンの両方で見ておくと、100vw由来のずれを見落としにくくなります。

まとめ

全幅が中央に揃わない原因は、主に「テーマの枠」「ストレッチ計算のずれ」「横はみ出し」「内側の配置設定」の4つです。
開発者ツールで親要素の幅、セクションのインラインスタイル、scrollWidth の3点を見ると切り分けられます。
テーマの枠が原因なら、ページレイアウトを「Elementor 全幅」に切り替えるのが安定した解決策です。
ストレッチはJavaScript頼みなので、最適化プラグインの遅延設定と干渉していないか確認します。
100vwを使うCSSはスクロールバー分のずれに注意し、CSSは子テーマか追加CSS欄に書きます。