# トップページのメインビジュアルをスマホサイズの時は別画像を表示させたい

**URL:** <https://community.shopify.com/t/topic/198169>\
**Category:** 技術的なQ＆A\
**Created:** [March 9, 2023, 5:51am UTC](https://community.shopify.com/t/topic/198169 "2023-03-09T05:51:50Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

PCサイズとスマホサイズで異なるメインビジュアル画像を表示させたいという質問が投稿されました。

**質問内容:**
- レスポンシブ対応で、デバイスサイズに応じて別々の画像を出し分けたい
- 特にスマホ表示時は縦長にクロップされた画像や文字入り画像を使用したい

**回答:**
フルバランスの園畑氏から以下の提案がありました:
- HTML、CSS、Liquidコードを使った実装方法が存在する
- 参考となるQiitaページのリンクが提供された(https://qiita.com/br-to/items/...)
- テーマによって実装方法が若干異なる可能性がある

**状況:**
具体的な実装手順の詳細は参考リンク先に委ねられており、質問者が実装を試す段階で議論は継続中と思われます。

<div class="post-metadata">

**Author:** ![mongorian346](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mongorian346/32/111736_2.png) [@mongorian346](https://community.shopify.com/u/mongorian346)\
**Post date:** [March 9, 2023, 5:51am UTC](https://community.shopify.com/t/topic/198169/1 "2023-03-09T05:51:50Z")

</div>

PCサイズで表示されるメインビジュアルの画像とSPサイズで表示される画像を別のものにしたいです。

レスポンシブ対応でcssで縦長にクロップすればよかったのですが、画像に文字が入ってるので、スマホの時はスマホように加工した画像を使いたいです。

---

<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:** [March 10, 2023, 8:56am UTC](https://community.shopify.com/t/topic/198169/2 "2023-03-10T08:56:11Z")

</div>

Mongorian346様

はじめまして、フルバランスの園畑です。

ご質問を確認いたしました。

PCとスマホで表示する画像を出し分けたい、とのことですが

html、css、liquidのコードで実装する方法がございます。

下記ページが参考になるかと存じます。

[https://qiita.com/br-to/items/ed3253bcae8db0fad398](https://qiita.com/br-to/items/ed3253bcae8db0fad398)

テーマによって実装方法が少しずつ異なりますが、

検索されましたら参考となるページはいくつかあるので、ぜひ試してみていただけますと幸いです。

ご参考までに。

フルバランス 園畑