# コメント文字の縁取りを2重にしたい

**URL:** <https://forum.onecomme.com/t/topic/1793>\
**Category:** カスタマイズ\
**Tags:** 確認待ち\
**Created:** [2024 年 8 月 7 日午前 9:39 UTC](https://forum.onecomme.com/t/topic/1793 "2024-08-07T09:39:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![yukihiko78](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@yukihiko78](https://forum.onecomme.com/u/yukihiko78)\
**Post date:** [2024 年 8 月 7 日午前 9:39 UTC](https://forum.onecomme.com/t/topic/1793/1 "2024-08-07T09:39:23Z")

</div>

## 対象

テンプレート

## 対象となるサービス

すべて

## 内容

現在下記のカスタムCSSで、コメントの色を白地に黒の縁取りで表示させています。

:root {  
–lcv-text-color: rgba(255,255,255,1);  
–lcv-comment-shadow: var(–lcv-comment-shadow-2);  
–lcv-comment-shadow-color: rgba(0,0,0,1);  
}

この黒の縁取りのさらに外側にもう一つ縁取りを付けて、2重の縁取りにすることはカスタムCSSを編集することで可能になりますでしょうか？  
下の画像のようなイメージです。

 ![タイトルなし](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/8/8709f655ff01c23a070d0fd91b915057c3122ef8.png)

他の方の配信や動画の字幕で2重の縁取りを見かけることがあり、やり方などを調べて試してみたのですが上手くいきませんでした。

現在は苦肉の策として、同じテンプレートを2つ重ねて配置して、上側のテンプレの縁取りを少し小さくすることで、縁取りが2重ぽく見えるようにして対処しています。  
文字の縁取りを2重にするカスタムCSSのやり方をご存じの方がいましたら、教えていただけますでしょうか。よろしくお願いいたします。

---

<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 年 10 月 14 日午後 3:27 UTC](https://forum.onecomme.com/t/topic/1793/2 "2024-10-14T15:27:50Z")

</div>

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

不都合な副作用もありますが、CSSのみでも以下のような方法が可能であることを確認しました。

```auto
.comment {
    text-shadow: 
        var(--lcv-name-shadow-2),
        var(--lcv-comment-shadow-5);
}

```

`※「縁取り」表現の実現は「影（シャドー）」の機能でもたらされておりますので以下の説明ではこれらほぼ同義ということでお願いします。`

この方法は、コメント（.comment）のスタイルの縁取りの指定に、  
名前用のシャドーとコメント用のシャドーの2種類を適用して2種類の縁を描画するというアプローチになります。

それぞれおしりの「-2」と「-5」の部分が縁の太さにあたり、-1～-5までの間で変更可能です。

この状態で名前用の影の色を内側の縁部分に使いたい任意の色、コメント用の影の色を外側の縁部分に適用したい色（今回の場合は文字の色と同じ）にすると2重の縁取りが完成します。（それぞれ色の設定はテンプレエディタで出力されるCSSで確認できます）

ちなみに副作用というのは、  
もともとは名前用の縁取りとコメント用の縁取りと別々に設定できますが、今回の方法は名前用の縁取りをコメント用にもカスタマイズするため、名前にもコメントとは別の縁取りを付けたい場合に縁取りの設定が連動しているため自由にいじれない、といった点があるかと思います。

* * *

以上、他にも高度な方法や愚直に膨大な記述を行う方法もありますが、ひとまずこれが手っ取り早そう、という感じになります。参考になりましたら幸いです🐾

---

<div class="post-metadata">

**Author:** ![yukihiko78](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@yukihiko78](https://forum.onecomme.com/u/yukihiko78)\
**Post date:** [2024 年 10 月 16 日午前 10:40 UTC](https://forum.onecomme.com/t/topic/1793/3 "2024-10-16T10:40:56Z")

</div>

教えていただきまして、ありがとうございます！  
週末まで自宅に帰れないため、実際に試すまで少し時間がかかってしまいますが、試した結果をまたご報告させていただきます！

---

<div class="post-metadata">

**Author:** ![yukihiko78](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@yukihiko78](https://forum.onecomme.com/u/yukihiko78)\
**Post date:** [2024 年 10 月 19 日午前 12:57 UTC](https://forum.onecomme.com/t/topic/1793/4 "2024-10-19T00:57:01Z")

</div>

改めまして、教えていただきましてありがとうございます。  
普段使用していたCSSに、教えていただいたCSSを追加してみたのですが、テンプレートに何も変化がありませんでした。

以下が実際に試したCSSになります。

:root {  
–lcv-name-color: rgba(255,255,255,1);  
–lcv-text-color: rgba(255,255,255,1);  
–lcv-background-color: rgba(0,0,0,0.64);  
–lcv-name-shadow: var(–lcv-name-shadow-2);  
–lcv-name-shadow-color: rgba(0,0,0,1);  
–lcv-comment-shadow: var(–lcv-comment-shadow-2);  
–lcv-comment-shadow-color: rgba(255,255,255,1);  
–lcv-border-color: rgba(0,0,0,0)  
}

.comment {  
text-shadow:  
var(–lcv-name-shadow-2),  
var(–lcv-comment-shadow-2);  
}

以前から使用していた部分に関しては、数値を変更するとテンプレートに反映されるのですが、今回追加した部分は数値を変えてもテンプレートに変化がありませんでした。

以前から使用していたCSSと干渉してしまっているのかと思い、今回教えていただいたCSSのみで試してみたりもしましたが、テンプレートの縁取りに変化がありませんでした。

以前から使用していたCSSで、数値を変えたり削除する部分などはありますでしょうか？

最初に質問する時に書き忘れていましたが、現在使用しているわんコメのバージョンは 7.0.0 beta 4 になります。

---

<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 年 10 月 20 日午後 3:10 UTC](https://forum.onecomme.com/t/topic/1793/5 "2024-10-20T15:10:55Z")

</div>

確認ありがとうございます。2点気になった点がございます。  
1点目、  
そういえば試すテンプレートによりHTMLの構造が異なりますので、例えばbasicテンプレートの場合はコメントテキストのピンポイントの位置を示すのは.commentではなく.comment-textになりますので、その場合は.commentでは意図した通りの動作にならないのかと思います（その他のテンプレートに関しても、テンプレエディタで生成されるコードから読み取ることは可能です）。  
2点目、こちらはたまたまかと思ますが、2重表現のためには影の太さに差を付ける必要がありますので、お示しいただいているものはたまたま-2同士で一致しているため、縁取りがでたとしても1重になるんじゃないかと思われます。  
以上を踏まえましてお試しいただけますと幸いです🐾

```auto
:root {
/*【問題なさそうですので省略】*/
}

.comment-text {/*.comment→.comment-textに変更【※1】*/
    text-shadow: 
        var(--lcv-name-shadow-2),
        var(--lcv-comment-shadow-3);/*-2 → -3に変更【※2】*/
}

/*【※1】→テンプレートの構造によるかと思いますが、basicの場合はcommentではなくcomment-textのほうがうまくいきましたが、ここはお使いのテンプレートによって異なる可能性があり、その場合は適宜適切な指定が必用となります*/
/*【※2】→もし同じ数値を指定されていた場合は完全に重なってしまいますので、2重表現をするためには後の数値（幅）の方が大きくなるように数をずらす必用があります*/

```

---

<div class="post-metadata">

**Author:** ![yukihiko78](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@yukihiko78](https://forum.onecomme.com/u/yukihiko78)\
**Post date:** [2024 年 10 月 21 日午前 11:27 UTC](https://forum.onecomme.com/t/topic/1793/6 "2024-10-21T11:27:19Z")

</div>

最初にどのテンプレートを使用しているかを明記するべきでした。失礼いたしました。

pop-chat を使用していますので、それに合わせて変更することと、数値を同じにしてしまうと重なって二重に見えなくなる旨、丁重に教えていただきましてありがとうございます！

早速試してみたいところですが、今週もまた週末まで帰宅できないため、週末に確認次第ご報告させていただきます！

---

<div class="post-metadata">

**Author:** ![yukihiko78](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@yukihiko78](https://forum.onecomme.com/u/yukihiko78)\
**Post date:** [2024 年 10 月 25 日午後 2:33 UTC](https://forum.onecomme.com/t/topic/1793/7 "2024-10-25T14:33:11Z")

</div>

![タイトルなし](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/1/12beef140c16e7fbd207ae6dbff2d4a8685c8576.png)  
教えていただいたCSSを試したところ、無事に二重の縁取りにすることができました！

テンプレート（pop-chat） では、以下のCSSを追加することでコメントの縁取りを二重にできました。

.comment-text {  
text-shadow:  
var(–lcv-name-shadow-3),  
var(–lcv-comment-shadow-5)  
}

また、以下のCSSを追加することで、名前の縁取りも二重にできました。

.comment-text,.name {  
text-shadow:  
var(–lcv-name-shadow-3),  
var(–lcv-comment-shadow-5)  
}

さらに余談ですが、テンプレート（synapse）では、下記のCSS追加でコメントの縁取りを二重にできました。

.comment {  
text-shadow:  
var(–lcv-name-shadow-3),  
var(–lcv-comment-shadow-5)  
}

副作用であるコメントと名前の縁取りを別々に設定できない点におきましても、もともと同じ設定にするつもりでしたので、全く問題ありませんでした。

今までは二重の縁取りにするために、縁取りの色や太さを変えたテンプレートを二重に重ねて無理やり再現していましたが、教えていただいたCSSを追加することで、一つのテンプレートだけでやりたかった事を完全に達成することができました！

本当にありがとうございます！

---

<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 年 11 月 2 日午後 1:26 UTC](https://forum.onecomme.com/t/topic/1793/8 "2024-11-02T13:26:49Z")

</div>

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

* * *

コメント：  
解決されたようで何よりです！  
具体的なコード内容までシェアいただきありがとうございます！引き続き良き配信ライフを🐾