FROM CACHE - jp_header

liquidファイル(HTMLコード)にクラス付与

解決済

liquidファイル(HTMLコード)にクラス付与

ygtk
Shopify Partner
6 0 1
Motion有料テーマを使用しております。
 
blogのテンプレートを3つに分けており、
そのうちの1つで特定のclassを付与し、cssで独自に調整したいと思っています。

liquidファイルを見ると、「blog-posts.liquid 」という1つのファイルで、
3つのテンプレートすべてに上記のliquidファイルが適用され、特定のclassを付与することができないです。

なにか対処法ありますでしょうか?

======
■具体的な修正イメージ
blog-posts.liquid
<div class="grid grid--uniform"> に対して、
"news"のブログテンプレートにだけ、 <div class="grid grid--uniform news-grid"> のように、
classを付与したい。
======

 

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1540 550 699

成功

特定のblogを表示している時のみ、指定のクラス名を付与する場合、以下のようなコードで対応が可能です。

 

{% if blog.handle == 'news’ %}~{% endif %}

 

変更前

 

<div class="grid grid--uniform">

 

 

変更後

 

<div class="grid grid--uniform {% if blog.handle == 'news' %}news-grid{% endif %}">

 

 

Handleの部分は、実際に作成をしているbloghandleに合わせて変更をしてください。

ご参考になりましたら幸いです。

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

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1540 550 699

成功

特定のblogを表示している時のみ、指定のクラス名を付与する場合、以下のようなコードで対応が可能です。

 

{% if blog.handle == 'news’ %}~{% endif %}

 

変更前

 

<div class="grid grid--uniform">

 

 

変更後

 

<div class="grid grid--uniform {% if blog.handle == 'news' %}news-grid{% endif %}">

 

 

Handleの部分は、実際に作成をしているbloghandleに合わせて変更をしてください。

ご参考になりましたら幸いです。

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

ご回答いただきありがとうございます!

大変助かりました。