# ブログ一覧でのサムネイル表示

**URL:** <https://community.shopify.com/t/topic/292704>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [February 5, 2024, 6:46am UTC](https://community.shopify.com/t/topic/292704 "2024-02-05T06:46:42Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

Dawn 13.0.0テーマを使用しているユーザーが、ブログ記事一覧にサムネイル画像を日付・タイトルと横並びで表示させる方法を質問。

**提供された解決策:**
- `{{ article.image | image_url: width: 300 | image_tag }}`コードを使用してサムネイル画像を表示
- 記事一覧を横並びにするためのLiquidコードとCSSコード（grid displayを使用）が提示された

**実装結果:**
質問者は提案されたコードを挿入し、デスクトップ版でも問題なく希望通りの表示を実現。

**追加の問題と解決:**
コード挿入後、ブログタイトルのリンクカラーが初期設定の青色に変わってしまう問題が発生。質問者がjournalのカスタムCSSに以下のコードを追加することで解決:
```css
a, a:hover, a:visited {
  color: inherit;
}
```

最終的に全ての問題が解決され、質問者は満足している状態で完了。

<div class="post-metadata">

**Author:** ![hoosel1328](https://avatars.discourse-cdn.com/v4/letter/h/3bc359/32.png) [@hoosel1328](https://community.shopify.com/u/hoosel1328)\
**Post date:** [February 5, 2024, 6:46am UTC](https://community.shopify.com/t/topic/292704/1 "2024-02-05T06:46:42Z")

</div>

Dawn13.0.0を使用中です。

ブログ記事のセクションで、

添付

のような記事一覧になるようコード編集をしたのですが、

欲を言えば日付・タイトルの横にサムネイルが表示されるような一覧にしたいです。

おすすめのカスタマイズ方法などありましたら、ご教示いただきたいです。

お願い致します。

 ![スクリーンショット 2024-02-05 15.36.16.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/6/d/0/6d07a631b3d49b264224709bfa0d6aba3abc000a.png)

 ![スクリーンショット 2024-02-05 15.44.50.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/1/01c4661e3931d799a88c6e4b564bee59cb3d18b7.png)

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [February 8, 2024, 5:42am UTC](https://community.shopify.com/t/topic/292704/2 "2024-02-08T05:42:03Z")

</div>

Hoosel1328様

ご質問拝見いたしました。

記事のサムネイル画像を表示させる場合、

```markup

```

を表示させたい箇所に記入いただくことで表示させることが可能です。

下記、一例ではありますが、サムネイルとタイトル、日付を横並びで表示させるコードとなります。

```markup
{%- for article in blog.articles -%}
  
    

      
        {%- if article.image != blank -%}
          
        {%- else -%}
          
        {%- endif -%}
      
    

    
      

{{ article.published_at | date: '%Y.%m.%d' }}

      

{{ article.title }}

    

  

{%- endfor -%}

```

また、画像とテキストの横並びにするCSSコードを追加いただくことで、表示を横にすることが可能です。

```css
.articleItem{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
}

@media screen and (max-width: 640px) {
  /* SP時の画像の幅 */
  .articleItem{
    grid-template-columns: 100px 1fr;
  }
}

```

一度ご確認くださいませ。  
コードの修正など専門知識が必要になりますので、  
解決が難しいようでしたら、コードを書ける方や制作会社、shopifyパートナー等にご相談、修正依頼等されることを推奨いたします。

ご参考までに。

私たちの励みにもなりますので、  
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。  
分からない点があれば、またいつでもご連絡ください。

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![hoosel1328](https://avatars.discourse-cdn.com/v4/letter/h/3bc359/32.png) [@hoosel1328](https://community.shopify.com/u/hoosel1328)\
**Post date:** [February 8, 2024, 8:48am UTC](https://community.shopify.com/t/topic/292704/3 "2024-02-08T08:48:37Z")

</div>

株式会社フルバランス 様

お世話になっております。

ご返答いただきありがとうございます。

ご提案いただいたコードを挿入してみたところ、

望んでいた通りの表示になり大変感動しております。

デスクトップ版でも問題なく綺麗に表示されております。

ご教示いただきありがとうございました。

一点、追加でのご相談なのですが、

上記2つのコード挿入後、ブログタイトルのリンクカラーが設定したカラーとは異なる

初期設定のような青色になってしまったのですが、こちらは修正可能でしょうか？

添付写真も合わせてご確認お願いいたします。

 ![スクリーンショット 2024-02-08 17.41.27.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/8/f/0/8f095a134fc616c55e1a5ea6090a81916579a8ea.jpeg)

---

<div class="post-metadata">

**Author:** ![hoosel1328](https://avatars.discourse-cdn.com/v4/letter/h/3bc359/32.png) [@hoosel1328](https://community.shopify.com/u/hoosel1328)\
**Post date:** [February 19, 2024, 2:34am UTC](https://community.shopify.com/t/topic/292704/4 "2024-02-19T02:34:24Z")

</div>

株式会社フルバランス 様

お世話になっております。

度々申し訳ありません。

先ほど、journalのカスタムCSSに下記コードを挿入したところ、

リンクカラーが元に戻りました。

大変お騒がせいたしました。

そして、ご協力いただきありがとうございました。

```css
a,a:hover,a:visited{
    color: inherit;
}

```