パーツがはみ出してしまう(レイアウト崩れ)現象についての解消方法について

EasyPageでは、一部のパーツは設置場所に制約があります。

設置場所を間違えると、レイアウト崩れを生じることがあります。

下図のようなパーツを設置されましたが、右側がはみ出してしまう現象です。

■例:

 

■ページ編集内に設置された場所

 

■原因について

上記のようなパーツは、ナビゲーション・商品のパーツに背景を設定する時によく使われいます。

背景色は画面いっぱいに表示されていて、商品表示の部分は横幅が固定されているタイプです。

参考イメージ:

青枠に背景が設定されていて、横幅は画面いっぱいで設定されてます。

緑枠に商品が設定されていて、横幅は固定に設定されてます。

このようなパーツは、「container」(横幅固定)というクラスで、商品等の要素が設定されています。

「container」の外側に背景を定義しています。

下図のように、「container」内(緑枠)に商品に関するHTML の記述がされています。

 

 

なお、Easypageでは、下記のように2種類の枠があります。青枠は横幅画面いっぱいの枠です。

というわけで、「container」が入っているパーツは、1カラムの青い枠に設置する必要があります。

 

■解消方法

該当パーツを「ドラッグ」ボタンで1カラムの青い枠に移動するだけです。

 

移動後のイメージ:

 

完成イメージ:

 

 

■青い枠がない場合

上級者向け>bootstrap>container-fluid>12(1カラムの意味)のドラッグボタンより、追加することができます。

 

ただし、下記のような組み合わせは禁止です。