語気の強いコメントとか指示コメント等、そのままだと空気が悪くなりやすいコメントって、ありますよね?それを少しでも和らげたいので、リスナーコメントの最後に
を強制的にけてやりたいのですが、cssで可能でしょうか?
OBSの[カスタムCSS]に以下のソースをコピペすればできると思います。
カスタムCSSの場所（クリックで展開）
OBSのソースにあるコメントテンプレート（index.html）をダブルクリックして出てきたプロパティの下の方にあります。
.comment-text::after {
content: '❤';
}
「いいね！」 2
入れてみたのですが、反映されません．．．
現在のカスタム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: ‘’;
}
CSSでお使いの記号が違うようです。
reciruさんが書いてくださっているCSSをコピペ(現在のcomment-text::afterは削除)
して貼り付ければ、考えているような動作にならないでしょうか。
ハートはこの記号[']で囲むことになります。
テンプレートによっては若干構造が違いますので、どのテンプレートに適用したいかも記載頂けるとより確実になるかと思います
テンプレートは”yurucamp”です。reciru様の教えてくださったCSSでもうまく動作しませんでした・・・。お手数おかけして申し訳ありません。
shinkunoshizuku様のCSSでも動作しませんでした。大変お手数おかけします｡｡｡
“yurucamp"のテンプレートだと、変更しようとしていた”.comment-text::after"というものが、すでに吹き出し部分に使われてしまっているため、カスタムCSSに書き加えただけだとうまく動かないようですね。
先に使っているテンプレートをお伺いすればよかったのですが、お手数おかけしてしまいました、申し訳ございません。
コメント最後に、とは簡単に行かなそうですが、コメントの頭側にならばつけやすいようです。
（コメントは語気の強いコメントの例ですので、お気になさらず）
色は画像で見やすいように変えたコードを、そのままにしてあります。
.comment-body::before {
content: '❤';
color: #f00;
}
実際には、コメントの文字前に挿入しているCSSなわけではないので、ハート複数個にしたりするとおかしな表示になりますが、なにもないよりマシに見えますか？
お忙しい中、本当にありがとうございました！
なるほど、yurucampテンプレートだと::afterが使えないのですね。
少し自力が要りますが、末尾に画像を付ける方法を思いつきましたので共有させていただきます。
.comment-text {
padding-right: 32px;
background: no-repeat right
url(https://via.placeholder.com/24) ;
}
上記でコメントの末尾に画像が追加できることを確認いただけるかと思います。
あとは、
url(https://via.placeholder.com/24)
のところが仮の画像になっていますので、
実際にハートを表示するためには、ハートの画像を自分で、または誰かに用意してもらう必要があります。
他にも色々と補足したいところですが、
まずはこのやり方がuser2さんの手に負えそうかどうかで、チャレンジされるか判断いただけましたらと思います。
（追記）
すみません、思いつきだっただけに確認が足りなかったようです。
１行のコメントに関しては問題ありませんでしたが、
この方法だと複数行になる場合に意図通りの挙動にならないようです。
※こちらの画像ではサンプル中のURLをハートのものに差し替えて試しています。
「いいね！」 3
うわーーーーーすごい惜しい！！！でもここまで考えてくださって本当にありがとうございます！
「いいね！」 1
