# Youtubeでメンバー用バッジのみを配信画面上に表示する方法

**URL:** <https://forum.onecomme.com/t/topic/1813>\
**Category:** カスタマイズ\
**Tags:** 解決済\
**Created:** [2024 年 8 月 14 日午後 1:13 UTC](https://forum.onecomme.com/t/topic/1813 "2024-08-14T13:13:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![comwoooo](https://avatars.discourse-cdn.com/v4/letter/c/5f9b8f/32.png) [@comwoooo](https://forum.onecomme.com/u/comwoooo)\
**Post date:** [2024 年 8 月 14 日午後 1:13 UTC](https://forum.onecomme.com/t/topic/1813/1 "2024-08-14T13:13:17Z")

</div>

## 対象

テンプレート

## 対象となるサービス

YouTube

## 内容

Youtubeのコメントを配信画面に出力するにあたり、普段はアイコン・名前は出力させず、メンバーシップ加入者がコメントした際はメンバー限定バッジを出力するようなカスタマイズは可能でしょうか。

イメージとしては以下のとおりです。

 ![ex](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/7/78b8ac658d590efad65a342db28206e30abd1703.jpeg)

---

<div class="post-metadata">

**Author:** ![shinkunoshizuku](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/shinkunoshizuku/32/913_2.png) [@shinkunoshizuku](https://forum.onecomme.com/u/shinkunoshizuku)\
**Post date:** [2024 年 8 月 14 日午後 2:30 UTC](https://forum.onecomme.com/t/topic/1813/2 "2024-08-14T14:30:30Z")

</div>

もちろん、イメージいただいているとおりのテンプレートとしてカスタマイズすることは可能です。

今回は、イメージいただいている画像へ近づける作業量が少なくできるであろう「slim」のテンプレートをベースに使わせていただきます。

**slimのテンプレートを複製し名前を変更** したうえで、管理をお願いいたします。

* * *

1. HTMLファイルの編集

複製したslimのテンプレートフォルダ内にあるindex.htmlを編集します。

もともと33行目から44行目にわたりバッジ（badge）の記述があります。

![スクリーンショット 2024-08-14 225943](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/7/75a3182f73dc960691ce5afde4029cf4ee93d6e5.png)

しかし、名前（name）のCSS影響を受ける入れ子の形になっているため、下の画像のように外へ出してあげましょう。

![スクリーンショット 2024-08-14 230102](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/0/03f41dd305735c7e6e1b126810bea8dbf1060b3f.png)

すると画像のように、31～33行目に名前（name）、34～45行目にバッジ（badge）の記述が来るようになるはずです。

1. style.cssファイルの編集

複製したslimのテンプレートフォルダ内にあるstyle.cssを編集します。

CSSファイルの中に、以下を記述してください。

```auto
.avatar, .name {
    display: none;
}
.badge {
    display: inline-block;
}
[data-moderator="true"] .badge {
    display: none;
}
[data-moderator="true"] .badge:nth-child(3) {
    display: inline-block;
}

```

このような形で調整すれば、イメージしている形に近くなるかと思います。

![スクリーンショット 2024-08-14 231823](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/2/2982ff9a5e36052bdd8ccb5fbe15103ad31e51a2.png)

このサンプルのCSSでは、「モデレーターかつメンバー」の場合にもメンバーシップのバッジのみ表示の対応はさせていますので、多くのケースで問題はなくなるかと思います。

* * *

今回紹介したサンプル用のテンプレートは、以下の状態になっています。

書き方がよくわからない場合などの参考になさってください。

[https://nvl-game.tokyo/uploads/onecomme/templates/slim-badge-forum-1813.zip](https://nvl-game.tokyo/uploads/onecomme/templates/slim-badge-forum-1813.zip)

---

<div class="post-metadata">

**Author:** ![comwoooo](https://avatars.discourse-cdn.com/v4/letter/c/5f9b8f/32.png) [@comwoooo](https://forum.onecomme.com/u/comwoooo)\
**Post date:** [2024 年 8 月 14 日午後 6:27 UTC](https://forum.onecomme.com/t/topic/1813/3 "2024-08-14T18:27:39Z")

</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:** [2024 年 9 月 29 日午後 2:05 UTC](https://forum.onecomme.com/t/topic/1813/4 "2024-09-29T14:05:00Z")

</div>

トピッククローズ：相談解決のため