# 特定のキーワードから始まるコメントの色を変えたい（neonテンプレート） **URL:** \ **Category:** カスタマイズ\ **Created:** [2023 年 9 月 18 日午後 5:53 UTC](https://forum.onecomme.com/t/topic/1315 "2023-09-18T17:53:05Z")\ **Posts on this page:** 4\ **Page:** 1
**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 日午後 5:53 UTC](https://forum.onecomme.com/t/topic/1315/1 "2023-09-18T17:53:05Z")
[特定のキーワードから始まるコメントの色を変えたい](https://forum.onecomme.com/t/topic/1307/10) からディスカッションを続行: > [@特定のユーザーのコメントの色を変えたい（neonテンプレート）](https://forum.onecomme.com/t/topic/1307/1): > > 理想の画像例（こんな風にしたい） > 猫使の発言でアル「から始まる場合：赤 > 猫使の発言でビィ「から始まる場合：青 > > ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/a/a262450e7283a875f3d38704f4f6d59b788404d7.png) > [@特定のユーザーのコメントの色を変えたい（neonテンプレート）](https://forum.onecomme.com/t/topic/1307/10): > > 次の壁が本題。 > 「特定ワードで始まる場合」での変色。 > > > .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に教わりましたが、適応されず困っております。 ---
**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:33 UTC](https://forum.onecomme.com/t/topic/1315/2 "2023-09-18T19:33:12Z")
まず、現状のneonテンプレートの.commentの部分のプロパティの中に、 「data-text]というプロパティ自体がそもそも入ってないため、 data-textを使用した指定は空振りとなり利用できないのではないかと思われます。 * * * cssのみだとちょっと難しいと思いますので、おつくり頂いたCSSコードに加えて、プラスワンでどうにかしてテンプレートの.commentの部分に「data-text」を捻じ込む必要があるかとおもいます。 方法としましては、テンプレートを複製してdata-textを含めるように改造して利用されるか、 その他のアイデアとして、拙作の拡張テンプレートからneonテンプレートを呼び出す方法で、deta-textプロパティを付加する様なアプローチも考えられます。 後者につきましては、そのうちリリースする目論見自体はありましたが、ご用命いただけましたら優先順位を上げて調整してみます。 ---
**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:** [2023 年 9 月 18 日午後 8:20 UTC](https://forum.onecomme.com/t/topic/1315/3 "2023-09-18T20:20:14Z")
neonテンプレートのHTMLとCSS追記で、それっぽいことはできるかと思いますので共有。 * * * まずは、HTMLファイルの変更から。 ※プリセットを変更するとバージョンアップで更新されるため、 **カスタムフォルダにテンプレートをコピーしてからコピーした側で実行** してください HTMLの26行目に以下を追記。 ```auto :data-text="comment.data.comment" ``` CSSに以下を追記。 ```auto [data-text^="アル"] .comment-text, [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)); } ``` * * * これで実行すれば、このような形で装飾がなされているかと思います。 ![スクリーンショット 2023-09-19 050423](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/a/ab692b4c64954eddeb377b0680a97486449cd365.png) * * * ただこれだと、名前が「猫使」もしくはコメントが「アル」から始まってさえいれば色が変わってしまうため、 **名前が「猫使」かつコメントが「アル」から始まる場合に色を変える** のであれば、以下のようにCSSを変えればよいかと思います。 ```auto [data-user="猫使"][data-text^="アル"] .comment-text, [data-user="猫使"][data-text^="アル"] .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)); } ``` 結果としては、先ほどのものからこのように変わります。 ![スクリーンショット 2023-09-19 050814](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/e/e85f74cf877543d390eded65324ac3cae86843f7.png) * * * どちらかと言えば後者のCSSのほうが、用途にマッチしているかもしれませんね。 実際に変更してみて、思ったとおりの動作になっているか、確認いただければと存じます。 * * * 最後にくどいようですが、neonテンプレートをカスタムフォルダにコピーした上で、カスタムフォルダにコピーした側のテンプレートで改造してください 🙏 ---
**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 月 19 日午前 7:52 UTC](https://forum.onecomme.com/t/topic/1315/4 "2023-09-19T07:52:21Z")
[sikozon](https://forum.onecomme.com/u/sikozon)さん [shinkunoshizuku](https://forum.onecomme.com/u/shinkunoshizuku)さん ありがとうございました。 おかげで、理想形になりました！ ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/e/e5c419d659bfe46151b6ce50a00c3cef5186f561.png)