マルチコンテナの設定をスマートフォン向けに調整する方法
このマニュアルでは「マルチコンテナ」を使ってパソコン・タブレットからの閲覧とスマートフォンからの閲覧とでレイアウトや余白を別々に設定する方法をご紹介します。
※bingo!CMSでは、ページ編集画面におけるスマートフォン向けの設定を「SP設定」と言います。
レイアウトをスマートフォン用に設定する
例えば、マルチコンテナでカラムを3列に設定すると、デフォルトではSP設定も3列のレイアウトが表示されます。
パソコンからの閲覧は3列のレイアウトのまま、スマートフォンからの閲覧では1列のレイアウトを表示したいなどの場合は、SP設定を変更します。
変更前
スマートフォンの縦幅に対しカラムが3列だとコンテンツが小さく見えづらい。
変更後
スマートフォンではコンテンツを1列ずつ表示するよう設定した。
余白をスマートフォン向けに設定する
マルチコンテナの編集画面で設定したマージンやパディングなどの余白は、デフォルトではSP設定に反映されません。
スマートフォン向けに別途設定する必要があります。
3列等幅の設定例
変更前
変更後
1列の設定例
変更前
変更後
その他のTips
-
2020年01月15日
カスタムCSS編集でbox-shadowエフェクトをかける方法box-shadowエフェクトを実装する方法と、classで呼び出せるbox-shadowエフェクトのプリセットをご紹介します。