# コレクション名を非表示にする方法について

**URL:** <https://community.shopify.com/t/topic/246853>\
**Category:** サンプルコード集（アプリ・テーマ）\
**Tags:** optimization, theme-check, cart-page, troubleshooting, Product-Ideas\
**Created:** [September 2, 2023, 7:29am UTC](https://community.shopify.com/t/topic/246853 "2023-09-02T07:29:44Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

ユーザーがサイトのTOPページに表示されているコレクションリストのコレクション名を非表示にする方法を質問。プログラミング知識がない初心者からの相談。

**提供された解決策：**
- 最初の回答でカスタムCSSコード（`display: none`）が提案される
- しかし、この方法ではコレクション名が消えると同時にリンク機能も失われる問題が発生

**修正された解決策：**
- `opacity: 0` を使用したCSSコードに変更
- これによりコレクション名を視覚的に非表示にしつつ、リンク機能は維持される

**結果：**
問題は解決し、コレクションへのリンクが正常に機能することを確認。ユーザーは満足した様子で感謝を表明。

<div class="post-metadata">

**Author:** ![rannnn](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@rannnn](https://community.shopify.com/u/rannnn)\
**Post date:** [September 2, 2023, 7:29am UTC](https://community.shopify.com/t/topic/246853/1 "2023-09-02T07:29:44Z")

</div>

プログラミングやコードに全く知識がなく、初歩的な質問かもしれませんがご相談乗っていただけると嬉しいです！

サイトTOPページにコレクションリストを追加しているのですが、

添付の赤マル部分（コレクション名）を見えないようにしたく、、

 ![スクリーンショット 2023-09-02 3.27.22.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/6/6/0/660226fca287ad5f4a518e03b97b41bf9beeb063.jpeg)

非表示にする方法やコレクション名を背景カラーと同色にするためのカスタマイズの方法、コードをご存知の方がいらっしゃいましたらご教示いただけると大変助かります。

希望イメージは下記です。

 ![スクリーンショット 2023-09-02 3.27.04.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/b/d/4bd3fc44a4319c6fe9f2a6d52e0e8359991b1ae6.jpeg)

使用テーマテンプレ：Fresh

よろしくお願い致します。

---

<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:** [September 2, 2023, 8:58am UTC](https://community.shopify.com/t/topic/246853/2 "2023-09-02T08:58:05Z")

</div>

はじめまして

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

_\>非表示にする方法やコレクション名を背景カラーと同色にするためのカスタマイズの方法、コードをご存知の方がいらっしゃいましたらご教示いただけると大変助かります。_

カスタムCSSを利用することで、コレクション名を非表示にできます。

下記、サンプルコードになります。

```css
.hp-title {
  display: none;
}

```

下記、カスタムCSSの場所です。

 ![CleanShot 2023-09-02 at 17.56.42@2x.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/d/fdab6621d30d1df7d7461de07c76f1fe3021bc13.jpeg)

以上になります。

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

---

<div class="post-metadata">

**Author:** ![rannnn](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@rannnn](https://community.shopify.com/u/rannnn)\
**Post date:** [September 2, 2023, 9:19am UTC](https://community.shopify.com/t/topic/246853/3 "2023-09-02T09:19:23Z")

</div>

吉谷様

早々にお返事いただきありがとうございます。

そしてサンプルコードのご教示まで大変助かります。

試したところ解決しました 🤤 ！！！！

本当に助かりました・・・

ご親切をいただいた上に、不躾なご連絡になり申し訳ないのですが、

もし可能であればもう何点かお聞きしたいことがありご相談させていただくことは可能でしょうか。

---

<div class="post-metadata">

**Author:** ![rannnn](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@rannnn](https://community.shopify.com/u/rannnn)\
**Post date:** [September 4, 2023, 8:14am UTC](https://community.shopify.com/t/topic/246853/4 "2023-09-04T08:14:09Z")

</div>

度々すみません。

ご回答いただいたサンプルコードでカスタマイズした結果、

コレクション名は非表示になったのですが同時にコレクションに飛べなくなってしまいました。

教えていただいたコード調べたところ、こちらは要素自体が消えてしまうコードのようでしたので「visibility: hidden;」で代用してみたところコレクション名も消えてコレクションへも飛べるようになっているのですが、保存ができず・・

上記調べて試しただけなので、仕様や認識が違いますでしょうか？

---

<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:** [September 4, 2023, 9:09am UTC](https://community.shopify.com/t/topic/246853/5 "2023-09-04T09:09:46Z")

</div>

大変申し訳ありません。

リンクのことは失念しておりました。

下記のコードでいかがでしょうか。

```css
.hp-title a {
  opacity: 0;
}

```

---

<div class="post-metadata">

**Author:** ![rannnn](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@rannnn](https://community.shopify.com/u/rannnn)\
**Post date:** [September 4, 2023, 10:48am UTC](https://community.shopify.com/t/topic/246853/6 "2023-09-04T10:48:37Z")

</div>

早速ありがとうございます！

リンク飛べました。

ありがとうございます。
