ブログ記事一覧を3列表示に変更する方法【Dawn】

Shopifyのテーマ「DAWN」のブログ記事一覧は、デフォルトでは2列表示に設定されています。画面幅が750px以上のときは3列表示にする方法を解説します。

1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

3.「アセット」フォルダ内のsection-main-blog.cssファイルを選択し、コードを以下のように修正します。

修正前：

  .blog-articles {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }

修正後：

  .blog-articles {
    grid-template-columns: 1fr 1fr 1fr; /* ここを修正 */
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }

4.最後に「保存」をクリックして完了です。

【解説】grid-template-columnsに列の幅を追加し、3列のグリッドを作成しました。