[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はどこからさわれば良いのでしょうか？
↓
ご指導のほどよろしくお願いいたします