マルチコンテナの設定をスマートフォン向けに調整する方法
このマニュアルでは「マルチコンテナ」を使ってパソコン・タブレットからの閲覧とスマートフォンからの閲覧とでレイアウトや余白を別々に設定する方法をご紹介します。
※bingo!CMSでは、ページ編集画面におけるスマートフォン向けの設定を「SP設定」と言います。
レイアウトをスマートフォン用に設定する
例えば、マルチコンテナでカラムを3列に設定すると、デフォルトではSP設定も3列のレイアウトが表示されます。
パソコンからの閲覧は3列のレイアウトのまま、スマートフォンからの閲覧では1列のレイアウトを表示したいなどの場合は、SP設定を変更します。
変更前
変更後
レイアウトの変更方法
マルチコンテナの編集画面を開き、SP > レイアウト設定 のタブを開きます。
「レイアウト」のプルダウンから「1列」を選択し「保存」をクリックします。
※レイアウトは下の3つから選べます。
- PCと同様
PC・Tablet設定と同じ列数と幅でスマートフォンに表示します。 - 1列
PC・Tablet設定に関係なく、スマートフォンでは1列ずつ表示します。 - 〜列等幅
PC・Tablet設定と同じ列数を均等な幅でスマートフォンに表示します。
余白をスマートフォン向けに設定する
マルチコンテナの編集画面で設定したマージンやパディングなどの余白は、デフォルトではSP設定に反映されません。
スマートフォン向けに別途設定する必要があります。
3列等幅の設定例
変更前
変更後
1列の設定例
変更前
変更後
1. コンテナ内の余白を変更する
マルチコンテナにカラムを複数設定した場合の、カラムとカラムの間の余白を設定する方法です。
マルチコンテナの編集画面を開き、SP > レイアウト設定 のタブを開きます。
「余白（外側）」の「ヘッダー下」または「列・行間」に値を入力し「保存」をクリックします。
設定した余白が反映される箇所は画像を参照してください。
「ヘッダー下」はヘッダー付きのコンテナの場合のみ設定できます。
2.コンテナ下の余白を変更する
マルチコンテナの下の余白を設定する方法です。コンテナとコンテナの間の余白を調整するときなどに使用します。
「下方スペース」に値を入力し「保存」をクリックします。
その他のTips
-
2023年10月27日
連載記事一覧の新着記事を大きく表示する方法複数の連載記事用一覧ユニットを組み合わせ、新着記事を大きく表示するなど、レイアウトにメリハリをつけた一覧をつくる方法をご紹介します。
-
-
-
2022年01月12日
連載記事のNEWアイコンを任意の画像に変える方法bingo!CMSの「連載記事一覧用ユニット」にデフォルトで設定されている「NEW」アイコン（gif）を、任意の画像（jpg、png等）へ置き換えるTipsをご紹介します。