Elementorで「レイアウトを変えたい」と思ったとき、設定する場所は1か所ではありません。ヘッダーやフッターを表示するかどうかはページごとの Page Layout、コンテンツの標準の幅や余白はサイト全体の サイト設定 → Layout、セクションごとの並べ方は コンテナの Layout タブ で決まります。この記事では、この3か所の役割と、スマートフォン・タブレット向けの調整方法を順に説明します。
画面の項目名は、Elementorの公式ヘルプとソースコードで確認した英語表記で書いています（2026年10月時点）。管理画面を日本語にしている場合は訳語で表示されます。
レイアウト設定の3つの階層
| 設定する場所 | 影響する範囲 | 主な項目 |
|---|---|---|
| ページ設定の Page Layout | そのページだけ | ヘッダー・フッター・サイドバーを表示するか |
| サイト設定 → Layout | サイト全体の初期値 | Content Width、Gaps、Default Page Layout、Breakpoints |
| コンテナの Layout タブ | そのコンテナだけ | Boxed / Full Width、幅、並び方向、間隔 |
迷ったときは「サイト全体の初期値をサイト設定で決め、例外だけをページやコンテナで上書きする」と考えると整理しやすくなります。
ページごとのレイアウト（Page Layout）
設定画面の開き方
- 対象のページをElementorで編集します（固定ページ一覧の「Elementorで編集」など）。
- 上部バーにあるページ設定のアイコンをクリックすると、左側に「Page Settings」パネルが開きます。
- 「Settings」タブの Page Layout のドロップダウンから選びます。
- 「公開」または「更新」で保存します。
選べる4種類
| 選択肢 | 表示内容 | 向いている用途 |
|---|---|---|
| Default | サイト設定の「Default Page Layout」に従う | 通常のページ |
| Theme | 使用中のテーマのテンプレートで表示 | テーマのデザインに合わせたいページ |
| Elementor Canvas | ヘッダー・フッターを出さず、Elementorで作った内容だけを表示 | ランディングページ、メンテナンス告知 |
| Elementor Full Width | テーマのヘッダー・フッターは残し、その間を画面幅いっぱいに使う | トップページ、サービス紹介ページ |
Elementor CanvasとElementor Full Widthは、WordPressのページテンプレートとして登録されています。そのため、ブロックエディターの「テンプレート」欄から選んだ場合も同じ表示になります。
タイトルを隠す「Hide Title」
同じ「Settings」タブにある Hide Title を「Yes」にすると、テーマが出力するページタイトルを非表示にできます。これはサイト設定の「Page Title Selector」に書かれたセレクター（初期値は h1.entry-title）に当てはまる要素を隠す仕組みです。テーマによってはタイトルが別のタグで出力されるため、Hide Titleが効かない場合は、ブラウザの開発者ツールでタイトルのタグとクラスを調べ、Page Title Selectorを合わせてください。
サイト全体の初期値（サイト設定 → Layout）
開き方
- Elementorの編集画面で、上部バーのElementorロゴをクリックします。
- メニューから「Site Settings」を選びます。
- パネルの「Layout」をクリックします。
- 変更したら「Save Changes」で保存します。
主な項目
| 項目 | 内容 |
|---|---|
| Content Width | Boxed（中央寄せ）のコンテナ・セクションの標準の幅。初期値は1140px |
| Container Padding | コンテナの枠と中身の間の標準の余白 |
| Gaps | 要素どうしの標準の間隔（旧来のセクション構成では「Widgets Space」と表示）。初期値は20px |
| Page Title Selector | Hide Titleで隠す対象のセレクター。初期値は h1.entry-title |
| Stretched Section Fit To | 「ストレッチ」したセクションの幅の基準にする要素 |
| Default Page Layout | Page Layoutが「Default」のページに使うレイアウト |
すべての固定ページをヘッダー・フッター付きの全幅で作る方針なら、Default Page Layoutを「Elementor Full Width」にしておくと、ページごとに切り替える手間が省けます。
Content Widthを変えると、Boxedに設定したすべてのコンテナの幅が変わります。公開中のサイトで変更する場合は、主要なページの表示を確認してから保存してください。
コンテナごとのレイアウト（Layout タブ）
現在のElementorでは、ページはコンテナを組み合わせて作ります。コンテナを選ぶと、左のパネルの「Layout」タブで次の項目を設定できます。
| 項目 | 選択肢・内容 |
|---|---|
| Container Layout | Flexbox / Grid |
| Content Width | Boxed（サイト設定のContent Widthに合わせて中央寄せ）/ Full Width（親要素の幅いっぱい） |
| Width | コンテナの幅 |
| Min Height | 最小の高さ |
| Direction | Row - horizontal（横並び）/ Column - vertical（縦並び）と、それぞれの逆順 |
| Justify Content | 並び方向に沿った配置（Start、Center、End、Space Between など） |
| Align Items | 並び方向と直角の配置（Start、Center、End、Stretch） |
| Gaps | このコンテナ内の要素の間隔 |
| Wrap | 要素を折り返すか（No Wrap / Wrap） |
「Additional Options」には、はみ出した部分の扱いを決める Overflow と、出力するタグを選ぶ HTML Tag（div、header、footer、main、article、section、aside、nav など）があります。ページの主要部分を main、関連記事の枠を aside にするなど、内容に合ったタグを選ぶと、文書の構造が伝わりやすくなります。
よく使う組み合わせ
- 背景は画面いっぱい、文字は中央寄せ: 外側のコンテナを Full Width にして背景色や背景画像を付け、内側に Boxed のコンテナを入れて文章を置きます。
- カードを横に3枚並べる: Direction を Row - horizontal、Wrap を Wrap にし、各カードの幅を約33%にします。モバイルでは次の手順で、各カードを画面幅いっぱいに広げます。
スマートフォン・タブレット向けの調整
Elementorでは、デバイスごとに違う値を設定できる項目があります。上部バーで表示するデバイスを切り替えてから値を変えると、そのデバイスの値として保存されます。
初期状態で有効なブレークポイントは次の2つです。
| ブレークポイント | 適用される画面幅 |
|---|---|
| Mobile Portrait | 767px以下 |
| Tablet Portrait | 1024px以下 |
ブレークポイントの値は、サイト設定の Layout にある「Breakpoints」で変えられます。
調整の手順は次のとおりです。
- 上部バーでデバイスを「Mobile」に切り替えます。
- 横並びのコンテナを選び、Direction を Column - vertical に変えます。
- 各要素の幅を画面幅いっぱい（Width の単位を % にして最大値）にし、Gaps を小さめにします。
- Tabletに切り替えて、同じように崩れがないかを確認します。
Desktopで設定した値は、Tablet・Mobileで個別に変更しない限り引き継がれます。プレビューで問題がなくても、実際のスマートフォンで表示を確認してください。
注意点
- テーマ側の設定が優先される場合がある: Elementor Full Widthにしても余白が残る場合は、テーマ側にコンテナ幅やサイドバーの設定がないか確認してください。テーマ独自のレイアウト設定がElementorの表示に影響することがあります。
- Canvasではテーマのヘッダー・メニューが消える: Elementor Canvasにしたページには、サイトのナビゲーションが表示されません。訪問者が他のページへ移動できるよう、必要ならページ内にリンクやボタンを置きます。
- サイト設定の変更は全ページに及ぶ: Content WidthやGapsを変えると、既存ページの見た目も変わります。変更前にバックアップを取り、主要なページを確認してから保存してください。
- ページを作り込む前にサイト設定を決める: 初期値を後から変えると、個別に上書きしたコンテナとそうでないコンテナで差が出ます。サイト全体の幅や間隔は、ページを量産する前に決めておくと手戻りが減ります。
まとめ
- Elementorのレイアウトは、ページ設定の Page Layout、サイト設定の Layout、コンテナの Layout タブの3か所で決まる
- Page Layout は Default・Theme・Elementor Canvas・Elementor Full Width の4種類。Canvasはヘッダー・フッターなし、Full Widthはヘッダー・フッター付きの全幅
- Content Width（初期値1140px）や Gaps、Default Page Layout はサイト設定で一括管理する
- コンテナは Boxed / Full Width と、Direction・Justify Content・Align Items・Wrap で配置を決める
- デバイスを切り替えて値を変えれば、スマートフォン・タブレット用のレイアウトを個別に調整できる