# コレクションページのカテゴリータイトルの文字サイズ変更

**URL:** <https://community.shopify.com/t/topic/35107>\
**Category:** 技術的なQ＆A\
**Created:** [February 7, 2021, 2:21pm UTC](https://community.shopify.com/t/topic/35107 "2021-02-07T14:21:22Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

debutテーマのコレクションページで、カテゴリタイトル（見出し）だけ文字サイズを小さくしたいという相談。テーマ設定の「文字体裁」→「見出しの基本サイズ」では全ページの見出しサイズが変わるため、目的に合わないことが確認された。

対応案としては、collection-template.liquid を修正し、コレクションタイトルの <h1> に独自classを追加して CSS で font-size を指定する方法が示された。例として `.title-collection { font-size: 1.2em; }` のように設定する。

補足として、collection-template.liquid には <h1> が2か所あり、
- コレクション画像がある場合用
- コレクション画像がない場合用
の両方を修正する必要があると説明された。

インラインスタイルで上書きする方法も可能だが、管理しやすさの面では class を付けて CSS で整理する方法が推奨されている。質問は実質的に解決済み。

<div class="post-metadata">

**Author:** ![nakanotakuya](https://avatars.discourse-cdn.com/v4/letter/n/ee7513/32.png) [@nakanotakuya](https://community.shopify.com/u/nakanotakuya)\
**Post date:** [February 7, 2021, 2:21pm UTC](https://community.shopify.com/t/topic/35107/1 "2021-02-07T14:21:22Z")

</div>

debutテーマを使用しています。

コレクションページのカテゴリータイトルの文字サイズ変更したいのですが（小さく）

collection-template.liquidのどこを変更すれば良いでしょうか？

collection-template.liquid内で変更するのでしょうか？

どなたか分かる方よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [February 8, 2021, 6:46am UTC](https://community.shopify.com/t/topic/35107/2 "2021-02-08T06:46:47Z")

</div>

「 **カスタマイズ** 」→「 **テーマ設定** 」→「 **文字体裁** 」→「 **見出しの基本サイズ** 」ではないでしょうか。

 ![スクリーンショット 2021-02-08 15.45.22.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/6/26b6e0672c82b0b7b8b62362444d2ad37a478c04.png)

---

<div class="post-metadata">

**Author:** ![nakanotakuya](https://avatars.discourse-cdn.com/v4/letter/n/ee7513/32.png) [@nakanotakuya](https://community.shopify.com/u/nakanotakuya)\
**Post date:** [February 9, 2021, 1:12pm UTC](https://community.shopify.com/t/topic/35107/3 "2021-02-09T13:12:03Z")

</div>

コレクションページのみサイズ変更したいのですがその方法だと全ページのサイズが変わってしまうんですよね。

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [February 10, 2021, 2:40am UTC](https://community.shopify.com/t/topic/35107/4 "2021-02-10T02:40:28Z")

</div>

![スクリーンショット 2021-02-10 11.30.35.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/2/52211614714cdbbae94b5a6e8e1ee500d120a7a6.png)

**collection-template.liquid** の中に、

# タグが２つありますので、ここに独自のclassをつけてcssにfont-sizeを書きます。

**上の**

# **は、コレクションに画像があった場合のコード** で、 **下の**

# **は、コレクションに画像がない場合のコード** なので、 どちらもコーディングしてください。

```css
例）# 

.title-collection {
font-size: 1.2em;
}

```

でもいいですし、他で設定しているcssを上書きしたい場合は、下のようにインラインスタイルでも問題はありませんが、  
管理・整理しやすいやりかたでコーディングしてもらえればと思います。

```markup
# 

```