# テーマ「Dawn」でトップページのコレクションの商品リストの文字を大きくしたい

**URL:** <https://community.shopify.com/t/dawn/221466>\
**Category:** Shopify テーマ\
**Tags:** css\
**Created:** [June 3, 2023, 8:41am UTC](https://community.shopify.com/t/dawn/221466 "2023-06-03T08:41:19Z")\
**Posts on this page:** 7\
**Page:** 1

## AI-generated summary

Dawnテーマを使用しているShopifyストアで、トップページのコレクション商品リストの文字サイズを大きくする方法についての質問。

**問題:**
- 質問者はテーマ設定でh2やh3のフォントサイズを変更したが、表示が変わらなかった
- カスタムCSS内で「h3はこのセクションでは使われていない」というエラーが表示された

**解決方法:**
- 株式会社Tsunの吉谷氏が、「特集コレクション」セクションのカスタムCSSを利用する方法を提案
- 当初提案された`.card__heading`や`h3`のセレクタではエラーが発生
- Chromeデベロッパーツールを使用して実際に使われているタグやクラスを調査することを推奨
- 最終的に質問者は`.card-information__text`というクラスを特定し、文字サイズの変更に成功

**結果:** 解決済み。デベロッパーツールで正しいCSSセレクタを見つけることで問題が解消された。

<div class="post-metadata">

**Author:** ![junjun1001](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@junjun1001](https://community.shopify.com/u/junjun1001)\
**Post date:** [June 3, 2023, 8:41am UTC](https://community.shopify.com/t/dawn/221466/1 "2023-06-03T08:41:19Z")

</div>

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

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

タイトルの通り、トップページのコレクションの商品リストの文字を大きくしたいのですが、どの部分をどのように編集したらよいかご教授頂けないでしょうか。

テーマ設定にて

h2 {  
font-size: 30px;  
}  
h3 {  
font-size: 24px;  
}  
{  
font-size: 18px;  
}

見出しの大きさ変更はできました。

宜しくお願い致します。

 ![スクリーンショット 2023-06-03 17.32.09.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/a/8a0638fc35eb9b793c03695d78972cf13775007f.jpeg)

---

<div class="post-metadata">

**Author:** ![kyoshi\_Tsun](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/kyoshi_tsun/32/1503_2.png) [@kyoshi\_Tsun](https://community.shopify.com/u/kyoshi_Tsun)\
**Post date:** [June 3, 2023, 11:23am UTC](https://community.shopify.com/t/dawn/221466/2 "2023-06-03T11:23:41Z")

</div>

はじめまして

株式会社Tsunの吉谷と申します。

本セクションは「特集コレクション」になりますでしょうか。

特集コレクションであれば、カスタムCSSを利用することで文字サイズを大きく出来ると考えています。

 ![kyoshi_tsun_0-1685791218308.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/a/3ab2fbc7fcdd2ffb898fe70c11f09910d7924c85.jpeg)

サンプルCSS（添付画像のCSS）

```css
.card__heading {
  font-size: 30px;
}

```

または

```css
h3 {
  font-size: 30px;
}

```

以上になります

ご参考になりましたら幸いです。

---

<div class="post-metadata">

**Author:** ![junjun1001](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@junjun1001](https://community.shopify.com/u/junjun1001)\
**Post date:** [June 3, 2023, 11:43am UTC](https://community.shopify.com/t/dawn/221466/3 "2023-06-03T11:43:32Z")

</div>

Kyoshi\_tsunさん、教えていただきありがとうございます。

特集コレクションであってます！

なぜか変わらないです。

「h3」はこのセクションでは使われていないようです。とエラー表示が出ます。

 ![スクリーンショット 2023-06-03 20.43.04.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/6/a633f2a3d4d61d41dc8a329c9e6600e950202e1e.png)

---

<div class="post-metadata">

**Author:** ![kyoshi\_Tsun](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/kyoshi_tsun/32/1503_2.png) [@kyoshi\_Tsun](https://community.shopify.com/u/kyoshi_Tsun)\
**Post date:** [June 3, 2023, 11:54am UTC](https://community.shopify.com/t/dawn/221466/4 "2023-06-03T11:54:58Z")

</div>

junjun1001様

2点、確認をお願いできますでしょうか。

・「特集コレクション」セクション内のカスタムCSSで試していますでしょうか。

・「.card\_\_heading」の場合でもだめでしょうか。

---

<div class="post-metadata">

**Author:** ![junjun1001](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@junjun1001](https://community.shopify.com/u/junjun1001)\
**Post date:** [June 3, 2023, 11:57am UTC](https://community.shopify.com/t/dawn/221466/5 "2023-06-03T11:57:56Z")

</div>

「特集コレクション」セクション内のカスタムCSSです。

どちらも試したのですが、同じようなエラーになります。

---

<div class="post-metadata">

**Author:** ![kyoshi\_Tsun](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/kyoshi_tsun/32/1503_2.png) [@kyoshi\_Tsun](https://community.shopify.com/u/kyoshi_Tsun)\
**Post date:** [June 3, 2023, 12:34pm UTC](https://community.shopify.com/t/dawn/221466/6 "2023-06-03T12:34:47Z")

</div>

junjun1001様

私の所有する「Dawn 5.0.0」や「Dawn 9.0.0」では同様のエラーが発生しないため、原因特定が困難な状況です。

もし、エラーの内容通りh3や.card\_\_headingが使用されていないなら、添付画像のようにChromeのデベロッパーツールなどを利用し、文字を大きくしたい部分のタグまたはクラスを調べて、そちらをカスタムCSSに利用すると良いと思います。

 ![kyoshi_tsun_0-1685794932854.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/2/d2d5a8c7c554ff69c1685acc8bd445f0e9da50ff.jpeg)

[参考] デベロッパーツールの使い方

[https://saruwakakun.com/html-css/basic/chrome-dev-tool](https://saruwakakun.com/html-css/basic/chrome-dev-tool)

以上になります。

ご参考になさってください。

---

<div class="post-metadata">

**Author:** ![junjun1001](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@junjun1001](https://community.shopify.com/u/junjun1001)\
**Post date:** [June 3, 2023, 12:58pm UTC](https://community.shopify.com/t/dawn/221466/7 "2023-06-03T12:58:35Z")

</div>

ありがとうございます！

やってみたらできました！

.card-information\_\_text となっていました。

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