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

**URL:** <https://forum.onecomme.com/t/topic/2836>\
**Category:** 質問\
**Created:** [2026 年 3 月 1 日午後 3:17 UTC](https://forum.onecomme.com/t/topic/2836 "2026-03-01T15:17:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![akaoni](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@akaoni](https://forum.onecomme.com/u/akaoni)\
**Post date:** [2026 年 3 月 1 日午後 3:17 UTC](https://forum.onecomme.com/t/topic/2836/1 "2026-03-01T15:17:24Z")

</div>

## 対象

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

## 利用OS

Windows または MacOS

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

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

## PRO版を利用

していない

## 過去ログ確認 ([検索はこちらから](https://forum.onecomme.com/search))

していない

## ドキュメント確認 ([公式サイト](https://onecomme.com/docs/faq/))

した

## 内容

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

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

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

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

---

<div class="post-metadata">

**Author:** ![ASTIE](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/astie/32/58_2.png) [@ASTIE](https://forum.onecomme.com/u/ASTIE)\
**Post date:** [2026 年 3 月 2 日午前 9:06 UTC](https://forum.onecomme.com/t/topic/2836/2 "2026-03-02T09:06:56Z")

</div>

枠情報をベースに色分け自体は可能です  
下記に方法を提示しますのでどの要素対してどのような色を適用するかはご自身にて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](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/2/2344ef020d38452c62c0d7cd1350980ac107346a.png)  
枠名は画像にある「ニコニコ」の部分がそれにあたります

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

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

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

```

---

<div class="post-metadata">

**Author:** ![akaoni](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@akaoni](https://forum.onecomme.com/u/akaoni)\
**Post date:** [2026 年 3 月 3 日午後 2:41 UTC](https://forum.onecomme.com/t/topic/2836/3 "2026-03-03T14:41:48Z")

</div>

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

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

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

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

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

```auto
/* テンプレカスタム ここから */
: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);
}

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

```

---

<div class="post-metadata">

**Author:** ![ASTIE](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/astie/32/58_2.png) [@ASTIE](https://forum.onecomme.com/u/ASTIE)\
**Post date:** [2026 年 3 月 3 日午後 11:20 UTC](https://forum.onecomme.com/t/topic/2836/4 "2026-03-03T23:20:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![akaoni](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@akaoni](https://forum.onecomme.com/u/akaoni)\
**Post date:** [2026 年 3 月 4 日午後 1:05 UTC](https://forum.onecomme.com/t/topic/2836/6 "2026-03-04T13:05:22Z")

</div>

ありがとうございます！

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

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

---

<div class="post-metadata">

**Author:** ![akaoni](https://avatars.discourse-cdn.com/v4/letter/a/48db29/32.png) [@akaoni](https://forum.onecomme.com/u/akaoni)\
**Post date:** [2026 年 3 月 4 日午後 1:18 UTC](https://forum.onecomme.com/t/topic/2836/7 "2026-03-04T13:18:35Z")

</div>

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

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

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

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

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

 ![スクリーンショット 2026-03-04 221344](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/7/79488114dce44af5c0394567701eb337d0f3ea6f.png)

---

<div class="post-metadata">

**Author:** ![ASTIE](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/astie/32/58_2.png) [@ASTIE](https://forum.onecomme.com/u/ASTIE)\
**Post date:** [2026 年 3 月 4 日午後 10:41 UTC](https://forum.onecomme.com/t/topic/2836/8 "2026-03-04T22:41:35Z")

</div>

解決することはCSSの指定で可能ですが、具体的なカスタマイズコードの提供や調査・サポートについては無償では行っておらず、あくまで実装可否と方法の提示に留めさせて頂いております

ご希望がございましたら有償による実装も可能ですのでご検討ください

※ 私としての回答はここまでとなりますが、引き続きユーザー様同士での情報交換・情報提供はご継続ください 🙏

---

<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:** [2026 年 3 月 4 日午後 11:31 UTC](https://forum.onecomme.com/t/topic/2836/9 "2026-03-04T23:31:53Z")

</div>

ご提示いただいているCSS自体は動く状態になってはおりますので、  
先日お話のあった部分を再度ご確認いただき、正しい記述になっているかご確認ください。

> [@同じプラットフォーム内で複数の枠で配信を行っている際のコメントの色分けについて](https://forum.onecomme.com/t/topic/2836/2):
>
> 枠情報をベースに色分け自体は可能です 下記に方法を提示しますのでどの要素対してどのような色を適用するかはご自身にてCSSでご調整ください 公式の主要なテンプレートのdiv要素には data-service-id 、 data-service-name の属性がついています data-service-id は枠ID、data-service-name は「枠名」です 枠IDはわんコメアプリの…