FROM CACHE - jp_header
解決済

画面幅に応じて条件分岐をしたい

salmon
新規メンバー
5 0 0

liquidで画面幅を取得してifで画面幅によって出力を切り替えることって可能ですか?

また、どうすればできるかご教授いただけますと幸いです。

1 件の受理された解決策

mrtc
Shopify Partner
47 20 27

成功

その場合は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分岐とかもできるかもしれませんが、この方法が最も簡単だと思います。

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。

元の投稿で解決策を見る

1件の返信1

mrtc
Shopify Partner
47 20 27

成功

その場合は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分岐とかもできるかもしれませんが、この方法が最も簡単だと思います。

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。