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列のグリッドを作成しました。