Elementorでコンテナ・配置・余白を整える

① 部品をまとめる「コンテナ」を選ぶ

コンテナは、見出し・文章・画像などをまとめる「入れ物」です。入れ物を調整すると、中の部品をまとめて並べたり、周りに余白を付けたりできます。

1. 右側のページで、調整したい部品の周囲にマウスを合わせます。
2. コンテナのハンドルを選びます。選びにくい場合は上部の「構造」を開き、一覧からコンテナを選びます。
3. 左上が「コンテナを編集」になっていることを確認します。

② 横並び・縦並びと間隔を決める

123

1. 「レイアウト」を開きます。
2. 「コンテンツ幅」で、全幅かボックスかを確認します。ボックスは内容の幅を制限して中央などにまとめるときに使います。
3. 「方向」で横向きの矢印なら横並び、下向きの矢印なら縦並びにします。
4. 「Gaps」は中の部品同士の間隔です。例として20pxから調整します。
5. 「項目の配置」などで、上下や左右の揃え方を整えます。

成功の目印：中の部品の並び方と間隔が変わります。

③ 内側・外側の余白を調整する

12

1. 「高度な設定」→「レイアウト」を開きます。
2. 「パディング」は入れ物の内側の余白です。例として上下左右24pxを入れると、文字や画像が端にくっつかなくなります。
3. 「マージン」は入れ物の外側の余白です。前後のまとまりと距離を空けたいときに調整します。
4. 上下左右を同じ値にするときは鎖マークで連動させます。別々にするときは連動を解除して入力します。
5. 1か所ずつ変更し、右側でどの空きが変わるかを確認します。

成功の目印：本文が端から離れ、前後のまとまりとの間隔も整います。

④ スマホで確認して保存する

上部のスマートフォン形のアイコンを押し、表示を確認します。問題がなければ右上の「公開」または「更新」を押し、保存後に実際のページを開き直します。

• 横並びが窮屈なら、スマホだけ縦並びにできている。
• 左右に大きな空きやはみ出しがない。
• 同じ目的の余白を何重にも重ねていない。

スマホ表示の詳しい調整方法 ／ 下書き保存・公開・元に戻す手順