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

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

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

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

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

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

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

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

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

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

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

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

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

2022年01月12日
連載記事のNEWアイコンを任意の画像に変える方法
bingo!CMSの「連載記事一覧用ユニット」にデフォルトで設定されている「NEW」アイコン（gif）を、任意の画像（jpg、png等）へ置き換えるTipsをご紹介します。
2020年07月06日
カスタムユニットで『流体シェイプ』を実装する方法
2つの外部無料ツールと『カスタム v17』というユニットで流体シェイプのデザインを作成する方法をご紹介します。
2020年02月19日
SNSの投稿やタイムラインをサイトに埋め込む方法
bingo!CMSで制作したサイト上に、TwitterやFacebook、Instagramなど、各SNSの投稿やタイムラインを埋め込む方法をご紹介します。（随時追加）
2020年02月12日
「よくある質問」（FAQ）の構造化データをマークアップし、Google検索に表示させる方法
ページに「よくある質問」（FAQ）の構造化データをマークアップし、Google検索の検索結果一覧に表示させる方法をご紹介します。