同じプラットフォーム内で複数の枠で配信を行っている際のコメントの色分けについて

質問
1

対象

わんコメ / WordParty / テンプレート / その他

利用OS

Windows または MacOS

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

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

PRO版を利用

していない

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

していない

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

した

内容

現在YouTubeにて縦型配信と横型配信を同時に行っております。

その際に縦型配信でのコメントと横型配信のコメントの色分けを行いたいと考えております。

お忙しいところ恐れ入りますが、こういった同一プラットフォーム内でのコメント色分けが可能か、もし可能であればその実施方法についてご教授いただけますと幸いです。

何卒よろしくお願い申し上げます。

2

枠情報をベースに色分け自体は可能です
下記に方法を提示しますのでどの要素対してどのような色を適用するかはご自身にてCSSでご調整ください

公式の主要なテンプレートのdiv要素には data-service-id 、 data-service-name の属性がついています

data-service-id は枠ID、data-service-name は「枠名」です

枠IDはわんコメアプリの枠入力の部分を右クリックするとIDコピーできます

CleanShot 2026-03-02 at 18.01.56@2x
CleanShot 2026-03-02 at 18.01.56@2x418×390 24 KB

枠名は画像にある「ニコニコ」の部分がそれにあたります

下記のように属性でスタイルを指定する方法で枠ごとに異なるCSSを適用できます

/* 枠IDを用いる場合 */
[data-service-id="xxxxxxxxxxxxxxx"] {
  /* カスタムしたい内容 */
}

/* 枠名を用いる場合 */
[data-service-name="ニコニコ"] {
  /* カスタムしたい内容 */
}
3

ご返答ありがとうございます。

いただいた内容について確認をさせていただきました。

ただ、私の理解力が乏しくうまく理解することができず…。

大変申し訳ないのですが、もう少々確認をさせていただけますでしょうか。

具体的なCSSの中身で言いますと下記の引用のようにすれば枠ごとに色分けが可能になりますでしょうか？

/* テンプレカスタム ここから */
:root {
    --lcv-direction: column
}

.comment-enter-active,.comment-leave-active {
    transition: all var(--lcv-enter-duration) var(--lcv-enter-easing)
}

.comment-enter-from {
    transform: translateY(100%)!important
}

.comment-leave-to {
    transform: translateY(-100%)!important
}

.comment-move {
    transition: all var(--lcv-move-duration) var(--lcv-move-easing)!important
}

:root {
    --lcv-enter-duration: 200ms;
    --lcv-move-duration: 200ms
}

.avatar {
    display: block
}

.name {
    display: none
}

.avatar {
    min-width: 32px;
    width: 32px;
    height: 32px
}

:root {
    --lcv-badge-size: 1em
}

.comment-text,.name {
    font-size: 24px
}

.comment-text img {
    height: 1em;
    width: auto
}

.comment {
    margin-top: 0;
    margin-bottom: 0;
    padding: 8px;
    border-radius: 0
}

:root {
    --lcv-name-color: rgba(255,255,255,1);
    --lcv-text-color: rgba(255,255,255,1);
    --lcv-background-color: rgba(255,255,255,0);
    --lcv-name-shadow: var(--lcv-name-shadow-3);
    --lcv-name-shadow-color: rgba(255,255,255,1);
    --lcv-comment-shadow: var(--lcv-comment-shadow-3);
    --lcv-comment-shadow-color: rgba(255,255,255,1);
}

[data-service-name="YouTube（横）"] {
    --lcv-name-shadow: 3px 0px 0.5px rgba(255,0,0,1), 2.83745px 0.974098px 0.5px rgba(255,0,0,1), 2.36742px 1.84264px 0.5px rgba(255,0,0,1), 1.64084px 2.5115px 0.5px rgba(255,0,0,1), 0.736456px 2.9082px 0.5px rgba(255,0,0,1), -0.247738px 2.98975px 0.5px rgba(255,0,0,1), -1.20509px 2.74732px 0.5px rgba(255,0,0,1), -2.03184px 2.20717px 0.5px rgba(255,0,0,1), -2.63842px 1.42784px 0.5px rgba(255,0,0,1), -2.95908px 0.493784px 0.5px rgba(255,0,0,1), -2.95908px -0.493784px 0.5px rgba(255,0,0,1), -2.63842px -1.42784px 0.5px rgba(255,0,0,1), -2.03184px -2.20717px 0.5px rgba(255,0,0,1), -1.20509px -2.74732px 0.5px rgba(255,0,0,1), -0.247738px -2.98975px 0.5px rgba(255,0,0,1), 0.736456px -2.9082px 0.5px rgba(255,0,0,1), 1.64084px -2.5115px 0.5px rgba(255,0,0,1), 2.36742px -1.84264px 0.5px rgba(255,0,0,1), 2.83745px -0.974098px 0.5px rgba(255,0,0,1);
    --lcv-comment-shadow: 3px 0px 0.5px rgba(255,0,0,1), 2.83745px 0.974098px 0.5px rgba(255,0,0,1), 2.36742px 1.84264px 0.5px rgba(255,0,0,1), 1.64084px 2.5115px 0.5px rgba(255,0,0,1), 0.736456px 2.9082px 0.5px rgba(255,0,0,1), -0.247738px 2.98975px 0.5px rgba(255,0,0,1), -1.20509px 2.74732px 0.5px rgba(255,0,0,1), -2.03184px 2.20717px 0.5px rgba(255,0,0,1), -2.63842px 1.42784px 0.5px rgba(255,0,0,1), -2.95908px 0.493784px 0.5px rgba(255,0,0,1), -2.95908px -0.493784px 0.5px rgba(255,0,0,1), -2.63842px -1.42784px 0.5px rgba(255,0,0,1), -2.03184px -2.20717px 0.5px rgba(255,0,0,1), -1.20509px -2.74732px 0.5px rgba(255,0,0,1), -0.247738px -2.98975px 0.5px rgba(255,0,0,1), 0.736456px -2.9082px 0.5px rgba(255,0,0,1), 1.64084px -2.5115px 0.5px rgba(255,0,0,1), 2.36742px -1.84264px 0.5px rgba(255,0,0,1), 2.83745px -0.974098px 0.5px rgba(255,0,0,1);
}

[data-service-name="YouTube（縦）"] {
    --lcv-name-shadow: 3px 0px 0.5px rgba(0,0,255,1), 2.83745px 0.974098px 0.5px rgba(0,0,255,1), 2.36742px 1.84264px 0.5px rgba(0,0,255,1), 1.64084px 2.5115px 0.5px rgba(0,0,255,1), 0.736456px 2.9082px 0.5px rgba(0,0,255,1), -0.247738px 2.98975px 0.5px rgba(0,0,255,1), -1.20509px 2.74732px 0.5px rgba(0,0,255,1), -2.03184px 2.20717px 0.5px rgba(0,0,255,1), -2.63842px 1.42784px 0.5px rgba(0,0,255,1), -2.95908px 0.493784px 0.5px rgba(0,0,255,1), -2.95908px -0.493784px 0.5px rgba(0,0,255,1), -2.63842px -1.42784px 0.5px rgba(0,0,255,1), -2.03184px -2.20717px 0.5px rgba(0,0,255,1), -1.20509px -2.74732px 0.5px rgba(0,0,255,1), -0.247738px -2.98975px 0.5px rgba(0,0,255,1), 0.736456px -2.9082px 0.5px rgba(0,0,255,1), 1.64084px -2.5115px 0.5px rgba(0,0,255,1), 2.36742px -1.84264px 0.5px rgba(0,0,255,1), 2.83745px -0.974098px 0.5px rgba(0,0,255,1);
    --lcv-comment-shadow: 3px 0px 0.5px rgba(0,0,255,1), 2.83745px 0.974098px 0.5px rgba(0,0,255,1), 2.36742px 1.84264px 0.5px rgba(0,0,255,1), 1.64084px 2.5115px 0.5px rgba(0,0,255,1), 0.736456px 2.9082px 0.5px rgba(0,0,255,1), -0.247738px 2.98975px 0.5px rgba(255,0,0,1), -1.20509px 2.74732px 0.5px rgba(0,0,255,1), -2.03184px 2.20717px 0.5px rgba(0,0,255,1), -2.63842px 1.42784px 0.5px rgba(0,0,255,1), -2.95908px 0.493784px 0.5px rgba(0,0,255,1), -2.95908px -0.493784px 0.5px rgba(255,0,0,1), -2.63842px -1.42784px 0.5px rgba(0,0,255,1), -2.03184px -2.20717px 0.5px rgba(0,0,255,1), -1.20509px -2.74732px 0.5px rgba(0,0,255,1), -0.247738px -2.98975px 0.5px rgba(0,0,255,1), 0.736456px -2.9082px 0.5px rgba(0,0,255,1), 1.64084px -2.5115px 0.5px rgba(0,0,255,1), 2.36742px -1.84264px 0.5px rgba(0,0,255,1), 2.83745px -0.974098px 0.5px rgba(0,0,255,1);
}

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

はい、こちらの例では文字の縁取りの色が変更されるかと思います

5

(作成者が削除した投稿)

6

ありがとうございます！

こちらで一度試してみたいと思います！

もし色が変わらないなどの問題がありましたらご相談できますと幸いです。

7

五月雨式に申し訳ございません。

ご確認いただいた内容でテストをしてみたのですが、

添付の画像のように縦、横どちらとも縁取りのい色が真っ白になっている状態です。

理想の状態としましては縦の縁取りが青色、横の縁取りが赤に状態になります。

こちら解消可能でしょうか？

スクリーンショット 2026-03-04 221344
スクリーンショット 2026-03-04 221344312×113 12.8 KB