Shopify テーマ、Liquid、ロゴ、その他の類似トピック
パソコンとスマホとで使用する画像を分けたいと思っています。
サポートに問合わせたところ、画像の使い分けは不可能との返答がきました。
が、
自分で調べたところ、公式有料テーマの「District」ではトップ画像をPC、スマホで使い分けできることが判明しました。
そこで質問です。
1:公式無料テーマの「narrative」で、CSSなどを触ることでパソコン・スマホそれぞれに画像選択をすることは可能でしょうか?委託が可能な方がいれば、依頼できればと思っています。
不可の場合は、
2:PC・スマホを分けて画像選択できるテーマどうやって探せば良いのか、方法があれば教えていただけませんでしょうか?
どうぞよろしくお願いします。
解決済! ベストソリューションを見る。
成功
何の画像をどういう目的で使い分けたいのかによりますし、
色々な方法があるので一概にこれが正解とは言い難いですが。
例えば「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>
成功
何の画像をどういう目的で使い分けたいのかによりますし、
色々な方法があるので一概にこれが正解とは言い難いですが。
例えば「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>
1.cssだけでは不可能です
2.やり方は下記になります
a.現状一枚しかない部分をPC/SPでそれぞれアップロード出来る様にします
b.cssで切り替えをすることで、PC/SPの画像を切替します。
a.の変更は対象箇所が多く、Liquidの作成のご経験が無い様でしたら、Shopify Partnerに依頼をされるのが
最善かと思います。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024