FROM CACHE - jp_header
解決済

Dawn商品情報の商品説明フォントサイズ変更方法

ovo
観光客
10 0 1

はじめまして。

 

完全に初心者のため、コード編集に関する知識はまったくないため、

Dawn商品情報の商品説明箇所のフォントサイズをデバイス別に変更する方法を教えてください。

 

商品タイトルについては、main-product.liquidの27〜32行目に追記したコードでフォントサイズを変更できたので、

スクリーンショット 2022-09-18 午前12.43.50.png

 

同様に以下のコードをその後に追記したのですが、商品説明のフォントサイズの変更はできませんでした。

 

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

 

以下の方法も確認済みですが、商品管理から商品説明箇所に以下のようにコードを追記しても反映させれませんでした。

 

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E5%95%86%E5%93%81%E3%83%9A%...

 

どのファイルのどの箇所にどのコードを入れれば、商品説明のフォントをデバイス別に変更できるのか、ご教示頂けると幸いです。

 

よろしくお願いします。

 

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1057 434 422

成功

セレクターの指定の仕方に少しだけ不足があるだけですので、

下記のようにされれば、指定のフォントサイズにできるかと思います。

<style>
  .product__description {font-size: calc(var(--font-heading-scale) * 1.5rem)}
  @media only screen and (min-width: 750px){
    .product__description {font-size: calc(var(--font-heading-scale) * 2.0rem)}
  }
</style>

 

CSSクラス名をセレクターとして指定する際は、

product__description

ではなく

.product__description

のようにします。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1057 434 422

成功

セレクターの指定の仕方に少しだけ不足があるだけですので、

下記のようにされれば、指定のフォントサイズにできるかと思います。

<style>
  .product__description {font-size: calc(var(--font-heading-scale) * 1.5rem)}
  @media only screen and (min-width: 750px){
    .product__description {font-size: calc(var(--font-heading-scale) * 2.0rem)}
  }
</style>

 

CSSクラス名をセレクターとして指定する際は、

product__description

ではなく

.product__description

のようにします。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
ovo
観光客
10 0 1

フォントサイズ調整できました。

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