# 【Dawn】バナーを横並びにしたい

**URL:** <https://community.shopify.com/t/dawn/264044>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [October 31, 2023, 7:41am UTC](https://community.shopify.com/t/dawn/264044 "2023-10-31T07:41:22Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

**課題:** Dawnテーマでバナーが縦並びになっているものを、PCでは2行2列のグリッド表示に、SPでは縦並びのままにしたい。CSSの記述方法が分からず困っている。

**解決策:** ファイブビット社の福水氏が回答を提供。

- Liquidファイルのバナー部分を `<div class="pc_2column">` で囲む構造に変更
- CSSで以下を実装:
  - PC表示（769px以上）: `display: flex` + `flex-wrap: wrap` で2列レイアウト
  - 各バナーの幅を49.5%に設定
  - SP表示（768px以下）: 縦並びを維持

**結果:** 質問者が提案されたコードを実装し、想定通りのデザインになったことを報告。問題は解決済み。

<div class="post-metadata">

**Author:** ![w\_konori](https://avatars.discourse-cdn.com/v4/letter/w/ee59a6/32.png) [@w\_konori](https://community.shopify.com/u/w_konori)\
**Post date:** [October 31, 2023, 7:41am UTC](https://community.shopify.com/t/dawn/264044/1 "2023-10-31T07:41:22Z")

</div>

現在縦並びになっているバナーを、PCでは２行２列の並びに、SPでは縦並びのままにしたいですが、CSSの記述方法やその他で必要な設定が分からず大変困っております。

お分かりになる方がいらっしゃいましたら、ご教授頂きたくお願い致します。

初めての質問なので内容に不足がありましたら申し訳ございません。

現在のliquidファイルは下記の通りです。

{% for block in section.blocks %}  
  
  ![{{ block.settings.image_box.alt }}]()  
   
{% endfor %}

{% schema %}  
{  
“name”: “画像ボックス”,  
“blocks”: [  
{  
“type”: “image”,  
“name”: “画像block”,  
“settings”: [  
{  
“type”: “image\_picker”,  
“id”: “image\_box”,  
“label”: “画像を選ぶ”  
},  
{  
“type”: “url”,  
“id”: “link”,  
“label”: “URL”  
}  
]  
}  
],

“presets”: [  
{  
“name”: “イメージボックス”,  
“category”: “画像”  
}  
]  
}  
{% endschema %}

{% stylesheet %}  
{% endstylesheet %}

{% javascript %}  
{% endjavascript %}

---

<div class="post-metadata">

**Author:** ![Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_3b9a8e857ec4e2560bc009f074375383/32/279353_2.png) [@Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://community.shopify.com/u/Anonymous_3b9a8e857ec4e2560bc009f074375383)\
**Post date:** [November 1, 2023, 1:37am UTC](https://community.shopify.com/t/dawn/264044/2 "2023-11-01T01:37:57Z")

</div>

はじめまして。

株式会社ファイブビットの福水と申します。

メモ帳でもなんでもいいので、バックアップを必ず撮った上で、上記のコードを下記のように書き換えてみてください。

```ruby

{% for block in section.blocks %}

{% endfor %}

{% schema %}
{
"name": "画像ボックス",
"blocks": [
{
"type": "image",
"name": "画像block",
"settings": [
{
"type": "image_picker",
"id": "image_box",
"label": "画像を選ぶ"
},
{
"type": "url",
"id": "link",
"label": "URL"
}
]
}
],

"presets": [
{
"name": "イメージボックス",
"category": "画像"
}
]
}
{% endschema %}

{% javascript %}
{% endjavascript %}

```

もし意図した表示にならなかった場合は、スクショなどでその時の画面の状態を共有していただけると嬉しいです。

---

<div class="post-metadata">

**Author:** ![w\_konori](https://avatars.discourse-cdn.com/v4/letter/w/ee59a6/32.png) [@w\_konori](https://community.shopify.com/u/w_konori)\
**Post date:** [November 3, 2023, 4:32am UTC](https://community.shopify.com/t/dawn/264044/3 "2023-11-03T04:32:53Z")

</div>

ご教授いただき、ありがとうございます！  
教えていただいたコードに書き換え、内を下記の通り調整したところ想定したデザインになりました。

@media screen and (min-width: 769px) { .pc\_2column { display: flex; justify-content: space-between; flex-wrap: wrap; } .pc\_2column a { display: block; width: 49.5%; } .pc\_2column a img { width: 100%; height: auto; } } @media screen and (max-width: 768px) { .pc\_2column { display: flex; justify-content: center; flex-wrap: wrap; } .pc\_2column a { display: block; width: 100%; } .pc\_2column a img { width: 100%; height: auto; } }