はじめまして、ff_dogと申します。
現在、shopifyで「テーマ」Dawnにて店舗を作成してます。
タイトルの通り、商品ページの商品タイトルの文字サイズを変更（デフォルトから小さく）したいのですが
main-product.liquidのどの部分をどのように編集したらよいかご教授頂けないでしょうか。
宜しくお願い致します。
3 Likes
@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です。
コード記載イメージ画像も添付いたします。
ご参考になれば幸いです。
5 Likes
横からすみません。ブログ記事でのタイトル文字を小さくするにはどうしたらよいでしょうか？ご教示くださいませ。
すみません、、いただいたコメントが埋もれてしまって随分と時間がたってしまいました。。
もしかするとすでに解決済みかとは思いますが、念の為下記お戻しいたします。
大変失礼いたしました。
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) に減らしてみました。
こちらでご確認いただけますと幸いです。
横からすみません。
以下コードでサイズを小さく出来たのですが、
よく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>