# 一部商品ページの画像に余白ができてしまう

**URL:** <https://community.shopify.com/t/topic/396117>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [February 21, 2025, 2:49am UTC](https://community.shopify.com/t/topic/396117 "2025-02-21T02:49:51Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

**問題:** 一部の商品ページでサムネイル画像に不要な余白が発生。スマホ表示のみで発生し、商品によって余白の幅が異なる。

**原因の特定:**
- 質問者は当初、全画像が同じサイズと回答
- 回答者が具体的な商品ページを確認した結果、レビューのスクリーンショット画像が他より縦に長いことを発見
- 画像の高さが最も長い画像に合わせられるため、他の画像に上下余白が生じていた

**解決:**
- 該当する縦長画像を削除することで問題解決
- 質問者は他の該当商品ページも見直す予定

**状態:** 解決済み

<div class="post-metadata">

**Author:** ![Rl4](https://avatars.discourse-cdn.com/v4/letter/r/db5fbb/32.png) [@Rl4](https://community.shopify.com/u/Rl4)\
**Post date:** [February 21, 2025, 2:49am UTC](https://community.shopify.com/t/topic/396117/1 "2025-02-21T02:49:51Z")

</div>

一部の商品ページのサムネイル画像部分に、赤枠で囲った要らない余白ができてしまいます。

余白のできてしまっている商品とできていない商品、余白の幅が広い商品と少しだけ余白のできてしまっている商品があります。

原因が分かりません。

不要な余白を無くす方法が分かりましたら

ぜひ教えていただきたいです。

 ![S__25026592_0.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/2/b23715685849f32d7644043be18f1725adf50d82.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 21, 2025, 4:14am UTC](https://community.shopify.com/t/topic/396117/2 "2025-02-21T04:14:52Z")

</div>

質問拝見しました。

こちらの件に関して、画像のサイズは全て同じでしょうか。

もしくはその商品による何か違いなどはありますでしょうか？

いただいている情報だけでは特定が難しいのでよろしければプレビューリンクと商品名を教えていただけましたら何かわかるかもしれないので共有板だ変えますと幸いです。

ご確認よろしくお願いいたします！

---

<div class="post-metadata">

**Author:** ![Rl4](https://avatars.discourse-cdn.com/v4/letter/r/db5fbb/32.png) [@Rl4](https://community.shopify.com/u/Rl4)\
**Post date:** [February 21, 2025, 8:24am UTC](https://community.shopify.com/t/topic/396117/3 "2025-02-21T08:24:44Z")

</div>

ご返信くださり有難うございます！

画像サイズは全て同じです。また、スマホで見た場合のみ余白があります。

＜例＞  
[https://roloshop-official.com/products/r118](https://roloshop-official.com/products/r118)  
スティックパールピアス  
[https://roloshop-official.com/products/r109](https://roloshop-official.com/products/r109)  
CZ 4mmスタッドピアス

---

<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:** [February 23, 2025, 8:05am UTC](https://community.shopify.com/t/topic/396117/4 "2025-02-23T08:05:22Z")

</div>

「スティックパールピアス」の商品画像にお客様のレビューのスクリーンショットが貼られていて、その画像だけ他の画像より縦に長いようです。その画像に高さを合わせているため、他の画像では上下に余白ができていると思われます。

---

<div class="post-metadata">

**Author:** ![Rl4](https://avatars.discourse-cdn.com/v4/letter/r/db5fbb/32.png) [@Rl4](https://community.shopify.com/u/Rl4)\
**Post date:** [February 23, 2025, 8:26am UTC](https://community.shopify.com/t/topic/396117/5 "2025-02-23T08:26:20Z")

</div>

ご返信くださり有難うございます。

該当画像部分を削除したところ、スマホ画面の状態が元に戻りました。

先のご質問回答に画像サイズは同じと返してしまいましたが、気が付きませんでした。

他の該当商品ページも見直してみます。  
この度は大変助かりました。本当に有難うございます。
