# \[Dawnテーマ\]ブログをスマホ時にスワイプではなく、2列表示したい

**URL:** <https://community.shopify.com/t/dawn-2/160953>\
**Category:** 技術的なQ＆A\
**Created:** [October 19, 2022, 2:03am UTC](https://community.shopify.com/t/dawn-2/160953 "2022-10-19T02:03:29Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

目的: Dawnテーマのブログ一覧をスマホ表示でスワイプではなく2列グリッドにしたい。

対応: テーマのコード編集から assets/section-featured-blog.css の末尾にCSSを追記。メディアクエリ(max-width: 989px/749px)で
- .blog__posts.articles-wrapperを折り返し(flex-wrap)・ギャップ・パディングを設定し、スライダーボタンを非表示。
- .blog__post.articleの幅をcalc(50% - 0.5rem)にして余白とflex-growを調整。

注意: 十分な検証は未実施で不具合の可能性あり。動作はChromeで確認。

結果: 提案を適用したところ希望どおりスマホで2列表示を実現。投稿者が動作確認と謝意を表明。

用語補足: CSSのメディアクエリは画面幅など条件に応じてスタイルを切り替える仕組み。

状態: 解決済み。追加の課題や未回答点はなし。

<div class="post-metadata">

**Author:** ![oyaoya](https://avatars.discourse-cdn.com/v4/letter/o/f1d935/32.png) [@oyaoya](https://community.shopify.com/u/oyaoya)\
**Post date:** [October 19, 2022, 2:03am UTC](https://community.shopify.com/t/dawn-2/160953/1 "2022-10-19T02:03:29Z")

</div>

はじめまして、小島と申します。

Dawnテーマを使用する中で、ブログをスマホ時に2列並びにしたいと思っております。

初期の設定ではスワイプでしか表示できず、関連する記事を見受けられなかったためご存じの方おられましたらご教授いただけますと幸いです。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [October 21, 2022, 12:14pm UTC](https://community.shopify.com/t/dawn-2/160953/2 "2022-10-21T12:14:13Z")

</div>

十分な検証はできていないので、

何かしら不具合が出るかもしれませんが、

下記のようにすることで、

Chromeでは2列並びにできました。

ストア管理画面 \> オンラインストア \> テーマ \> 利用中のテーマの「アクション」 \> コード編集

から、

アセット(assets) の section-featured-blog.css の最終行に下記を追加します。

```css
@media screen and (max-width: 989px) {
  .blog__posts.articles-wrapper {
    flex-wrap: wrap; 
    gap: 1rem;
    padding: 0 1rem;
  }
  .blog .slider-buttons {
    display: none !important;
  }
}

@media screen and (max-width: 749px) {
  .blog__post.article {
    width: calc(50% - 0.5rem);
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: unset;
  }
}

```

もっと、

効率的な書き方もありますが、

取り急ぎ、すぐ実現できる方法を記載いたしました。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![oyaoya](https://avatars.discourse-cdn.com/v4/letter/o/f1d935/32.png) [@oyaoya](https://community.shopify.com/u/oyaoya)\
**Post date:** [October 23, 2022, 8:39am UTC](https://community.shopify.com/t/dawn-2/160953/3 "2022-10-23T08:39:46Z")

</div>

田辺 様

ご確認いただきありがとうございます。

実行したところ、うまく2列表示できました！

ご丁寧にありがとうございました。