Liquid、JavaScriptなどに関する質問
成功
その場合はCSSのメディアクエリで操作するのが一般的ですね。
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries
例えばこんな感じのCSSとHTMLを書けば、画面幅に応じてコンテンツが変わります。
.content {
display: none;
}
@media screen and (max-width: 559px) {
.content.mobile {
display: block;
}
}
@media screen and (min-width: 560px) and (max-width: 959px){
.content.tablet {
display: block;
}
}
@media screen and (min-width: 960px) {
.content.desktop {
display: block;
}
}
<div class="content mobile"><!-- モバイル用コンテンツのHTML --></div>
<div class="content tablet"><!-- タブレット用コンテンツ --></div>
<div class="content desktop"><!-- デスクトップ用コンテンツ --></div>
クラス名や画面幅の指定はお好みで編集してください。
Liquidを使いたい場合は上記CSSに加え、Snippetsに「responsive.liquid」を作成しcase/whenを使ってそれぞれのHTMLを書きます。
{% case responsive %}
{% when 'mobile' %}
<!-- モバイル用コンテンツのHTML -->
{% when 'tablet' %}
<!-- タブレット用コンテンツ -->
{% when 'desktop' %}
<!-- デスクトップ用コンテンツ -->
{% endcase %}
そして出力したい位置に 以下のようなHTMLを挿入し、それぞれのソースを出力します。
<div class="content mobile">{% render 'responsive' with 'mobile' %}</div>
<div class="content tablet">{% render 'responsive' with 'tablet' %}</div>
<div class="content desktop">{% render 'responsive' with 'desktop' %}</div>
Javascriptを使ったif分岐とかもできるかもしれませんが、この方法が最も簡単だと思います。
成功
その場合はCSSのメディアクエリで操作するのが一般的ですね。
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries
例えばこんな感じのCSSとHTMLを書けば、画面幅に応じてコンテンツが変わります。
.content {
display: none;
}
@media screen and (max-width: 559px) {
.content.mobile {
display: block;
}
}
@media screen and (min-width: 560px) and (max-width: 959px){
.content.tablet {
display: block;
}
}
@media screen and (min-width: 960px) {
.content.desktop {
display: block;
}
}
<div class="content mobile"><!-- モバイル用コンテンツのHTML --></div>
<div class="content tablet"><!-- タブレット用コンテンツ --></div>
<div class="content desktop"><!-- デスクトップ用コンテンツ --></div>
クラス名や画面幅の指定はお好みで編集してください。
Liquidを使いたい場合は上記CSSに加え、Snippetsに「responsive.liquid」を作成しcase/whenを使ってそれぞれのHTMLを書きます。
{% case responsive %}
{% when 'mobile' %}
<!-- モバイル用コンテンツのHTML -->
{% when 'tablet' %}
<!-- タブレット用コンテンツ -->
{% when 'desktop' %}
<!-- デスクトップ用コンテンツ -->
{% endcase %}
そして出力したい位置に 以下のようなHTMLを挿入し、それぞれのソースを出力します。
<div class="content mobile">{% render 'responsive' with 'mobile' %}</div>
<div class="content tablet">{% render 'responsive' with 'tablet' %}</div>
<div class="content desktop">{% render 'responsive' with 'desktop' %}</div>
Javascriptを使ったif分岐とかもできるかもしれませんが、この方法が最も簡単だと思います。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024