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

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

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

複数の配信サイトから別々のテンプレートへコメントを流す

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

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

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

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

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

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

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

1 Like

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

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

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

イメージ例:(同じソースで)
YouTubeテンプレート1:こんにちはー!
Twitchテンプレート2:Hello
YouTubeテンプレート1:こんばんは
Twitchテンプレート2:Hello
YouTubeテンプレート1:こんばんは
YouTubeテンプレート1:こんばんは

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

テンプレートによっては無理かもしれませんが、私は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;
}

2 Likes

テンプレートによりますが
このような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

2 Likes

azoazo様へ

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

nuko様へ

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

1 Like