FROM CACHE - jp_header
解決済

テーマ「Dawn」で商品ページの商品タイトルの文字サイズを変更したい。

ff_dog
観光客
7 0 1

はじめまして、ff_dogと申します。

現在、shopifyで「テーマ」Dawnにて店舗を作成してます。

タイトルの通り、商品ページの商品タイトルの文字サイズを変更(デフォルトから小さく)したいのですが

main-product.liquidのどの部分をどのように編集したらよいかご教授頂けないでしょうか。

 

宜しくお願い致します。

1 件の受理された解決策

koji_matsumoto
Shopify Partner
31 18 28

成功

@ff_dog 様

 

内容確認いたしました。

main-product.liquidの12.14行目の間に(特にここでないとダメということはないです)下記コードを入れていただければ良いかと思います。

<style>
  h1 {font-size: calc(var(--font-heading-scale) * 2.5rem)}
  @media only screen and (min-width: 750px){
    h1 {font-size: calc(var(--font-heading-scale) * 3.5rem)}
  }
</style>

意味合いとしては、2.5となっているのがモバイルの大きさ(もともと3でしたので一旦2.5としています)

3.5となっているのがPC(厳密には750px以上の場合)の大きさ(もともと4でしたので、3.5としています)

 

モバイル 3倍 → 2.5倍

PC    4倍 → 3.5倍

※倍というのは、themeのベースフォントスケールを軸に何倍の表示にするのか、という意味合いです。

 

上記にて仮コードを組んでますので、大きさ変えたい場合は数値のところを変えていただくと調整できます。

固定のピクセルで設定するなどもOKです。

コード記載イメージ画像も添付いたします。

ご参考になれば幸いです。

スクリーンショット 2022-02-24 16.44.04.png

元の投稿で解決策を見る

5件の返信5

koji_matsumoto
Shopify Partner
31 18 28

成功

@ff_dog 様

 

内容確認いたしました。

main-product.liquidの12.14行目の間に(特にここでないとダメということはないです)下記コードを入れていただければ良いかと思います。

<style>
  h1 {font-size: calc(var(--font-heading-scale) * 2.5rem)}
  @media only screen and (min-width: 750px){
    h1 {font-size: calc(var(--font-heading-scale) * 3.5rem)}
  }
</style>

意味合いとしては、2.5となっているのがモバイルの大きさ(もともと3でしたので一旦2.5としています)

3.5となっているのがPC(厳密には750px以上の場合)の大きさ(もともと4でしたので、3.5としています)

 

モバイル 3倍 → 2.5倍

PC    4倍 → 3.5倍

※倍というのは、themeのベースフォントスケールを軸に何倍の表示にするのか、という意味合いです。

 

上記にて仮コードを組んでますので、大きさ変えたい場合は数値のところを変えていただくと調整できます。

固定のピクセルで設定するなどもOKです。

コード記載イメージ画像も添付いたします。

ご参考になれば幸いです。

スクリーンショット 2022-02-24 16.44.04.png

ff_dog
観光客
7 0 1

@koji_matsumoto 様

 

早々にご回答頂きありがとうございました。

 

内容通りにコード編集を行ったところ無事解決致しました。

 

ご丁寧に対応頂き感謝致します。

ありがとうございました。

 

shun0128
訪問者
1 0 0

横からすみません。ブログ記事でのタイトル文字を小さくするにはどうしたらよいでしょうか?ご教示くださいませ。

koji_matsumoto
Shopify Partner
31 18 28

@shun0128 様

すみません、、いただいたコメントが埋もれてしまって随分と時間がたってしまいました。。

もしかするとすでに解決済みかとは思いますが、念の為下記お戻しいたします。

大変失礼いたしました。

 

sections/main-article.liquid の 三行目に
<style>
  h1 {font-size: calc(var(--font-heading-scale) * 2rem)}
  @media only screen and (min-width: 750px){
    h1 {font-size: calc(var(--font-heading-scale) * 3rem)}
  }
</style>
もともと 3rem(PC 4rem) を 2rem(PC 3rem) に減らしてみました。
こちらでご確認いただけますと幸いです。
koji_matsumoto_0-1652067896070.pngkoji_matsumoto_1-1652067904909.png

 

jcco
遊覧客
23 2 1

横からすみません。

以下コードでサイズを小さく出来たのですが、

よくCSSの調整が可能やCSSでとあえいます。

CSSの使い方がよくわからないのですがご教示頂けますでしょうか。

よろしくお願いします。

<style>
  h1 {font-size: calc(var(--font-heading-scale) * 2.5rem)}
  @media only screen and (min-width: 750px){
    h1 {font-size: calc(var(--font-heading-scale) * 3.5rem)}
  }
</style>