# Boundlessの商品ページのメイン画像に、余白を設けたい

**URL:** <https://community.shopify.com/t/boundless/28557>\
**Category:** 技術的なQ＆A\
**Created:** [December 17, 2020, 12:08am UTC](https://community.shopify.com/t/boundless/28557 "2020-12-17T00:08:22Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

Boundlessテーマの商品ページで、メイン画像が横幅いっぱいに表示されるため、フォームやテキストエリアのような余白を付けたいという相談。対応方法として、CSS編集で調整する案が示された。\n\n主な手順は以下の通り。\n- 検証ツールで該当クラス名を確認する（例: `.product__photo`）\n- `width: 95%; margin: 0 auto; float: none;` などを追加して、画像幅を縮めつつ中央寄せにする\n- テーマを複製後、`theme.scss.liquid` の末尾にCSSを追記してプレビュー確認する\n\n参考として、Boundlessの商品ページのサンプルURLも共有された。結論として、質問者は提示されたCSS調整で希望通りの余白を実現できたと報告しており、この件は解決済み。加えて、コード変更以外の関連サービスについても参考にする意向が示された。

<div class="post-metadata">

**Author:** ![Hiroaii](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@Hiroaii](https://community.shopify.com/u/Hiroaii)\
**Post date:** [December 17, 2020, 12:08am UTC](https://community.shopify.com/t/boundless/28557/1 "2020-12-17T00:08:22Z")

</div>

テーマはBoundlessを使用しています。

商品ページのメイン画像が横幅いっぱいで余白がない仕様になっているのですが

これを商品ページ下部のフォーム・テキストエリアと同様の余白を設けたいです。

その場合、どのようにコードを調整すれば良いでしょうか？

どなたかご教示いただけますと幸いです。

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

---

<div class="post-metadata">

**Author:** ![Diamond\_Team](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/diamond_team/32/209277_2.png) [@Diamond\_Team](https://community.shopify.com/u/Diamond_Team)\
**Post date:** [December 17, 2020, 12:45pm UTC](https://community.shopify.com/t/boundless/28557/2 "2020-12-17T12:45:12Z")

</div>

こんにちは

[https://boundless-product-page-template.myshopify.com/products/product-page-template](https://boundless-product-page-template.myshopify.com/products/product-page-template)

---

<div class="post-metadata">

**Author:** ![Anonymous\_4d9e7ed625bfa1bbc1782320693c1e6d](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_4d9e7ed625bfa1bbc1782320693c1e6d/32/312468_2.png) [@Anonymous\_4d9e7ed625bfa1bbc1782320693c1e6d](https://community.shopify.com/u/Anonymous_4d9e7ed625bfa1bbc1782320693c1e6d)\
**Post date:** [December 19, 2020, 6:28am UTC](https://community.shopify.com/t/boundless/28557/3 "2020-12-19T06:28:41Z")

</div>

メイン画像に余白を追加する際は、cssのコードを編集する必要があります。

簡単な手順をご紹介します。  
例）商品ページのメイン画像幅を95%にし、中央に寄せにする。

１．検証ツールで該当するClass名を調べる  
例）.product\_\_photo

２．そのClassにcssを追記して表示を調整する  
例）

```css
.product__photo {
    position: relative;
    width: 95%;
    margin: 0 auto;
    float: none;
}

```

３．cssをコピーする  
４．オンラインストアのテーマを複製する  
５．コードを編集する  
６．theme.scss.liquidの最終行に３でコピーしたcssを貼り付けて保存する  
７．プレビューで確認する  
８．公開するで本番適用する

以上となります。

例を参考にCSSを調整してみてください。  
宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Hiroaii](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@Hiroaii](https://community.shopify.com/u/Hiroaii)\
**Post date:** [December 21, 2020, 7:04am UTC](https://community.shopify.com/t/boundless/28557/4 "2020-12-21T07:04:52Z")

</div>

ありがとうございます！

おかげさまで思った通りの余白を設けられました。

---

<div class="post-metadata">

**Author:** ![Hiroaii](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@Hiroaii](https://community.shopify.com/u/Hiroaii)\
**Post date:** [December 21, 2020, 7:05am UTC](https://community.shopify.com/t/boundless/28557/5 "2020-12-21T07:05:36Z")

</div>

自身でコードを変更することを想定していましたが

こちらのサービスも参考にさせていただきますね。