FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

テーマ「Dawn」でh1のフォントサイズを小さくしたい

解決済

テーマ「Dawn」でh1のフォントサイズを小さくしたい

con1
訪問者
2 0 1

初心者が失礼いたします

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);
}
}

 

 

 

 

 

1 件の受理された解決策

株式会社ナレッジサービス
Shopify Partner
68 29 27

成功

①ページタイトルは、以下のコードの数値を下げると、反映されると思います。

 

.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);
  }
}

 

元の投稿で解決策を見る

2件の返信2

株式会社ナレッジサービス
Shopify Partner
68 29 27

成功

①ページタイトルは、以下のコードの数値を下げると、反映されると思います。

 

.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);
  }
}

 

con1
訪問者
2 0 1

返信を失念しており失礼いたしました!

大変助かりました。ありがとうございます!!