FROM CACHE - jp_header
解決済

パソコンとスマホで表示する画像を変えることはできますか?

koku
訪問者
2 0 0

パソコンとスマホとで使用する画像を分けたいと思っています。

サポートに問合わせたところ、画像の使い分けは不可能との返答がきました。

が、

自分で調べたところ、公式有料テーマの「District」ではトップ画像をPC、スマホで使い分けできることが判明しました。

そこで質問です。

1:公式無料テーマの「narrative」で、CSSなどを触ることでパソコン・スマホそれぞれに画像選択をすることは可能でしょうか?委託が可能な方がいれば、依頼できればと思っています。

不可の場合は、
2:PC・スマホを分けて画像選択できるテーマどうやって探せば良いのか、方法があれば教えていただけませんでしょうか?

どうぞよろしくお願いします。

1 件の受理された解決策

_osamu_iwasaki_
Shopify Partner
185 47 193

成功

何の画像をどういう目的で使い分けたいのかによりますし、
色々な方法があるので一概にこれが正解とは言い難いですが。


例えば「PCでは大きな画像を出したいが、スマホでは画面サイズに合わせて容量を抑え、
表示スピードをアップしたい」のであれば、
Liquidのサイズフィルターと、HTML5.1 の<picture><source>タグで出しわけが可能です。

 

fileにアップした画像を表示する場合

<picture>
  <source media="(min-width: 768px)" srcset="{{ 'image.png' | file_img_url: '2000x' }}">
  <source media="(min-width: 321px)" srcset="{{ 'image.png' | file_img_url: '642x' }}">
  <img src="{{ 'image.png' | file_img_url: '1x' }}">
</picture>

 

商品画像を表示する場合

<picture>
  <source media="(min-width: 768px)" srcset="{{ product.featured_image | img_url: '2000x' }}">
  <source media="(min-width: 321px)" srcset="{{ product.featured_image | img_url: '642x' }}">
  <img src="{{ product.featured_image | img_url: '1x' }}">
</picture>

 

元の投稿で解決策を見る

2件の返信2

_osamu_iwasaki_
Shopify Partner
185 47 193

成功

何の画像をどういう目的で使い分けたいのかによりますし、
色々な方法があるので一概にこれが正解とは言い難いですが。


例えば「PCでは大きな画像を出したいが、スマホでは画面サイズに合わせて容量を抑え、
表示スピードをアップしたい」のであれば、
Liquidのサイズフィルターと、HTML5.1 の<picture><source>タグで出しわけが可能です。

 

fileにアップした画像を表示する場合

<picture>
  <source media="(min-width: 768px)" srcset="{{ 'image.png' | file_img_url: '2000x' }}">
  <source media="(min-width: 321px)" srcset="{{ 'image.png' | file_img_url: '642x' }}">
  <img src="{{ 'image.png' | file_img_url: '1x' }}">
</picture>

 

商品画像を表示する場合

<picture>
  <source media="(min-width: 768px)" srcset="{{ product.featured_image | img_url: '2000x' }}">
  <source media="(min-width: 321px)" srcset="{{ product.featured_image | img_url: '642x' }}">
  <img src="{{ product.featured_image | img_url: '1x' }}">
</picture>

 

株式会社フルバランス
Shopify Partner
1441 504 644

1.cssだけでは不可能です

2.やり方は下記になります

a.現状一枚しかない部分をPC/SPでそれぞれアップロード出来る様にします

b.cssで切り替えをすることで、PC/SPの画像を切替します。

a.の変更は対象箇所が多く、Liquidの作成のご経験が無い様でしたら、Shopify Partnerに依頼をされるのが

最善かと思います。

 

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス