# パソコンとスマホで表示する画像を変えることはできますか？ **URL:** \ **Category:** Shopify テーマ\ **Created:** [October 20, 2020, 7:15am UTC](https://community.shopify.com/t/topic/23226 "2020-10-20T07:15:24Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary PC用とスマホ用で別画像を表示できるかが主題。無料テーマ「Narrative」で実現したいが、サポートからは不可と案内された一方、有料テーマ「District」ではトップ画像の出し分けが可能との情報が共有された。 回答では、CSSだけで画像の出し分けを完結させるのは不可能とされた。実現するには、まずLiquid（Shopifyテーマのテンプレート言語）を修正し、PC用・スマホ用の画像をそれぞれアップロードできる設定を追加し、その上でCSSで表示を切り替える方法が必要と説明されている。 別案として、PCでは大きい画像、スマホでは軽い画像を出したい場合は、LiquidのサイズフィルターとHTMLのタグを使う方法も提案された。これは端末や画面条件に応じて画像を出し分ける仕組み。 結論として、技術的には可能だが、無料テーマで標準対応とは限らず、対象箇所が多い場合はShopify Partnerへの依頼が現実的。テーマの探し方自体への具体的回答はまだ出ておらず、議論は継続中。
**Author:** ![koku](https://avatars.discourse-cdn.com/v4/letter/k/db5fbb/32.png) [@koku](https://community.shopify.com/u/koku)\ **Post date:** [October 20, 2020, 7:15am UTC](https://community.shopify.com/t/topic/23226/1 "2020-10-20T07:15:24Z")
パソコンとスマホとで使用する画像を分けたいと思っています。 サポートに問合わせたところ、画像の使い分けは不可能との返答がきました。 が、 自分で調べたところ、公式有料テーマの「District」ではトップ画像をPC、スマホで使い分けできることが判明しました。 そこで質問です。 １：公式無料テーマの「narrative」で、CSSなどを触ることでパソコン・スマホそれぞれに画像選択をすることは可能でしょうか？委託が可能な方がいれば、依頼できればと思っています。 不可の場合は、 ２：PC・スマホを分けて画像選択できるテーマどうやって探せば良いのか、方法があれば教えていただけませんでしょうか？ どうぞよろしくお願いします。 ---
**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\ **Post date:** [October 30, 2020, 4:11am UTC](https://community.shopify.com/t/topic/23226/2 "2020-10-30T04:11:36Z")
何の画像をどういう目的で使い分けたいのかによりますし、 色々な方法があるので一概にこれが正解とは言い難いですが。 例えば「\*\*PCでは大きな画像を出したいが、**スマホでは画面サイズに合わせて容量を抑え、 表示スピードをアップしたい」のであれば、 Liquidのサイズフィルターと、HTML5.1 の**\*\*タグで出しわけが可能です。 **fileにアップした画像を表示する場合** ```markup ``` **商品画像を表示する場合** ```markup ``` ---
**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:** [December 10, 2020, 12:23pm UTC](https://community.shopify.com/t/topic/23226/3 "2020-12-10T12:23:59Z")
1.cssだけでは不可能です 2.やり方は下記になります a.現状一枚しかない部分をPC/SPでそれぞれアップロード出来る様にします b.cssで切り替えをすることで、PC/SPの画像を切替します。 a.の変更は対象箇所が多く、Liquidの作成のご経験が無い様でしたら、Shopify Partnerに依頼をされるのが 最善かと思います。