コンテナでスマホの余白を揃える方法

bingo!CMSでは余白の設定方法がいろいろありますが、今回はコンテナの余白設定でスマホの余白を揃える方法をご紹介します。

before

余白調整前

レイアウト：3列等幅
レイアウト：1列

after

余白調整後

レイアウト：3列等幅
レイアウト：1列

コンテナ内の余白調整

コンテナのPC・Tablet設定はSP（スマートフォン）設定に反映されません。
SPの調整をする場合は、
「コンテナ編集画面 / SP / レイアウト設定 / 余白（ヘッダー下、列・行間）」
から調整します。

設定した余白が反映される箇所は画像を参照してください。
※ヘッダー下はヘッダー付きのコンテナを使用する場合のみ設定
 
ヘッダー下の余白を設定できるコンテナ

コンテナ間の余白調整

コンテナ間の余白を調整する場合は、
「コンテナ設定 / 下方スペース」から調整します。

スマートフォンでのページレイアウト

レイアウトは下の3つから選べます。
  1. PCと同様
    PC・Tablet設定と同じ幅でスマートフォンに表示します。
  2. 1列
    列数に関係なく、スマートフォンでは1列ずつ表示します。
  3. 〜列等幅
    PC・Tablet設定に関係なく、列数に応じて均等なサイズで表示します。

PC表示画面

SP表示画面

ページトップ