Liquid、JavaScriptなどに関する質問
「リッチテキスト」というブロックに対して、カスタムCSSで以下のように指定のうえ、保存すると「オンラインストアのエディセッションを公開できません」というエラーができ、保存できません。
.rich-text__blocks {
position: relative;
}
h2:before {
position: absolute;
content: "CONCEPT";
display: block;
font-size: 10rem;
opacity: 0.1;
top: -24%;
left: -5%;
}
ちなみ「content: "CONCEPT"」の記述を削除して保存すると保存できません。このcontentというプロパティを追加する瞬間に保存できません。
こちらはエラーでしょうか?
興味があり調査してみました。
おっしゃる通り、
contentが入っているとエラーが出て保存できませんね。
海外のコミュニティでも、同様の事象が報告されていました。
どうやら、contentが含まれる以外でもいくつか保存できないケースがあるようです。
上記投稿の最後の返信に回避策が紹介されていました。
リッチテキストのカスタムCSSを使用するのではなく、
カスタムliquidセクションを使って、
その中に、<sytle></sytle>でスタイルを書き、
カスタムliquid自体は余白を0にしてしまう、
という方法です。
カスタムCSSのエラーについては、
何らかのvalidationにおけるバグであるように思いますので、
Shopifyにお問い合わせいただき、
回答がない、もしくは対応できないという回答がある場合は、
カスタムliquidを使用するのが良いかもしれません。
ご参考まで。
(キュー田辺)
Qcoltd 様
早速ご回答いただきありがとうございます。
カスタムLiquidでCSSを入れ込むのはいいアイディアですね!
ただ特定のブロックだけに(今回の場合、特定のリッチテキストだけに)CSSを追加したいのですが、カスタムLiquidでCSSを記述する場合は、対象のブロック全てに適用されてしまいますよね?
@K_S4 様
そうですね、そのままCSSを記載してしまうと、
合致する全ての要素とCSS Classに適用されてしまいますね。
お使いのテーマにもよりますが、
例えばDawnの場合ですが、
リッチテキストのようなセクションには、
下記のようにセクションごとにユニークなCSS classが付与されます。
section-template--16074829267108__47a3cad5-6b52-490a-9d29-8454023cbc1a-padding
ですので、
そのセクションにだけCSSを利かせたい場合は、
例えば下記のようにします。
.section-template--16074829267108__47a3cad5-6b52-490a-9d29-8454023cbc1a-padding .rich-text__blocks {
position: relative;
}
.section-template--16074829267108__47a3cad5-6b52-490a-9d29-8454023cbc1a-padding h2:before {
position: absolute;
content: "CONCEPT";
display: block;
font-size: 10rem;
opacity: 0.1;
top: -24%;
left: -5%;
}
ブラウザのデベロッパーツールで、検査することで、
対象のDOM(セクション)がどのようなCSS Classを持っているかを調べることができます。
ご参考まで。
(キュー田辺)
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025