Utsumi
1
対象: わんコメ
表示画面: OBS
利用OS: Windows
利用バージョン: わんコメ: 3.0.6
過去ログ確認: した
ドキュメント確認（ Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. ）: した
コメント投稿者と内容の間に「：」を追加したいと考えております。
しかしながら、CSSに疎くインターネットを調べてもどのように追加したらいいのか理解することができませんでした。
こちらの調整方法をご教授いただけましたら幸いです。
以前使用していたChat v2.0 Style Generator 日本語版様では、以下のCSSが挿入されておりました。
yt-live-chat-text-message-renderer #author-name::after {
content: “:”;
margin-left: 2px;
}
追加の質問で申し訳ないのですが、アイコンとコメントの位置が平行になるような調整方法もご教授いただけましたら幸いです。
(添付画像がイメージです)
(添付画像は以前使用していたChat v2.0 Style Generator 日本語版様のものです)
reciru
2
画像のように
- 名前の横に「：」をつける
- 名前とコメント本文を改行しない
がご希望で合ってますでしょうか？
コメントのテンプレートを「basic」を利用した場合のCSSをご案内させていただきますね。
OBSのソースのindex.html（コメントテンプレート）をダブルクリックし、［カスタムCSS］に以下をコピペしてください。
.comment-block {
display: flex;
flex-direction: row;
}
.name{
white-space: pre;
}
.name::after {
content: '：';
}
アイコンとテキストとのズレが出たらmargin-topで調整してください。
.avatar にmargin-top:-5px;とマイナス入れてもいいんですが、.comment-blockにmargin-top:5px;といった感じに入れたほうがいい気がします。
.comment-block {
display: flex;
flex-direction: row;
margin-top: 5px;
}
.name{
white-space: pre;
}
.name::after {
content: '：';
}
あ、コメント本文は名前の下にも回り込みさせたほうがいいでしょうか？
「いいね！」 2
Utsumi
3
返信ありがとうございます！
質問が分かりづらくて申し訳ありませんでした。
そちらの質問内容で合っております。
分かりやすい説明ありがとうございます！求めていた調整方法でした！
本当にありがとうございます。
「いいね！」 2
Utsumi
4
後からすみません。
別のコメント欄のためにも、こちらのCSSもご教授いただけましたら嬉しいです。
これはアイコンもコメント行の文字の一部の様なサイズにされたい、という事でしょうか？
（単にサイズを小さくしたい、または、コメント本文の回り込みをアイコンの下まで持ってきたい？）
CSSに疎いとおっしゃってましたので、basicを元に改造しようとすると、CSSの記述がより複雑になることを考えますと、また、お伺いしているイメージから察するに、
「slim」のテンプレート（↓画像）で既に要件を満たしており、そちらで万事解決するのではないかと思われます。
あとは、「：」を入れるだけですので、「slim」テンプレートでしたらCSSは
.name::after {
content: '：';
}
の記述だけで簡潔に済ませられるように思われます。
また、この様にテンプレートごとに構造が異なるため、カスタムに関しましては、まず、利用するテンプレートを先に決められてからお聞きいただいた方があんばいよろしいかと思われます。
その上で、basicにおける名前の下への回り込みのカスタムがご所望でしたら、再度お知らせくださいませ 
（なぜか犬の足跡がだせない←）
以上、よろしくお願いします。
「いいね！」 1
Utsumi
6
ジェネレーターで「slim」を使用して変更してみたのですが、画像のようにコメントの文始めから改行された状態になってしまいます。
また、この様にテンプレートごとに構造が異なるため、カスタムに関しましては、まず、利用するテンプレートを先に決められてからお聞きいただいた方があんばいよろしいかと思われます。
以降気を付けたいと思います。
hyk
7
同じCSSで当方ではこうなりました。（OBS Studioのバージョンにより動作が異なることもあるかもしれません。文字化け？っぽい感じになったのでコロンを半角にしています。どちらにせよ改行はしていませんでした。）
.name::after {
content: ':';
}
もしよろしければOBS Studio上でも確認してみてください。
（21時08分JST 追記）
言われて気づいたのですが、
テンプレートがslimになっていることをもう一度確認してみてください。
Utsumi
8
こちらでした！完全に失念していました…！
失礼いたしました。
画像の通り解決いたしました。
本当にありがとうございました。
「いいね！」 2
