# 配信サイトごとにスタイルを適用する方法

**URL:** <https://forum.onecomme.com/t/topic/364>\
**Category:** カスタマイズ\
**Created:** [2022 年 6 月 10 日午後 1:22 UTC](https://forum.onecomme.com/t/topic/364 "2022-06-10T13:22:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nanairosuzune](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/nanairosuzune/32/407_2.png) [@nanairosuzune](https://forum.onecomme.com/u/nanairosuzune)\
**Post date:** [2022 年 6 月 10 日午後 1:22 UTC](https://forum.onecomme.com/t/topic/364/1 "2022-06-10T13:22:19Z")

</div>

対象: わんコメ  
表示画面: OBS Studio 27.2.4  
利用OS: MacOS  
利用バージョン: わんコメ 3.1.1  
過去ログ: 検索した  
内容:  
テンプレートジェネレーターで作った二つのスタイルを配信サイトごとに使い分けたいですが、可能でしょうか。

以下の内容を参考してススタイルを変えようと思いましたが、

# [複数の配信サイトから別々のテンプレートへコメントを流す](http://forum.onecomme.com/t/topic/66)

OBSに貼り付けたCSSは以下となります：

```auto
[data-service='youtube'] {
/* テンプレカスタム ここから */
@font-face {
（省略）
}
/* テンプレカスタム ここまで */
}

[data-service="twitch"] {
/* テンプレカスタム ここから */
@font-face {
（省略）
}
/* テンプレカスタム ここまで */
}

```

このようなCSSは可能でしょうか。  
可能であれば透過背景でYouTubeは白黒のコメントで、Twitchは紫の方のコメントスタイルを適用したいですが……厳しいでしょうか。  
イメージ画像：

 ![スクリーンショット 2022-06-10 21.21.13](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/1X/ff21df3e6ec49748e34108d3a9c935ce786477b9.jpeg)

お忙しいところ申し訳ございません。  
ご教授いただけると幸いです。

何卒よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![nuko](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/nuko/32/399_2.png) [@nuko](https://forum.onecomme.com/u/nuko)\
**Post date:** [2022 年 6 月 10 日午後 4:04 UTC](https://forum.onecomme.com/t/topic/364/2 "2022-06-10T16:04:32Z")

</div>

フォーラムに同じ内容があったのですが  
こちらで問題ないでしょうか？

> [@複数の配信サイトから別々のテンプレートへコメントを流す](http://forum.onecomme.com/t/topic/66/2):
>
> こんばんわん！ 一番簡単な方法をお伝えしますね！ まずはじめにOBSに２つテンプレートを追加します（名前をわかりやすく変更しておくとよいです） [image] このときテンプレートは同じでも違うものでもどちらでも構いません Twitchだけのコメントを表示するブラウザソースのカスタムCSSにニコ生コメントを非表示にするCSSを記述します [data-service='niconama'…

---

<div class="post-metadata">

**Author:** ![nanairosuzune](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/nanairosuzune/32/407_2.png) [@nanairosuzune](https://forum.onecomme.com/u/nanairosuzune)\
**Post date:** [2022 年 6 月 11 日午後 5:41 UTC](https://forum.onecomme.com/t/topic/364/3 "2022-06-11T17:41:36Z")

</div>

ありがとうございます。  
こちらはすでに確認してました。  
ただこちらは、「コメント表示欄をそれぞれが離れた位置に配置したい」という内容で、自分は同じ位置に配置し、YouTubeとTwitchのコメントを分かりやすく分けたいと思います。

テンプレートで配信サイトごとにスタイルを適用する方法

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://onecomme.notion.site/5ce6cadb60e847adac2b6ed957b43296)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

こちらを単体でCSSに貼り付けるのは成功できましたが、同じ要領でジェネレーターと一緒に貼り付けるとダメになってしまいます……

イメージ例：（同じソースで）  
YouTubeテンプレート1：こんにちはー！  
Twitchテンプレート2：Hello  
YouTubeテンプレート1：こんばんは  
Twitchテンプレート2：Hello  
YouTubeテンプレート1：こんばんは  
YouTubeテンプレート1：こんばんは

ジェネレーターと[data-service=‘youtube’]を一緒にCSSに貼り付けるのは無効になるのでしょうか。  
お手数ですがご教授いただけると助かります。

---

<div class="post-metadata">

**Author:** ![azoazo](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/azoazo/32/117_2.png) [@azoazo](https://forum.onecomme.com/u/azoazo)\
**Post date:** [2022 年 6 月 12 日午前 12:15 UTC](https://forum.onecomme.com/t/topic/364/4 "2022-06-12T00:15:39Z")

</div>

テンプレートによっては無理かもしれませんが、私はline-rightテンプレートに以下のカスタムCSSで配信サイトごとに区別できています。

[data-service=“youtube”] {  
background-color: rgba(255,0,0,0.5);  
padding: 0 0 0 40px;  
background-image: url(“skins\_02\_youtube\_(2).png”);  
background-repeat: no-repeat;  
background-position: 0 5px;  
}

[data-service=“twitch”] {  
background-color: rgba(120,0,255,0.5);  
padding: 0 0 0 40px;  
background-image: url(“skins\_03\_twitch\_(2).png”);  
background-repeat: no-repeat;  
background-position: 0 5px;  
}

[data-service=“niconama”] {  
background-color: rgba(0,0,0,0.5);  
padding: 0 0 0 40px;  
background-image: url(“skins\_01\_nico\_(2).png”);  
background-repeat: no-repeat;  
background-position: 0 5px;  
}

---

<div class="post-metadata">

**Author:** ![nuko](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/nuko/32/399_2.png) [@nuko](https://forum.onecomme.com/u/nuko)\
**Post date:** [2022 年 6 月 12 日午前 4:44 UTC](https://forum.onecomme.com/t/topic/364/5 "2022-06-12T04:44:38Z")

</div>

テンプレートによりますが  
このようなCSSを書いてこちらになりましたがこれで大丈夫でしょうか？  
[data-service=‘youtube’] {

–lcv-text-color: rgb(0, 0, 0);

–lcv-name-color: rgb(0, 0, 0);

}

[data-service=“twicas”] {

```
--lcv-text-color: rgb(187, 13, 240);

--lcv-name-color: rgb(187, 13, 240);

```

}  
 ![unknown-412](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/1X/599ef69b601d8a52570818a65067272e56bd19c2.png)

---

<div class="post-metadata">

**Author:** ![nanairosuzune](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/nanairosuzune/32/407_2.png) [@nanairosuzune](https://forum.onecomme.com/u/nanairosuzune)\
**Post date:** [2022 年 6 月 14 日午前 11:37 UTC](https://forum.onecomme.com/t/topic/364/6 "2022-06-14T11:37:17Z")

</div>

azoazo様へ

非常に見やすくて助かりました！  
どうもありがとうございます！！

nuko様へ

返事して下ってありがとうございます。  
ジェネレーターのテンプレと合わせてカスタムCSSに貼ってみましたが、やはり出来ませんでした…  
テンプレートによるかもしれません…  
ご丁寧にありがとうございます！