# ブログを３記事表示させる **URL:** \ **Category:** 技術的なQ＆A\ **Tags:** css\ **Created:** [July 26, 2024, 2:21pm UTC](https://community.shopify.com/t/topic/342952 "2024-07-26T14:21:42Z")\ **Posts on this page:** 4\ **Page:** 1 ## AI-generated summary ブログ一覧をPC/スマホともに1列3記事表示にし、サムネイルをスクエア表示したいという要望。Dawnテーマに設定が見当たらず、CSS/コードでの実現可否を相談。 主な提案： - アプリ利用：『シンプルお知らせ一覧（UR Smart Blog Articles）』で3列表示とスクエア画像に対応。案内リンクと参考記事、事例画像が提示。 - コード対応（PC限定）：section-main-blog.css の grid-template-columns を「1fr 1fr」→「1fr 1fr 1fr」に変更して2→3列化。 技術補足：grid-template-columns はCSS Gridの列定義。1frは余白を等分する単位で、3つ並べると3等分の3列になる。 現状と未解決点： - 投稿者はコード編集での対応を模索中。 - スマホでの3列化や、コードのみでの画像スクエア化の手順は未提示。解決は未了で議論継続。
**Author:** ![YS5](https://avatars.discourse-cdn.com/v4/letter/y/57b2e6/32.png) [@YS5](https://community.shopify.com/u/YS5)\ **Post date:** [July 26, 2024, 2:21pm UTC](https://community.shopify.com/t/topic/342952/1 "2024-07-26T14:21:42Z")
こんにちは。ブログ一覧をPCスマホともに1列3記事表示にしたいです。 dawnテーマだと設定する箇所が見当たらず、 カスタムCSSかコード編集で対応可能でしょうか？ セクションの「ブログ記事」の写真をスクエアで表示する方法もあれば教えていただきたいです。よろしくお願いいたします。 ---
**Author:** ![Nishi\_3](https://avatars.discourse-cdn.com/v4/letter/n/8c91f0/32.png) [@Nishi\_3](https://community.shopify.com/u/Nishi_3)\ **Post date:** [July 28, 2024, 5:08am UTC](https://community.shopify.com/t/topic/342952/2 "2024-07-28T05:08:27Z")
はじめまして 株式会社UnReactの西川と申します。 弊社のアプリで恐縮ですが、「[シンプルお知らせ一覧｜お手軽ブログ一覧挿入アプリ](https://apps.shopify.com/ur-smart-blog-articles?locale=ja)」を用いれば、 ブログの 3 列表示・写真のスクエアで表示することが可能です。 ![CJeos4uksoYDEAE=.webp](https://canada1.discourse-cdn.com/shopifyforum/original/4X/c/6/1/c61ac275221a6f751a04d049c4082e3e412dd8d9.webp) 下記、参考情報です。 [シンプルお知らせ一覧｜お手軽ブログ一覧挿入アプリ](https://apps.shopify.com/ur-smart-blog-articles?locale=ja) [Shopifyストアにお知らせセクションを挿入してブログ・ニュース一覧を表示できるアプリについて徹底解説｜ご利用ガイド](https://unreact.jp/shopify-apps/sa-029-ur-news-section-app/guide) 以上になります ご参考になりましたら幸いです。 ---
**Author:** ![YS5](https://avatars.discourse-cdn.com/v4/letter/y/57b2e6/32.png) [@YS5](https://community.shopify.com/u/YS5)\ **Post date:** [July 29, 2024, 12:28pm UTC](https://community.shopify.com/t/topic/342952/3 "2024-07-29T12:28:01Z")
現在コード編集で対応できる術を探しています。ありがとうございました。 ---
**Author:** ![Tkyng](https://avatars.discourse-cdn.com/v4/letter/t/85e7bf/32.png) [@Tkyng](https://community.shopify.com/u/Tkyng)\ **Post date:** [October 4, 2024, 4:54am UTC](https://community.shopify.com/t/topic/342952/4 "2024-10-04T04:54:51Z")
こんにちは。PC版のみの対応ですが下記のようにsection-main-blog.cssファイルの「grid-template-columns」に、「1fr」を1つ追加したら2列→3列に変更できましたよ。 before：grid-template-columns: 1fr 1fr; after：grid-template-columns: 1fr 1fr 1fr;