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

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

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

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

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

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

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

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

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

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

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

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

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

2024年12月05日
サイト内検索で検索されたキーワードをGA4で確認する方法
2023年10月27日
連載記事一覧の新着記事を大きく表示する方法
複数の連載記事用一覧ユニットを組み合わせ、新着記事を大きく表示するなど、レイアウトにメリハリをつけた一覧をつくる方法をご紹介します。
2022年06月15日
オリジナルデザインの404ページを作成する方法
bingo!CMSでは、デフォルト以外にオリジナルデザインの404ページを作成できます。
2022年06月08日
スマホでアニメーションを動作させる方法
bingo!CMSのデフォルトではスマートフォンのアニメーションは非対応ですが、動作させるTipsをご紹介します。