特定のキーワードから始まるコメントの色を変えたい(neonテンプレート)

特定のキーワードから始まるコメントの色を変えたい からディスカッションを続行:

まず、現状のneonテンプレートの.commentの部分のプロパティの中に、
「data-text]というプロパティ自体がそもそも入ってないため、
data-textを使用した指定は空振りとなり利用できないのではないかと思われます。


cssのみだとちょっと難しいと思いますので、おつくり頂いたCSSコードに加えて、プラスワンでどうにかしてテンプレートの.commentの部分に「data-text」を捻じ込む必要があるかとおもいます。

方法としましては、テンプレートを複製してdata-textを含めるように改造して利用されるか、

その他のアイデアとして、拙作の拡張テンプレートからneonテンプレートを呼び出す方法で、deta-textプロパティを付加する様なアプローチも考えられます。

後者につきましては、そのうちリリースする目論見自体はありましたが、ご用命いただけましたら優先順位を上げて調整してみます。

neonテンプレートのHTMLとCSS追記で、それっぽいことはできるかと思いますので共有。


まずは、HTMLファイルの変更から。
※プリセットを変更するとバージョンアップで更新されるため、カスタムフォルダにテンプレートをコピーしてからコピーした側で実行してください

HTMLの26行目に以下を追記。

:data-text="comment.data.comment"

CSSに以下を追記。

[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));
}

これで実行すれば、このような形で装飾がなされているかと思います。


ただこれだと、名前が「猫使」もしくはコメントが「アル」から始まってさえいれば色が変わってしまうため、名前が「猫使」かつコメントが「アル」から始まる場合に色を変えるのであれば、以下のようにCSSを変えればよいかと思います。

[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));
}

結果としては、先ほどのものからこのように変わります。


どちらかと言えば後者のCSSのほうが、用途にマッチしているかもしれませんね。

実際に変更してみて、思ったとおりの動作になっているか、確認いただければと存じます。


最後にくどいようですが、neonテンプレートをカスタムフォルダにコピーした上で、カスタムフォルダにコピーした側のテンプレートで改造してください :pray:

sikozonさん
shinkunoshizukuさん
ありがとうございました。
おかげで、理想形になりました!