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アカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023Shopifyの管理画面では、商品ごとや配送元のロケーション(倉庫)ごとにカスタム配送料を設定することができます。特に購入金額による送料無料設定は、顧客の購買意欲を高める効果的な手...
By Alex06 Nov 5, 2023