# 特定のユーザーのコメントの色を変えたい（neonテンプレート）

**URL:** <https://forum.onecomme.com/t/topic/1307>\
**Category:** カスタマイズ\
**Created:** [2023 年 9 月 17 日午前 10:41 UTC](https://forum.onecomme.com/t/topic/1307 "2023-09-17T10:41:16Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sivaxo](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sivaxo/32/926_2.png) [@Sivaxo](https://forum.onecomme.com/u/Sivaxo)\
**Post date:** [2023 年 9 月 17 日午前 10:41 UTC](https://forum.onecomme.com/t/topic/1307/1 "2023-09-17T10:41:16Z")

</div>

## 対象

テンプレート

## 対象となるサービス

すべて

## 内容

１）ひとつのテンプレートの中で視聴者ごとに文字の色を変えたいです。  
２）可能であればその中で特定ワードから始まる際、さらに色を変える  
そんな風にしたいのですが可能でしょうか？

１）  
デフォ（しばぉ）の発言：パープル  
その他（ＡＩ）の発言：オレンジ  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/1/1780490d0f018cf77bbad9538802134485aa564f.png)

２）  
理想の画像例（こんな風にしたい）  
猫使の発言でアル「から始まる場合：赤  
猫使の発言でビィ「から始まる場合：青

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/a/a262450e7283a875f3d38704f4f6d59b788404d7.png)

---

<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:** [2023 年 9 月 17 日午前 11:14 UTC](https://forum.onecomme.com/t/topic/1307/2 "2023-09-17T11:14:00Z")

</div>

ご相談ありがとうございます 🐾

`[data-user="ユーザー名"]`  
という指定方法がありますので、そちらを利用することで可能なんじゃないかと思います。

参考：

> [@テンプレートで特定の人のコメントのみ非表示にしたい](https://forum.onecomme.com/t/topic/1265):
>
> 対象 わんコメ / テンプレート 利用OS Windows 利用バージョン: Windows、わんコメやOBSのバージョン Windows: 10 わんコメ： 5.0.0-beta.93 OBS: 27.2.4 PRO版を利用 している 過去ログ確認 ([検索はこちらから](https://forum.onecomme.com/search)) した ドキュメント確認 ([公式サイト](https://onecomme.com/docs/faq/)) した 内容 以前、テンプレートで特定の人のチャット(配信者のみとか)の…

* * *

他の方の参考にもなりますため、解決された際には、上手くいったcssの該当部分の内容などお教えいただけますと幸いです 🐾

---

<div class="post-metadata">

**Author:** ![Sivaxo](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sivaxo/32/926_2.png) [@Sivaxo](https://forum.onecomme.com/u/Sivaxo)\
**Post date:** [2023 年 9 月 17 日午後 1:21 UTC](https://forum.onecomme.com/t/topic/1307/3 "2023-09-17T13:21:32Z")

</div>

とりあえず、進捗だけ……  
[data-user=“ユーザー名”]を使ったのでは色の変更はできませんでした。

:root {  
–lcv-name-color: rgba(255, 255, 255, 1);  
–lcv-text-color: rgba(255, 255, 255, 1);  
–neon-color: rgb(0, 0, 255);  
}  
[data-user=“猫使”] {  
–lcv-name-color: rgba(255, 255, 255, 1);  
–lcv-text-color: rgba(255, 255, 255, 1);  
–neon-color: rgba(255, 0, 0, 1);  
align-self: flex-end;

近い結果になったのが、

:root {  
–lcv-name-color: rgba(255, 255, 255, 1);  
–lcv-text-color: rgba(255, 255, 255, 1);  
–neon-color: rgba(255, 0, 255, 1);

```
@supports (--lcv-name: *"アル「"*) {
    --lcv-name-color: rgba(255, 255, 255, 1);
    --lcv-text-color: rgba(255, 255, 255, 1);
    --neon-color: rgba(255, 0, 0, 1);
}

```

}  
という構文で、アル「と始まるコメントの場合、全体の色が変わる……  
というものは得られました。

そうじゃない、アルのコメントだけ変えたいんだ……  
と頭を抱えて一区切りとします。  
他に良い方法があればご教授願います。

![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/8/8e2909851a5fa0815b7511c6176ed786aafbbcdd.png)  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/9/95a70cdd557724e6c9bc5c153085ed7a36e1b9cd.png)

---

<div class="post-metadata">

**Author:** ![Sivaxo](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sivaxo/32/926_2.png) [@Sivaxo](https://forum.onecomme.com/u/Sivaxo)\
**Post date:** [2023 年 9 月 17 日午後 1:25 UTC](https://forum.onecomme.com/t/topic/1307/4 "2023-09-17T13:25:39Z")

</div>

嘘つきました。ただリロードしてただけで、色が変わるだけでした。

---

<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:** [2023 年 9 月 17 日午後 8:23 UTC](https://forum.onecomme.com/t/topic/1307/5 "2023-09-17T20:23:50Z")

</div>

チャレンジありがとうございます！

こちらでも少し触ってみましたが、基本的なところではわりと行けそうな感じでした。  
シンプルなところから行きますとノリ（基本の形）としては画像のようになります。

![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/7/72428d95e92730b3dbe4c152cbedf3e101d6d7c2.png)

参考まで 🐾

---

<div class="post-metadata">

**Author:** ![Sivaxo](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sivaxo/32/926_2.png) [@Sivaxo](https://forum.onecomme.com/u/Sivaxo)\
**Post date:** [2023 年 9 月 18 日午前 10:54 UTC](https://forum.onecomme.com/t/topic/1307/6 "2023-09-18T10:54:38Z")

</div>

![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/c/c9967a6c2fed24140f7e76412d0688e1ac7fee9e.png)  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/4/4450e3fa61d43b3127e67c37475fbd164549c612.png)  
ありがとうございます。  
こちらでも再現できたのですが、変えたいのはネオンの発光部分なのです……  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/3/379e7120d0d8ef0f1cf3e0c0b3bfd33a1e32e421.png)

---

<div class="post-metadata">

**Author:** ![Sivaxo](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sivaxo/32/926_2.png) [@Sivaxo](https://forum.onecomme.com/u/Sivaxo)\
**Post date:** [2023 年 9 月 18 日午前 10:57 UTC](https://forum.onecomme.com/t/topic/1307/7 "2023-09-18T10:57:07Z")

</div>

ちなみにこんな感じの表記は受け付けないようでした。  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/b/b6a3d38295c78fe5e47652394851f8fca80ecbc8.png)

---

<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:** [2023 年 9 月 18 日午後 12:15 UTC](https://forum.onecomme.com/t/topic/1307/8 "2023-09-18T12:15:24Z")

</div>

はい、基本的な **ユーザーごとのスタイルの変更手段** はそれで把握されたと思いますので、あとはそこから発展的に記述を足していく感じになります。

ユーザーごとに個別に発光部分の記述をしていく感じになりますが、

特に、シャドー系の表現は（縁取り然り、発光表現も例にもれず）記述が長くなりますので、  
発光部分の変更をご所望の場合はひときわ大変な挑戦となるかと思います。

わんコメ本家のスタイルで発行にまつわる記述は以下になりますので、こちらのコードを参考に、

```auto
:root {
  --lcv-enter-duration: 256ms;
  --lcv-text-color: #fff;
  --lcv-name-color: #fff;
  --neon-color: #0ff;
  --neon-base-color: #fff;
  --lcv-max-width: 50%;
  --lcv-neon-shadow: 0 0 4px var(--neon-base-color),
  0 0 8px var(--neon-base-color),
  0 0 12px var(--neon-base-color),
  0 0 16px var(--neon-color),
  0 0 20px var(--neon-color),
  0 0 24px var(--neon-color),
  0 0 28px var(--neon-color);

  --lcv-neon-box-shadow: drop-shadow(0 0 2px var(--neon-base-color)) 
  drop-shadow(0 0 4px var(--neon-base-color)) 
  drop-shadow(0 0 6px var(--neon-color));
}

.name, .comment-text {
  text-shadow: var(--lcv-neon-shadow);
}
.name img, .comment-text img {
  filter: var(--lcv-neon-box-shadow);
}

```

ただし、わんコメ本家コードでは、  
シャドーの扱いがなるべく簡潔になるよう、変数などを駆使している都合で、  
（上記のコードを真似て）そのまま変数を使ってしまうとユーザーごとに記述を変えるのが難しいため、  
上記コードに加えて、基本的なシャドーの記述も参考にされると良いかと思われます。  
参考： [CSSでネオンサインの様な蛍光テキストに装飾する](https://lpeg.info/html/css_neontext.html)

* * *

ひとまずこちらでまた挑戦していただけますと幸いです 🐾

---

<div class="post-metadata">

**Author:** ![Sivaxo](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sivaxo/32/926_2.png) [@Sivaxo](https://forum.onecomme.com/u/Sivaxo)\
**Post date:** [2023 年 9 月 18 日午後 2:33 UTC](https://forum.onecomme.com/t/topic/1307/9 "2023-09-18T14:33:43Z")

</div>

とりあえず、第一段階は達成したのでご報告。  
スクショは  
ベース紫で、猫使からのコメントが来た場合「コメント」「名前」を水色変色させる  
というものになってます。  
–neon-color: #0ff;  
をいじれば好きな色になります。

> /\* テンプレカスタム ここまで \*/
> 
> .comment[data-user=“猫使”] .comment-text{  
> –lcv-enter-duration: 256ms;  
> –lcv-text-color: #fff;  
> –lcv-name-color: #fff;  
> –neon-color: #0ff;  
> –neon-base-color: #fff;  
> –lcv-max-width: 50%;  
> –lcv-neon-shadow: 0 0 4px var(–neon-base-color),  
> 0 0 8px var(–neon-base-color),  
> 0 0 12px var(–neon-base-color),  
> 0 0 16px var(–neon-color),  
> 0 0 20px var(–neon-color),  
> 0 0 24px var(–neon-color),  
> 0 0 28px var(–neon-color);
> 
> –lcv-neon-box-shadow: drop-shadow(0 0 2px var(–neon-base-color))  
> drop-shadow(0 0 4px var(–neon-base-color))  
> drop-shadow(0 0 6px var(–neon-color));  
> }
> 
> .comment[data-user=“猫使”] .name{  
> –lcv-enter-duration: 256ms;  
> –lcv-text-color: #fff;  
> –lcv-name-color: #fff;  
> –neon-color: #0ff;  
> –neon-base-color: #fff;  
> –lcv-max-width: 50%;  
> –lcv-neon-shadow: 0 0 4px var(–neon-base-color),  
> 0 0 8px var(–neon-base-color),  
> 0 0 12px var(–neon-base-color),  
> 0 0 16px var(–neon-color),  
> 0 0 20px var(–neon-color),  
> 0 0 24px var(–neon-color),  
> 0 0 28px var(–neon-color);
> 
> ```
> --lcv-neon-box-shadow: drop-shadow(0 0 2px var(--neon-base-color)) 
> drop-shadow(0 0 4px var(--neon-base-color)) 
> drop-shadow(0 0 6px var(--neon-color));
> 
> ```
> 
> }
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/6/617f9d1983002122fca064e758d70fc49a6428b7.png)

---

<div class="post-metadata">

**Author:** ![Sivaxo](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sivaxo/32/926_2.png) [@Sivaxo](https://forum.onecomme.com/u/Sivaxo)\
**Post date:** [2023 年 9 月 18 日午後 2:45 UTC](https://forum.onecomme.com/t/topic/1307/10 "2023-09-18T14:45:29Z")

</div>

次の壁が本題。  
「特定ワードで始まる場合」での変色。

> .comment[data-text^=“アル”] .comment-text{  
> –lcv-enter-duration: 256ms;  
> –lcv-text-color: #fff;  
> –lcv-name-color: #fff;  
> –neon-color: #0ff;  
> –neon-base-color: #fff;  
> –lcv-max-width: 50%;  
> –lcv-neon-shadow: 0 0 4px var(–neon-base-color),  
> 0 0 8px var(–neon-base-color),  
> 0 0 12px var(–neon-base-color),  
> 0 0 16px var(–neon-color),  
> 0 0 20px var(–neon-color),  
> 0 0 24px var(–neon-color),  
> 0 0 28px var(–neon-color);
> 
> –lcv-neon-box-shadow: drop-shadow(0 0 2px var(–neon-base-color))  
> drop-shadow(0 0 4px var(–neon-base-color))  
> drop-shadow(0 0 6px var(–neon-color));  
> }  
> または一行目を  
> .comment[data-user=“猫使”][data-text^=“アル”] .comment-text{  
> とすればよいとAIに教わりましたが、適応されず困っております。

---

<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:** [2023 年 9 月 18 日午後 7:12 UTC](https://forum.onecomme.com/t/topic/1307/11 "2023-09-18T19:12:52Z")

</div>

まずはやりたい事の１つ目が実現できた、という事でおめでとうございます 🐾

また、成功コードのシェアもありがとうございました！

* * *

さて、２つ目につきまして、

> [@Sivaxo](#):
>
> ２）  
> 理想の画像例（こんな風にしたい）  
> 猫使の発言でアル「から始まる場合：赤  
> 猫使の発言でビィ「から始まる場合：青
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/a/a262450e7283a875f3d38704f4f6d59b788404d7.png)

こちらについては１つ目共々それぞれに個性の強いカスタムでございますので、情報の粒度的に、一つのトピックで一緒に扱うのは少々はばかられることから、別トピックでたてさせていただきましたので、以降はあちらでお願いします 🐾  
→[特定のキーワードから始まるコメントの色を変えたい（neonテンプレート）](https://forum.onecomme.com/t/topic/1315)

* * *

※つきましては、当トピックのタイトルも１つ目のものに変更させていただきます