商品情報にスキップ
1 1
公開日:2024.11.29

Shopifyのテーマ「Dawn/Rise」のブログページでデスクトップを3カラム、モバイルを2カラムレイアウトにする設定例

Shopifyのテーマ「Dawn/Rise」のブログページでデスクトップを3カラム、モバイルを2カラムレイアウトにする設定例

用途

  • ブログ管理・編集

実装方法

  • HTML/CSS
詳細を表示する

テーマエディタ上で、ブログテンプレートのブログ記事セクションにカスタムCSSを設定するだけで、デスクトップで3カラム、モバイルでは2カラムのレイアウトに変更することが可能です。

◆実装のメリット
・記事一覧がコンパクトにまとまり、ユーザーの回遊性が向上
・デバイスごとに最適な表示で、読みやすさが格段にアップ

◆具体的な手順
・コレクションテンプレートのブログ記事セクションを選択
・カスタムCSSセクションにレイアウト調整用のスタイルを追加


テーマ「Dawn/Rise」のブログページでデスクトップを3カラム、モバイルを2カラムレイアウトにする設定例


【(テーマRise/Dawnの場合)設定方法】コレクションテンプレート:商品グリッドセクションのカスタムCSSにスタイルを追加


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

商品グリッドセクションのカスタムCSSにスタイルを追加

関連ポスト