# 記事のサムネイル 画像大きさについて

**URL:** <https://community.shopify.com/t/topic/299749>\
**Category:** 技術的なQ＆A\
**Created:** [February 26, 2024, 11:57am UTC](https://community.shopify.com/t/topic/299749 "2024-02-26T11:57:10Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

ブログ記事のサムネイル画像が携帯画面で切り取られて正しく表示されない問題について質問が投稿されました。

**原因の特定：**
- サイトのCSSで画像の最低高さ（min-height: 530px）が固定されており、画像が拡大表示されていることが原因と判明。

**提案された解決策：**
- CSSコードの修正により改善可能
- `.article-template .featured-image img` の `min-height` を `auto !important` に変更
- カスタマイズのテーマから、ブログ記事のLiquidファイル（main-article.liquid）またはCSSファイルに適用
- HTMLへの直接入力も可能

**現状：**
質問者はコード編集の初心者で、修正コードの具体的な適用場所が分からず、main-article.liquid内で該当コードを見つけられていない状態。より具体的な修正手順の説明を求めています。

<div class="post-metadata">

**Author:** ![Hiromi0806](https://avatars.discourse-cdn.com/v4/letter/h/bc79bd/32.png) [@Hiromi0806](https://community.shopify.com/u/Hiromi0806)\
**Post date:** [February 26, 2024, 11:57am UTC](https://community.shopify.com/t/topic/299749/1 "2024-02-26T11:57:10Z")

</div>

お世話になります。  
ブログ記事を書いていますが、記事のサムネイルの適切な画像の大きさがわかりません。

各ブログのページにいくと、登録したサムネイル画像が表示されます。携帯画面ですと切り取られてしまっているためきちんと表示させることができません。URL [https://x.gd/7ci7v](https://x.gd/7ci7v)

添付画像が携帯画面です

どなたか教えていただけないでしょうか。

よろしくお願いいたします。

 ![IMG_5507.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/1/91bfe96a6d06e816f0e307c589e0bdcfde945f2e.jpeg)

---

<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 27, 2024, 12:51am UTC](https://community.shopify.com/t/topic/299749/2 "2024-02-27T00:51:59Z")

</div>

質問拝見しました。

こちらサイト確認したところ、画像の最低の高さが固定で入っており、画像が拡大されておりましたことが原因です。

cssを書き換えることによって改善可能です。

必要なCSSを下記に共有しますのでご参考までにお試しください。

修正前

```markup
.article-template .featured-image img{
min-height:530px;
}

```

修正後

```markup
.article-template.featured-image img{
min-height:auto!important;
}

```

このコードをテーマのカスタマイズからコード編集でブログ記事のliquidファイル(main-article.liquid)、もしくは固有のcssファイルにて適用していただければ解決するかと思います。

もしくは各ブログ記事のHTMLに直接入れる方法もあります

お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。  
何卒よろしくお願いします。

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![Hiromi0806](https://avatars.discourse-cdn.com/v4/letter/h/bc79bd/32.png) [@Hiromi0806](https://community.shopify.com/u/Hiromi0806)\
**Post date:** [February 27, 2024, 10:10am UTC](https://community.shopify.com/t/topic/299749/3 "2024-02-27T10:10:55Z")

</div>

株式会社フルバランス様

ご返信いただきありがとうございます。  
当方コード編集全く初心者のため、設定することができませんでした。

main-article.liquid内を探しているのですが、修正前のコードが見当たりません。  
大変恐れ入りますが具体的にどこを修正したら良いのか、教えていただけないでしょうか？