FROM CACHE - jp_header

Re: テーマ「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
50 21 23

成功

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

 

.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
50 21 23

成功

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

 

.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

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

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