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

[comwoooo]

対象

テンプレート

対象となるサービス

YouTube

内容

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

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

[shinkunoshizuku]

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

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

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

---

1. HTMLファイルの編集

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

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

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

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

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

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

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

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

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

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

---

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

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

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

[comwoooo]

迅速なご回答ありがとうございます！

先ほどご提示いただいたとおり編集したところ、無事イメージ通りの挙動を確認できました！
お忙しい中ご対応いただきありがとうございます、大変助かりました！