# 「配信サイトごとにスタイルを適用」関連：文字の縁の色分けができない

**URL:** <https://forum.onecomme.com/t/topic/1889>\
**Category:** カスタマイズ\
**Tags:** 解決済\
**Created:** [2024 年 9 月 13 日午前 8:12 UTC](https://forum.onecomme.com/t/topic/1889 "2024-09-13T08:12:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fource\_kakkoyon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/fource_kakkoyon/32/1796_2.png) [@fource\_kakkoyon](https://forum.onecomme.com/u/fource_kakkoyon)\
**Post date:** [2024 年 9 月 13 日午前 8:12 UTC](https://forum.onecomme.com/t/topic/1889/1 "2024-09-13T08:12:57Z")

</div>

[配信サイトごとにスタイルを適用する方法](https://forum.onecomme.com/t/topic/364) からディスカッションを続行:

## 対象

表示画面: OBS Studio 30.2.3  
利用OS: Windows 11 Home  
利用バージョン: わんコメ 6.0.0-rc. 15  
過去ログ: 検索した  
テンプレート: slim

## 対象となるサービス

ニコ生  
YouTube  
Twitch

## 内容

当方slimテンプレートを用いてコメント表示しているのですが、  
CSSカスタマイズが上手くいかず苦戦しているので、  
お力添えのほどお願いいたします。

当方が希望する配色は、  
ニコ生が白字・黒縁  
YouTubeが白字・赤縁  
Twitchが白字・紫縁  
なのですが、

どうカスタマイズしても文字の縁取りの「色だけが」rootの設定に引っ張られてしまいます。  
文字の色も縁取りの太さも配信サイトごとに設定を分けることができるのですが、  
そこだけなぜかうまくいきません。  
CSSの記述そのものがはじめてなので、何か基本的な記述が抜けているのかもしれません。  
以下に「こうしたい」という要望のCSSとそれを適用した場合の現在のスクショ、  
そして理想イメージとなる過去配信のスクショを添付しておきます。  
スクショの通りですが、このCSSの記述だと文字は縁取りも含めて全て真っ白になります。

有識者の皆様、よろしくお願いします。

* * *

/\* テンプレカスタム 前略 \*/

: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=“niconama”] {  
–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(37, 37, 37, 1);  
–lcv-comment-shadow: var(–lcv-comment-shadow-3);  
–lcv-comment-shadow-color: rgba(37, 37, 37, 1);  
}

[data-service=“twitch”] {  
–lcv-text-color: rgba(255, 255, 255, 1);  
–lcv-name-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(100, 65, 165, 1);  
–lcv-comment-shadow: var(–lcv-comment-shadow-3);  
–lcv-comment-shadow-color: rgba(100, 65, 165, 1);  
}

[data-service=“youtube”] {  
–lcv-text-color: rgba(255, 255, 255, 1);  
–lcv-name-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, 0, 0, 1);  
–lcv-comment-shadow: var(–lcv-comment-shadow-3);  
–lcv-comment-shadow-color: rgba(255, 0, 0, 1);  
}

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

 ![全画面プロジェクター (ソース) - わんコメslim 2024_09_13 17_04_41 (2)](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/9/9039a5ea5ab91664c50f507d3901b3d668a98570.jpeg)

 ![映画 & テレビ 2024_09_13 16_54_21 (2)](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/c/c9e14eebfe5c61c315442f3a93f77313af75db66.jpeg)

---

<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:** [2024 年 9 月 13 日午後 10:59 UTC](https://forum.onecomme.com/t/topic/1889/2 "2024-09-13T22:59:24Z")

</div>

あまりスマートではありませんが、こんな形にすることは可能です。

![スクリーンショット 2024-09-14 075022](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/0/04672c74fb17a0529724530f300e701359b43303.png)

```css
: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="niconama"] {
    --lcv-name-shadow: 3px 0px 0.5px rgba(37,37,37,1), 2.83745px 0.974098px 0.5px rgba(37,37,37,1), 2.36742px 1.84264px 0.5px rgba(37,37,37,1), 1.64084px 2.5115px 0.5px rgba(37,37,37,1), 0.736456px 2.9082px 0.5px rgba(37,37,37,1), -0.247738px 2.98975px 0.5px rgba(37,37,37,1), -1.20509px 2.74732px 0.5px rgba(37,37,37,1), -2.03184px 2.20717px 0.5px rgba(37,37,37,1), -2.63842px 1.42784px 0.5px rgba(37,37,37,1), -2.95908px 0.493784px 0.5px rgba(37,37,37,1), -2.95908px -0.493784px 0.5px rgba(37,37,37,1), -2.63842px -1.42784px 0.5px rgba(37,37,37,1), -2.03184px -2.20717px 0.5px rgba(37,37,37,1), -1.20509px -2.74732px 0.5px rgba(37,37,37,1), -0.247738px -2.98975px 0.5px rgba(37,37,37,1), 0.736456px -2.9082px 0.5px rgba(37,37,37,1), 1.64084px -2.5115px 0.5px rgba(37,37,37,1), 2.36742px -1.84264px 0.5px rgba(37,37,37,1), 2.83745px -0.974098px 0.5px rgba(37,37,37,1);
    --lcv-comment-shadow: 3px 0px 0.5px rgba(37,37,37,1), 2.83745px 0.974098px 0.5px rgba(37,37,37,1), 2.36742px 1.84264px 0.5px rgba(37,37,37,1), 1.64084px 2.5115px 0.5px rgba(37,37,37,1), 0.736456px 2.9082px 0.5px rgba(37,37,37,1), -0.247738px 2.98975px 0.5px rgba(37,37,37,1), -1.20509px 2.74732px 0.5px rgba(37,37,37,1), -2.03184px 2.20717px 0.5px rgba(37,37,37,1), -2.63842px 1.42784px 0.5px rgba(37,37,37,1), -2.95908px 0.493784px 0.5px rgba(37,37,37,1), -2.95908px -0.493784px 0.5px rgba(37,37,37,1), -2.63842px -1.42784px 0.5px rgba(37,37,37,1), -2.03184px -2.20717px 0.5px rgba(37,37,37,1), -1.20509px -2.74732px 0.5px rgba(37,37,37,1), -0.247738px -2.98975px 0.5px rgba(37,37,37,1), 0.736456px -2.9082px 0.5px rgba(37,37,37,1), 1.64084px -2.5115px 0.5px rgba(37,37,37,1), 2.36742px -1.84264px 0.5px rgba(37,37,37,1), 2.83745px -0.974098px 0.5px rgba(37,37,37,1);
}

[data-service="twitch"] {
    --lcv-name-shadow: 3px 0px 0.5px rgba(100,65,165,1), 2.83745px 0.974098px 0.5px rgba(100,65,165,1), 2.36742px 1.84264px 0.5px rgba(100,65,165,1), 1.64084px 2.5115px 0.5px rgba(100,65,165,1), 0.736456px 2.9082px 0.5px rgba(100,65,165,1), -0.247738px 2.98975px 0.5px rgba(100,65,165,1), -1.20509px 2.74732px 0.5px rgba(100,65,165,1), -2.03184px 2.20717px 0.5px rgba(100,65,165,1), -2.63842px 1.42784px 0.5px rgba(100,65,165,1), -2.95908px 0.493784px 0.5px rgba(100,65,165,1), -2.95908px -0.493784px 0.5px rgba(100,65,165,1), -2.63842px -1.42784px 0.5px rgba(100,65,165,1), -2.03184px -2.20717px 0.5px rgba(100,65,165,1), -1.20509px -2.74732px 0.5px rgba(100,65,165,1), -0.247738px -2.98975px 0.5px rgba(100,65,165,1), 0.736456px -2.9082px 0.5px rgba(100,65,165,1), 1.64084px -2.5115px 0.5px rgba(100,65,165,1), 2.36742px -1.84264px 0.5px rgba(100,65,165,1), 2.83745px -0.974098px 0.5px rgba(100,65,165,1);
    --lcv-comment-shadow: 3px 0px 0.5px rgba(100,65,165,1), 2.83745px 0.974098px 0.5px rgba(100,65,165,1), 2.36742px 1.84264px 0.5px rgba(100,65,165,1), 1.64084px 2.5115px 0.5px rgba(100,65,165,1), 0.736456px 2.9082px 0.5px rgba(100,65,165,1), -0.247738px 2.98975px 0.5px rgba(100,65,165,1), -1.20509px 2.74732px 0.5px rgba(100,65,165,1), -2.03184px 2.20717px 0.5px rgba(100,65,165,1), -2.63842px 1.42784px 0.5px rgba(100,65,165,1), -2.95908px 0.493784px 0.5px rgba(100,65,165,1), -2.95908px -0.493784px 0.5px rgba(100,65,165,1), -2.63842px -1.42784px 0.5px rgba(100,65,165,1), -2.03184px -2.20717px 0.5px rgba(100,65,165,1), -1.20509px -2.74732px 0.5px rgba(100,65,165,1), -0.247738px -2.98975px 0.5px rgba(100,65,165,1), 0.736456px -2.9082px 0.5px rgba(100,65,165,1), 1.64084px -2.5115px 0.5px rgba(100,65,165,1), 2.36742px -1.84264px 0.5px rgba(100,65,165,1), 2.83745px -0.974098px 0.5px rgba(100,65,165,1);
}
[data-service="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);
}

```

この例ではrootで指定されているshadow-3の太さに合わせているため、別の太さにする場合は調整が必須です。

---

<div class="post-metadata">

**Author:** ![fource\_kakkoyon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/fource_kakkoyon/32/1796_2.png) [@fource\_kakkoyon](https://forum.onecomme.com/u/fource_kakkoyon)\
**Post date:** [2024 年 9 月 14 日午前 4:35 UTC](https://forum.onecomme.com/t/topic/1889/3 "2024-09-14T04:35:20Z")

</div>

shadowの座標をそれぞれ8方向指定した感じでしょうか。この座標を導き出すのは骨が折れそうです。8方向×(名前+コメ)×配信サイト数3＝48座標ともなると凄まじい記述量ですね。  
shadowの太さは３が理想だったのでこれでバッチリです。  
早速テストしてみたところうまくいきました！ありがとうございます！

 ![全画面プロジェクター (プレビュー) 2024_09_14 13_23_47 (2)](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/e/e0d4a89ca2f29f2ca5784b8eb192a697ff0b5223.jpeg)

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2024 年 9 月 18 日午後 4:51 UTC](https://forum.onecomme.com/t/topic/1889/4 "2024-09-18T16:51:34Z")

</div>

トピッククロース：相談解決のため