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

カスタマイズ
1

対象

わんコメ

利用OS

Windows

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

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

PRO版を利用

している

過去ログ確認 (検索はこちらから)

した

ドキュメント確認 (公式サイト)

した

内容

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

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

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

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

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

2

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

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

補足（クリックで開閉できます）

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

①OBSのソース一覧から、改造表示したいテンプレートのプロパティからカスタムCSSを開き
②入力エリアに次のように設定します。（参考動画）

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

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

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

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

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

参考まで:paw_prints:

「いいね！」 1
3

sikozn様

返信大変遅くなってしまい、申し訳ありません:woman_bowing:

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

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

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

4

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

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

image
image842×547 36.9 KB

詳細

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

ひとまず以上となりす:paw_prints:

「いいね！」 1
5

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

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

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

6

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

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

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

7

sikozon様

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

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

「いいね！」 1