技術ブログ

#blog

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

Shopifyのテーマ「DAWN」のブログ記事一覧は、デフォルトでは2列表示に設定されています。画面幅が750px以上のときは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);
  }

grid-template-columnsに列の幅を追加し、3列のグリッドを作成します。

修正後:

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

この記事を書いた人

鎌田威

株式会社ナレッジサービス
代表取締役 鎌田威

2020年にフリーランスとして独立後、2022年に株式会社ナレッジサービスを設立。Webサイトのディレクションからデザイン、コーディングまで一気通貫で手がける。特にWordPressとShopifyを用いたWebサイト構築を得意とし、企業のDX推進やEコマース支援に多数の実績を持つ。

また、花巻JCの常任理事、花巻YEGの専務理事を務めるなど、地元のコミュニティや地域活性化活動にも取り組んでいる。

まずは出張相談をご利用ください。
岩手県内は無料で訪問します。

ホームページやSNSに関するお悩みは、お気軽にご相談ください。
スタッフが御社を訪問し、お話を伺います。費用はかかりませんので、ご安心ください。

強引な営業は一切いたしません

0120-501-764

受付時間:平日 9:00〜18:00

岩手県内どこでも伺います。オンライン相談や、メールのみでのご相談も承ります。