dawnでブログ記事のサムネイルのサイズを画像比にする方法

日本語 ディスカッション 技術的なQ＆A

Topic summary

Shopifyテーマ「Dawn」のメインページにあるブログ記事セクションで、サムネイル画像を画像本来のアスペクト比（または高さ100%）に変更する方法についての質問。

解決方法:

  • featured-blog.liquidファイルを編集
  • 71行目付近のarticle-cardレンダリング部分を修正
  • media_aspect_ratio: 1.66（デフォルト値）をmedia_aspect_ratio: article.image.aspect_ratioに変更

注意点:

  • アスペクト比の変更により、他の箇所でデザイン崩れが発生する可能性がある
  • その際は適宜CSSなどで調整が必要

コードスニペットが提供されており、変更前後の具体的な記述例が示されている。

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

テーマdawnでメインページのブログ記事の

サムネイル画像のサイズを画像比、またはheight100%にする方法はありますか？？

2

こちらですが、メインページのブログ記事というのは「ブログ記事」セクションで認識あっておりますでしょうか？

こちらであれば少しコードの編集は必要になりますが、以下の方法で編集可能かと思われますので参考にしていただけますと幸いです。

ブログ記事セクションはDawnの場合ですとfeatued-blog.liquidファイルに該当しますのでこちらのファイルをコード編集から開き以下の変更を行ってみてください。

71行目から記載されている 'article-card’を以下に変更してください。

変更前に記載されている 1.66 という数値がデフォルトで設定されているサムネイル画像のアスペクト比になります。そちらの値を article.image.aspect_ratioと変更することで記事のサムネイルに設定されているアスペクト比に変更可能になります。

// 変更前
{% render 'article-card',
  blog: section.settings.blog,
  article: article,
  media_aspect_ratio: 1.66,
  show_image: section.settings.show_image,
  show_date: section.settings.show_date,
  show_author: section.settings.show_author,
  show_excerpt: true
%}

// 変更後
{% render 'article-card',
  blog: section.settings.blog,
  article: article,
  media_aspect_ratio: article.image.aspect_ratio,
  show_image: section.settings.show_image,
  show_date: section.settings.show_date,
  show_author: section.settings.show_author,
  show_excerpt: true
%}

アスペクト比の変更に合わせて他の箇所のデザイン崩れ等が起こる可能性がありますので、その際は適宜CSS等の変更を行なっていただければと思います。

参考にしていただけますと幸いです。