# Twitchのバッジとコメントのみの表示について

**URL:** <https://forum.onecomme.com/t/topic/2623>\
**Category:** カスタマイズ\
**Tags:** 続報期待\
**Created:** [2025 年 11 月 8 日午前 6:12 UTC](https://forum.onecomme.com/t/topic/2623 "2025-11-08T06:12:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![NoeSaionzi](https://avatars.discourse-cdn.com/v4/letter/n/f04885/32.png) [@NoeSaionzi](https://forum.onecomme.com/u/NoeSaionzi)\
**Post date:** [2025 年 11 月 8 日午前 6:12 UTC](https://forum.onecomme.com/t/topic/2623/1 "2025-11-08T06:12:25Z")

</div>

## 対象

わんコメ

## 利用OS

Windows

## 利用バージョン: Windows、わんコメやOBSのバージョン

Windows: 11  
わんコメ： 8.0.7  
OBS: 31.1.2

## PRO版を利用

している

## 過去ログ確認 ([検索はこちらから](https://forum.onecomme.com/search))

した

## ドキュメント確認 ([公式サイト](https://onecomme.com/docs/faq/))

した

## 内容

いつもお世話になっております！

以前、 **要望回答 08/14～09/13**

> **[要望回答 08/14～09/13｜わんコメ｜pixivFANBOX](https://one-comme.fanbox.cc/posts/10567837)**
>
> 頂いていた要望について回答いたします！
> 要望：読み上げ対象のフィルター機能
> 一時的に読み上げ対象をメンバーのみに絞ることは可能でしょうか。
> Youtube配信時にコメントが増えた場合に、メンバーのみとすることで遅延なくコメントが拾えるようにしたいです。
> 回答：一時的に読み上げを指定対象飲みにする予定はありま...

にて\*\*「要望：Twitchにおけるバッジのみ表示機能について」\*\*を投稿したものです🙏  
詳細遅くなってしまったのですが、皆様のお力もお借りしたくこちらで質問させて頂きます。

簡潔に申しますと、わんコメ内ではなく **OBSの表示においてTwitchサブスクバッジとコメントのみを表示させたい** です。

要望回答からのご回答によりますと、テンプレートのカスタマイズで可能とのことでしたので良ければご教授頂ければ幸いです🙇‍♀️

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2025 年 11 月 8 日午後 6:48 UTC](https://forum.onecomme.com/t/topic/2623/2 "2025-11-08T18:48:36Z")

</div>

ご質問ありがとうございます🐾  
内容的にはカスタマイズの相談になるかと思いますので、カテゴリの方変更させていただきました 😉

* * *

さて、ご質問のカスタマイズですが、方法の一つとして、OBSのカスタムCSSで実現する方法をご紹介します。

> **補足（クリックで開閉できます）**
>
> 本当は、おなじCSSでもテンプレートによって効く効かないがあるので、先にどのテンプレートかお伺いできてからが良いのですが、幸いいくつか試した中では全てうまくいきましたので、一旦このまま紹介させていただきます。動かない場合はどのテンプレートかをお知らせいただければと思います。

①OBSのソース一覧から、改造表示したいテンプレートのプロパティからカスタムCSSを開き  
②入力エリアに次のように設定します。（[参考動画](https://www.youtube.com/watch?v=7S_H4RQ64OE&t=389s)）

```auto
/* テンプレカスタム ここから */
.avatar {
    display: none!important;/*アイコン非表示*/
}

.name {
  font-size: 0;/*名前の文字サイズ0にして名前を非表示*/
}

.name .badge {
  font-size: var(--lcv-font-size);/*バッジだけサイズ復活させて表示*/
}

/* テンプレカスタム ここまで */

```

以上で、アイコンを非表示、名前を非表示、バッジは表示、という設定になるかと思います。  
テンプレートによりますが、バッジの大きさを大きくしたい場合などは、  
`var(--lcv-font-size);`となっているところを`50px`など直接数値の指定でもカスタマイズ可能となります。

参考まで🐾

---

<div class="post-metadata">

**Author:** ![NoeSaionzi](https://avatars.discourse-cdn.com/v4/letter/n/f04885/32.png) [@NoeSaionzi](https://forum.onecomme.com/u/NoeSaionzi)\
**Post date:** [2025 年 11 月 11 日午前 9:10 UTC](https://forum.onecomme.com/t/topic/2623/3 "2025-11-11T09:10:23Z")

</div>

sikozn様

返信大変遅くなってしまい、申し訳ありません🙇‍♀️

ご回答頂き誠にありがとうございます！  
丁寧な解説とても助かりました🙏  
カテゴリ変更もありがとうございます。

> **要約**
>
> ```auto
> body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }/* テンプレカスタム ここから */
> @import "https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap";
> 
> :root {
> --lcv-direction: column-reverse
> }
> 
> .comment-enter-active,.comment-leave-active {
> transition: opacity var(--lcv-enter-duration) var(--lcv-enter-easing)
> }
> 
> .comment-enter-from,.comment-leave-to {
> opacity: 0!important;
> transform: none!important
> }
> 
> .avatar,.name {
> display: none!important
> }
> 
> body {
> font-family: "Kosugi Maru",sans-serif
> }
> 
> :root {
> --lcv-comment-shadow-color: rgba(255,255,255,0);
> --lcv-text-color: rgba(216,142,149,1);
> --lcv-enter-duration: 140ms
> }
> 
> .comment-text {
> font-size: 25px
> }
> 
> .comment {
> padding: 3px
> }
> 
> :root {
> --one-sdk-excludes: youtube
> }
> 
> body { font-family: 'ニコモジ＋V2'; } 
> 
> .avatar {
> display: none!important;
> }
> 
> .name {
> font-size: 0;
> }
> 
> .name .badge {
> font-size: var(--lcv-font-size);
> }
> 
> /* テンプレカスタム ここまで */
> 
> ```

現在「slim」テンプレートを上記カスタマイズして利用させて頂いているのですが、ご回答いただいたカスタマイズはどのように挿入すればよろしいでしょうか？(上記のように現在のテンプレート「ニコモジ」以降に挿入したところ変化なしでした…)

お忙しいところ恐れ入りますが、再度教えて頂けると助かります！

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2025 年 11 月 11 日午前 11:35 UTC](https://forum.onecomme.com/t/topic/2623/4 "2025-11-11T11:35:49Z")

</div>

お試しありがとうございます🐾

お示しいただきましたコードから下記部分（三行）を削除するとバッジが表示されるようになるかと思います。

> [@NoeSaionzi](#):
>
> ```auto
> .avatar,.name {
> display: none!important
> }
> 
> ```

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/b/bba8c99575dd9713a615555fd30cc1127584d30f.png)

> **詳細**
>
> お示しいただきましたコードより、既にアイコンと名前の非表示は実現されていた段階ということだったのですね。  
> ですのでバッジの表示作用だけが利いていない、という状態でした。  
> 原因は、上記画像の部分（三行）は「アイコンと名前を非表示にする」という作用のため、バッジを巻き込んで名前領域が非表示になっていたためで、  
> ここからの修正方法はいろいろありますが、必要な部分は後の部記述と被っていますので、同画像部分だけまるごと削除する方法が簡単かと思います。

* * *

ひとまず以上となりす🐾

---

<div class="post-metadata">

**Author:** ![NoeSaionzi](https://avatars.discourse-cdn.com/v4/letter/n/f04885/32.png) [@NoeSaionzi](https://forum.onecomme.com/u/NoeSaionzi)\
**Post date:** [2025 年 11 月 11 日午後 12:27 UTC](https://forum.onecomme.com/t/topic/2623/5 "2025-11-11T12:27:21Z")

</div>

返信ありがとうございます🙏

提示頂いたコード及びに修正方法のおかげで、無事にバッジ表示とコメントのみにすることができました！非常にわかりやすく教えて頂きありがとうございました！

追加でのご質問なのですが、サブスクライバーバッジのみの表示も可能なのでしょうか？

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2025 年 11 月 11 日午後 4:44 UTC](https://forum.onecomme.com/t/topic/2623/6 "2025-11-11T16:44:30Z")

</div>

CSSの方で`src`や`alt`、`title`などで絞り込みはできると思いますので、  
「 **例えば** 」サブスクバッジの画像（img）のtitleに “subscriber” みたいな文字列が設定されているのであれば、

> [@sikozon](#):
>
> ```auto
> .name .badge {
> font-size: var(--lcv-font-size);/*バッジだけサイズ復活させて表示*/
> }
> 
> ```

の部分の  
「`.name .badge {...`」  
のところに  
「`.name .badge [title="subscriber"]{...`」  
といった感じで差し込めば、バッジのタイプを絞り込むといったことは可能かと思います。  
これはあくまで例えですので、実際にどうなっているか調べてみないとわかりません。

ここまで書きましたが、私の方ではちょっと詳しく調べる余裕がございませんので、  
一旦可能であればご自身でお調べいただくか、他の回答がつくのをお待ちいただければと思います 🙏

---

<div class="post-metadata">

**Author:** ![NoeSaionzi](https://avatars.discourse-cdn.com/v4/letter/n/f04885/32.png) [@NoeSaionzi](https://forum.onecomme.com/u/NoeSaionzi)\
**Post date:** [2025 年 11 月 12 日午前 11:09 UTC](https://forum.onecomme.com/t/topic/2623/7 "2025-11-12T11:09:53Z")

</div>

sikozon様

詳しく、そして丁寧にご説明いただき本当にありがとうございます🙇‍♀️  
CSSでの絞り込み方法についてとてもわかりやすく、  
自分でも試してみようというイメージがつかめました。

お忙しい中ここまで丁寧に解説してくださり、感謝の気持ちでいっぱいです。  
本当に助かりました、ありがとうございます🙏