マルチコンテナの設定をスマートフォン向けに調整する方法

このマニュアルでは「マルチコンテナ」を使ってパソコン・タブレットからの閲覧とスマートフォンからの閲覧とでレイアウトや余白を別々に設定する方法をご紹介します。
※bingo!CMSでは、ページ編集画面におけるスマートフォン向けの設定を「SP設定」と言います。

例えば、マルチコンテナでカラムを3列に設定すると、デフォルトではSP設定も3列のレイアウトが表示されます。
パソコンからの閲覧は3列のレイアウトのまま、スマートフォンからの閲覧では1列のレイアウトを表示したいなどの場合は、SP設定を変更します。

スマートフォンの縦幅に対しカラムが3列だとコンテンツが小さく見えづらい。

スマートフォンではコンテンツを1列ずつ表示するよう設定した。

マルチコンテナの編集画面を開き、SP > レイアウト設定のタブを開きます。
「レイアウト」のプルダウンから「1列」を選択し「保存」をクリックします。
※レイアウトは下の3つから選べます。

マルチコンテナの編集画面で設定したマージンやパディングなどの余白は、デフォルトではSP設定に反映されません。
スマートフォン向けに別途設定する必要があります。

マルチコンテナにカラムを複数設定した場合の、カラムとカラムの間の余白を設定する方法です。

マルチコンテナの編集画面を開き、SP > レイアウト設定のタブを開きます。
「余白（外側）」の「ヘッダー下」または「列・行間」に値を入力し「保存」をクリックします。

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

ヘッダー付きのコンテナは4種類あります。

マルチコンテナの下の余白を設定する方法です。コンテナとコンテナの間の余白を調整するときなどに使用します。

マルチコンテナの編集画面を開き、SP > コンテナ設定のタブをクリックします。
「下方スペース」に値を入力し「保存」をクリックします。

2018年10月10日
動画の設定まとめ
動画の設定方法をまとめました。目的別に、カスタムユニットやグリッドユニット、コンテナなどを使った設定方法をご紹介します。
2018年06月27日
変化するグラデーションを作る方法：HTMLユニット編
ページにHTMLニットを配置し、HTMLやCSS、JSを自由に記述することができます。このtipsではHTMLユニットを使用し、色が変化するグラデーションを付ける方法をご紹介します。
2018年06月27日
変化するグラデーションを作る方法：コンテナ編
ページごとにCSSやJSの設定ができます。このtipsではCSSを記述し、コンテナの背景に色が変化するグラデーションを付ける方法をご紹介します。
2017年10月23日
アニメーションの設定まとめ
このtipsでは、アニメーションを設定する方法をご紹介します。ご利用のバージョンによって設定方法が異なりますのでご注意ください。