わんコメを使っている際、テンプレートの初期状態だと、名前の文字色は「黒」になっています。
しかしながら、YouTubeのチャット欄では「一般リスナー」「メンバー」「モデレーター」「オーナー（配信者）」と、色が変わる仕様になっています。
今回は、YouTubeのチャット欄やコメント欄と同じ色に、どのようにすれば設定できるのか、簡単導入手順を解説していきましょう。
名前の文字色を変更するには
わんコメのテンプレートで名前の文字色を変更するためには、最も簡単な方法としてテンプレートエディタを使うという方法があります。
わんコメ公式に用意されているテンプレエディタでは、「名前文字色」を操作することで、簡単に色を変更することができるものです。
ですが、この方法では、YouTubeのチャット欄のように「メンバー」や「モデレーター」など、それぞれに色を指定することができません。
では、どうすればYouTubeと同じような形でカスタマイズができるのか。
それは、カスタムCSSへ独自に決めた色をそれぞれ色を割り当て、テンプレートに出力する設定が必要となります。
カスタムCSSの設定
OBSやXSplitなど、わんコメのテンプレートエディタでもコピペして使うこととなる「カスタムCSS」に次のような記述をすることで、YouTubeと同じような色の名前を使うことが可能です。
[data-member="true"] .name {
color: #107516; /*メンバーの色*/
}
[data-moderator="true"] .name {
color: rgba(95,132,241,1); /*モデレーターの色*/
}
[data-owner="true"] .name {
background-color: #ffd600; /*配信者の色*/
}
それぞれの項目の意味
[data-member="true"]
メンバーシップに加入している場合、色が変化します。
[data-moderator="true"]
モデレーターである場合、色が変化します。
メンバーかつモデレーターの場合、上記をコピペして使えばモデレーターの色が優先されます。
[data-owner="true"]
配信者（オーナー）である場合、色が変化します。
メンバーだけ色を変えるなども可能！
モデレーターや配信者の色は変更せず、メンバーだけ色を変えたい、といったカスタマイズも可能です。
[data-member="true"] .name {
color: #107516;/*メンバーの色*/
}
これだけ適用させれば、メンバーの名前だけYouTube風に変えることができます。
お気づきかもしれませんが、このように単体で使うことで、メンバー以外に「モデレーターだけ」や「配信者だけ」の設定も可能です。
提供したCSSを利用する際の注意点
今回提供したCSSは、誰でも自由に使うことが可能です。
設定を誰かに教える際には、このページを教えていただけると助かりますが、強制ではありません。
ただ、実際にテンプレートにカスタムCSSを使ってみることでわかるのですが、「テンプレートによってはきれいに見えない」というデメリットもあります。
特に、neonテンプレートだと文字の色がにじみがちのため、表示の仕方をテンプレエディタやご自身で用意したCSSで調整する必要があるでしょう。
また当然のことながら、もともと名前の表示がないようなテンプレートや、名前の表示を任意で消している場合、今回のCSSは意味をなしません。
ですが、簡単にYouTubeのチャット欄風に名前の文字色を変更できるため、認識しやすいコメント表示方法の一つとして使っていただければと思います。
コメント