マルチコンテナの設定をスマートフォン向けに調整する方法
このマニュアルでは「マルチコンテナ」を使ってパソコン・タブレットからの閲覧とスマートフォンからの閲覧とでレイアウトや余白を別々に設定する方法をご紹介します。
※bingo!CMSでは、ページ編集画面におけるスマートフォン向けの設定を「SP設定」と言います。
レイアウトをスマートフォン用に設定する
例えば、マルチコンテナでカラムを3列に設定すると、デフォルトではSP設定も3列のレイアウトが表示されます。
パソコンからの閲覧は3列のレイアウトのまま、スマートフォンからの閲覧では1列のレイアウトを表示したいなどの場合は、SP設定を変更します。
変更前
スマートフォンの縦幅に対しカラムが3列だとコンテンツが小さく見えづらい。
![bingo!CMS「マルチコンテナ」-スマートフォンでカラム3列を表示したイメージ](https://manual.bingo-cms.com/v17/global-image/units/img/97503-5-20231011162529_b65264de9d194e.png)
変更後
スマートフォンではコンテンツを1列ずつ表示するよう設定した。
![bingo!CMS「マルチコンテナ」-スマートフォンでカラム1列を表示したイメージ](https://manual.bingo-cms.com/v17/global-image/units/img/97505-6-20231011162543_b65264df7c63e5.png)
余白をスマートフォン向けに設定する
マルチコンテナの編集画面で設定したマージンやパディングなどの余白は、デフォルトではSP設定に反映されません。
スマートフォン向けに別途設定する必要があります。
3列等幅の設定例
変更前
![bingo!CMS「マルチコンテナ」-スマートフォンでカラム3列を表示したイメージ](https://manual.bingo-cms.com/v17/global-image/units/img/97511-5-20231011162630_b65264e2648419.png)
変更後
![bingo!CMS「マルチコンテナ」-スマートフォンでカラム3列を表示し、余白を調整したイメージ](https://manual.bingo-cms.com/v17/global-image/units/img/97511-6-20231011162630_b65264e264937a.png)
1列の設定例
変更前
![bingo!CMS「マルチコンテナ」-スマートフォンでカラム1列を表示したイメージ](https://manual.bingo-cms.com/v17/global-image/units/img/97513-5-20231011162649_b65264e3965fb9.png)
変更後
![bingo!CMS「マルチコンテナ」-スマートフォンでカラム1列を表示し、余白を調整したイメージ](https://manual.bingo-cms.com/v17/global-image/units/img/97513-6-20231011162649_b65264e3966dea.png)
1. コンテナ内の余白を変更する
マルチコンテナにカラムを複数設定した場合の、カラムとカラムの間の余白を設定する方法です。
設定した余白が反映される箇所は画像を参照してください。
「ヘッダー下」はヘッダー付きのコンテナの場合のみ設定できます。
その他のTips
-
2023年10月27日
連載記事一覧の新着記事を大きく表示する方法複数の連載記事用一覧ユニットを組み合わせ、新着記事を大きく表示するなど、レイアウトにメリハリをつけた一覧をつくる方法をご紹介します。
-
2022年01月12日
連載記事のNEWアイコンを任意の画像に変える方法bingo!CMSの「連載記事一覧用ユニット」にデフォルトで設定されている「NEW」アイコン(gif)を、任意の画像(jpg、png等)へ置き換えるTipsをご紹介します。