# コメントの最後に♥️が付くようにしたい
**URL:** https://forum.onecomme.com/t/topic/320
**Category:** カスタマイズ
**Tags:** 確認待ち
**Created:** [2022 年 5 月 30 日午前 1:36 UTC](https://forum.onecomme.com/t/topic/320 "2022-05-30T01:36:41Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@user2](https://forum.onecomme.com/u/user2)
#### Post date: [2022 年 5 月 30 日午前 1:36 UTC](https://forum.onecomme.com/t/topic/320/1 "2022-05-30T01:36:41Z")
語気の強いコメントとか指示コメント等、そのままだと空気が悪くなりやすいコメントって、ありますよね?それを少しでも和らげたいので、リスナーコメントの最後に❤を強制的にけてやりたいのですが、cssで可能でしょうか?
---
### Author:  [@reciru](https://forum.onecomme.com/u/reciru)
#### Post date: [2022 年 5 月 30 日午前 11:52 UTC](https://forum.onecomme.com/t/topic/320/2 "2022-05-30T11:52:10Z")
OBSの[カスタムCSS]に以下のソースをコピペすればできると思います。
> **カスタムCSSの場所（クリックで展開）**
>
> OBSのソースにあるコメントテンプレート（index.html）をダブルクリックして出てきたプロパティの下の方にあります。
```auto
.comment-text::after {
content: '❤';
}
```
---
### Author:  [@user2](https://forum.onecomme.com/u/user2)
#### Post date: [2022 年 6 月 1 日午前 8:09 UTC](https://forum.onecomme.com/t/topic/320/3 "2022-06-01T08:09:09Z")
入れてみたのですが、反映されません．．．
現在のカスタムCSS
body {
・ font-weight:bold;
background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
.comment-text { font-weight: bold; }
.comment-text::after {
content: ‘❤’;
}
---
### Author:  [@shinkunoshizuku](https://forum.onecomme.com/u/shinkunoshizuku)
#### Post date: [2022 年 6 月 1 日午前 8:23 UTC](https://forum.onecomme.com/t/topic/320/4 "2022-06-01T08:23:12Z")
CSSでお使いの記号が違うようです。
> [@user2](#):
>
> .comment-text::after {
> content: ‘❤’;
> }
reciruさんが書いてくださっているCSSをコピペ(現在のcomment-text::afterは削除)
> [@reciru](#):
>
> ```auto
> .comment-text::after {
> content: '❤';
> }
>
> ```
して貼り付ければ、考えているような動作にならないでしょうか。
ハートはこの記号[']で囲むことになります。
---
### Author:  [@ASTIE](https://forum.onecomme.com/u/ASTIE)
#### Post date: [2022 年 6 月 1 日午前 8:29 UTC](https://forum.onecomme.com/t/topic/320/5 "2022-06-01T08:29:34Z")
テンプレートによっては若干構造が違いますので、どのテンプレートに適用したいかも記載頂けるとより確実になるかと思います
---
### Author:  [@user2](https://forum.onecomme.com/u/user2)
#### Post date: [2022 年 6 月 1 日午前 8:45 UTC](https://forum.onecomme.com/t/topic/320/6 "2022-06-01T08:45:01Z")
テンプレートは”yurucamp”です。reciru様の教えてくださったCSSでもうまく動作しませんでした・・・。お手数おかけして申し訳ありません。
---
### Author:  [@user2](https://forum.onecomme.com/u/user2)
#### Post date: [2022 年 6 月 1 日午前 8:46 UTC](https://forum.onecomme.com/t/topic/320/7 "2022-06-01T08:46:19Z")
shinkunoshizuku様のCSSでも動作しませんでした。大変お手数おかけします｡｡｡
---
### Author:  [@shinkunoshizuku](https://forum.onecomme.com/u/shinkunoshizuku)
#### Post date: [2022 年 6 月 1 日午前 9:54 UTC](https://forum.onecomme.com/t/topic/320/8 "2022-06-01T09:54:04Z")
“yurucamp"のテンプレートだと、変更しようとしていた”.comment-text::after"というものが、すでに吹き出し部分に使われてしまっているため、カスタムCSSに書き加えただけだとうまく動かないようですね。
先に使っているテンプレートをお伺いすればよかったのですが、お手数おかけしてしまいました、申し訳ございません。
コメント最後に、とは簡単に行かなそうですが、コメントの頭側にならばつけやすいようです。
（コメントは語気の強いコメントの例ですので、お気になさらず）
色は画像で見やすいように変えたコードを、そのままにしてあります。
```auto
.comment-body::before {
content: '❤';
color: #f00;
}
```
実際には、コメントの文字前に挿入しているCSSなわけではないので、ハート複数個にしたりするとおかしな表示になりますが、なにもないよりマシに見えますか？
---
### Author:  [@user2](https://forum.onecomme.com/u/user2)
#### Post date: [2022 年 6 月 1 日午前 10:58 UTC](https://forum.onecomme.com/t/topic/320/9 "2022-06-01T10:58:41Z")
お忙しい中、本当にありがとうございました！
---
### Author:  [@sikozon](https://forum.onecomme.com/u/sikozon)
#### Post date: [2022 年 6 月 2 日午後 1:24 UTC](https://forum.onecomme.com/t/topic/320/10 "2022-06-02T13:24:31Z")
なるほど、yurucampテンプレートだと::afterが使えないのですね。
少し自力が要りますが、末尾に画像を付ける方法を思いつきましたので共有させていただきます。
```auto
.comment-text {
padding-right: 32px;
background: no-repeat right
url(https://via.placeholder.com/24) ;
}
```
上記でコメントの末尾に画像が追加できることを確認いただけるかと思います。
あとは、
`url(https://via.placeholder.com/24)`
のところが仮の画像になっていますので、
実際にハートを表示するためには、ハートの画像を自分で、または誰かに用意してもらう必要があります。
* * *
他にも色々と補足したいところですが、
まずはこのやり方がuser2さんの手に負えそうかどうかで、チャレンジされるか判断いただけましたらと思います。
* * *
_（追記）_
_すみません、思いつきだっただけに確認が足りなかったようです。_
_１行のコメントに関しては問題ありませんでしたが、_
_この方法だと複数行になる場合に意図通りの挙動にならないようです。_
※こちらの画像ではサンプル中のURLをハートのものに差し替えて試しています。
---
### Author:  [@user2](https://forum.onecomme.com/u/user2)
#### Post date: [2022 年 6 月 4 日午前 10:30 UTC](https://forum.onecomme.com/t/topic/320/11 "2022-06-04T10:30:00Z")
うわーーーーーすごい惜しい！！！でもここまで考えてくださって本当にありがとうございます！
---
### Author:  [@sikozon](https://forum.onecomme.com/u/sikozon)
#### Post date: [2022 年 8 月 23 日午前 11:09 UTC](https://forum.onecomme.com/t/topic/320/12 "2022-08-23T11:09:35Z")
だいぶ時間が経ちましたのでもう見てらっしゃるかはわかりませんが、
> [@OBSに表示されるコメントでの時刻表示](http://forum.onecomme.com/t/topic/313/2):
>
> まにあわせですが、 簡易的にタイムスタンプのようなものを付加する拡張テンプレートを作ってみましたので使えそうでしたらどうぞ。 こちらでの表示時刻はコメント投稿時間ではなく、 コメントをOBSに表示したタイミングの時刻となります。 （この方法であれば実装が簡単そうだったので作ってみました。 本物のタイムスタンプが欲しい場合はやはりご要望の通り、公式の対応を待つことにしましょうｗ）
こちらを流用すればさほど手間もかからず作成できそうでしたので、ついでという事で作ってみましたのでシェアさせていただきます🐾
> **[わんコメテンプレート「x-attach\_plus-heart」配布｜嗜好領域@趣味プログラム系V｜pixivFANBOX](https://sikozon.fanbox.cc/posts/4331235)**
>
> 概説
> わんコメ標準テンプレートのコメントの最後に「♥」（ハートマーク）を付加する拡張テンプレートになります。
> （※当テンプレートはx-attachテンプレートのデモンストレーションも兼ねて作成したものになります。）
> （※pro版のテンプレートには非対応となっております。）
> とりあえずDL↓（バージョン：20220823）
> 準...
