Liquid、JavaScriptなどに関する質問
初心者が失礼いたします
DawnのProductsのデフォルトテーマを使用しているのですが
以下が日本語だとでかすぎるため小さくしたいです。
①ページタイトル <h1 class="main-page-title page-title h0"></h1>
②商品タイトル <h1 class="product__title"></h1>
テーマ設定のタイポグラフィーでは大きくすることはできても小さくできず悩んでいます。
なんとなくbase.cssの以下数値を下げてみましたが、プレビューしても反映されておらず。
どなたかご教示いただけますと幸いです
h1,
.h1 {
font-size: calc(var(--font-heading-scale) * 3rem);
}
@media only screen and (min-width: 750px) {
h1,
.h1 {
font-size: calc(var(--font-heading-scale) * 4rem);
}
}
解決済! ベストソリューションを見る。
成功
①ページタイトルは、以下のコードの数値を下げると、反映されると思います。
.h0 {
font-size: calc(var(--font-heading-scale) * 4rem);
}
@media only screen and (min-width: 750px) {
.h0 {
font-size: calc(var(--font-heading-scale) * 5.2rem);
}
}
②商品タイトルは、質問に記載されている数値の調整で問題なくできるはずです。もしできなければ、以下のようにクラス名を指定したコードをbase.cssに追記して調整してみてください。
.product__title {
font-size: calc(var(--font-heading-scale) * 3rem);
}
@media only screen and (min-width: 750px) {
.product__title{
font-size: calc(var(--font-heading-scale) * 4rem);
}
}
成功
①ページタイトルは、以下のコードの数値を下げると、反映されると思います。
.h0 {
font-size: calc(var(--font-heading-scale) * 4rem);
}
@media only screen and (min-width: 750px) {
.h0 {
font-size: calc(var(--font-heading-scale) * 5.2rem);
}
}
②商品タイトルは、質問に記載されている数値の調整で問題なくできるはずです。もしできなければ、以下のようにクラス名を指定したコードをbase.cssに追記して調整してみてください。
.product__title {
font-size: calc(var(--font-heading-scale) * 3rem);
}
@media only screen and (min-width: 750px) {
.product__title{
font-size: calc(var(--font-heading-scale) * 4rem);
}
}
返信を失念しており失礼いたしました!
大変助かりました。ありがとうございます!!
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024