# Dawnテーマへのニュース追加について

**URL:** <https://community.shopify.com/t/dawn/88824>\
**Category:** Shopify テーマ\
**Created:** [January 5, 2022, 1:49am UTC](https://community.shopify.com/t/dawn/88824 "2022-01-05T01:49:02Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

DawnテーマでECサイトを制作中、トップ等に「ニュース（新着情報）」一覧セクションを追加したい相談。

- 実施内容: Liquidでブログ（blogs[section.settings.news_list]）から記事を取得し、日付・タグ（カテゴリー）・タイトルを表示するカスタムセクションコードを作成。schemaで表示件数や日付/カテゴリー表示のON/OFFも設定可能にしている。
- 課題: 添付スクリーンショットのようにデザイン性を高めたいが、どのCSSをどこから編集すべきか分からない。
- 回答/進展: 「Assetsフォルダのbase.cssに記述すれば反映される」と案内があり、投稿者は編集の入り口は把握。
- 未解決点: DawnのCSS編集経験がなく、base.cssのどの箇所にどんな記述を追加すれば狙いの見た目になるか具体的な指針が不足しており、相談は継続中。

<div class="post-metadata">

**Author:** ![and0912](https://avatars.discourse-cdn.com/v4/letter/a/ba8739/32.png) [@and0912](https://community.shopify.com/u/and0912)\
**Post date:** [January 5, 2022, 1:49am UTC](https://community.shopify.com/t/dawn/88824/1 "2022-01-05T01:49:02Z")

</div>

[email removed]

お世話になります

Dawnテーマを使用してECサイトを作成しています

ニュース（新着情報）の項目を追加したく、以下のコードで追加しました

↓

{%- assign blog = blogs[section.settings.news\_list] -%}

## {{ section.settings.title | escape }}
一覧を見る

{% for article in blog.articles limit: section.settings.post\_limit %}-  
{% if section.settings.news\_list\_date %} {{ article.published\_at | date: "%Y ⁄ %m ⁄ %d" }} {% endif %} {% if section.settings.news\_list\_category %} {{ article.tags }} {% endif %}
 
{{ article.title }}
 
{% endfor %}

{% schema %}  
{  
“name”: “お知らせ一覧”,  
“settings”: [  
{  
“id”: “title”,  
“type”: “text”,  
“label”: “見出し”,  
“default”: “お知らせ一覧”  
},  
{  
“id”: “news\_list”,  
“type”: “blog”,  
“label”: “表示するブログ記事を選択”  
},  
{  
“id”: “post\_limit”,  
“type”: “range”,  
“label”: “表示数を選択”,  
“min”: 1,  
“max”: 6,  
“step”: 1,  
“default”: 3  
},  
{  
“id”: “news\_list\_date”,  
“type”: “checkbox”,  
“label”: “日付を表示する”,  
“default”: true  
},  
{  
“id”: “news\_list\_category”,  
“type”: “checkbox”,  
“label”: “カテゴリーを表示する”,  
“default”: true  
}  
],  
“presets”: [  
{  
“name”: “お知らせ一覧”,  
“category”: “お知らせ一覧”  
}  
]  
}  
{% endschema %}

{% stylesheet %}  
#section-news-list .news-list-heading{  
display: flex;  
justify-content: space-between;  
align-items: center;  
margin-bottom: 5px;  
}  
#section-news-list .container{  
max-width: 1200px;  
margin: 0 auto;  
padding: 55px;  
}  
#section-news-list .news-list{  
border: 1px solid #ccc;  
}  
#section-news-list .news-list-item{  
border-bottom: 1px solid #ccc;  
}  
#section-news-list .news-list-item\>a{  
display: flex;  
align-items: center;  
padding: 20px;  
}  
#section-news-list .news-list-item:last-child{  
border-bottom: none;  
}  
#section-news-list .news-list-date{  
font-size: 12px;  
margin-right: 15px;  
}  
#section-news-list .news-list-category{  
font-size: 10px;  
color: #fff;  
background: #000;  
padding: 5px;  
margin-right: 15px;  
}  
#section-news-list .news-list-info{  
position: relative;  
top: -1px;  
}  
#section-news-list .news-list-title{  
font-size: 14px;  
margin-bottom: 0;  
text-overflow: ellipsis;  
white-space: nowrap;  
overflow: hidden;  
position: relative;  
top: 1px;  
}  
@media screen and (max-width: 768px){  
#section-news-list .container{  
padding: 35px 20px;  
}  
#section-news-list .news-list-item\>a{  
display: block;  
padding: 15px;  
}  
#section-news-list .news-list-info{  
margin-bottom: 5px;  
}  
}  
{% endstylesheet %}

{% javascript %}  
{% endjavascript %}

デザイン性を高めるために、下記のような仕様にしたいのですが、cssはどこからさわれば良いのでしょうか？

↓

 ![スクリーンショット 2022-01-05 10.45.50.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/5/d/0/5d0305b1865bd255a27b4d5cfde4551a19419dd9.png)

ご指導のほどよろしくお願いいたします

---

<div class="post-metadata">

**Author:** ![Anonymous\_5168086324d6fa4637c896de39bb248c](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_5168086324d6fa4637c896de39bb248c/32/28647_2.png) [@Anonymous\_5168086324d6fa4637c896de39bb248c](https://community.shopify.com/u/Anonymous_5168086324d6fa4637c896de39bb248c)\
**Post date:** [January 5, 2022, 11:20pm UTC](https://community.shopify.com/t/dawn/88824/2 "2022-01-05T23:20:58Z")

</div>

Assetsフォルダ内にあるbase.cssに記述すれば反映されると思います。

---

<div class="post-metadata">

**Author:** ![and0912](https://avatars.discourse-cdn.com/v4/letter/a/ba8739/32.png) [@and0912](https://community.shopify.com/u/and0912)\
**Post date:** [January 6, 2022, 3:37am UTC](https://community.shopify.com/t/dawn/88824/3 "2022-01-06T03:37:16Z")

</div>

ありがとうございます、入り口見つけられました

とはいえ、Dawnテーマでのcss編集をしたことがないので、イメージと異なるデザイン仕様になってしまい、base.cssのどの箇所にどんな記述をすればいいかがわからずに調べている現状です

これ以上はご質問の域を超えてしまうかもしれませんが、もし可能な範囲でご教示くださいますと幸いです