かわいいふきだしのコメントCSS【OBS】YouTube・Twitch対応｜VTuber・配信者向けの素材（8色・スーパーチャット対応）

OBS の「ブラウザ」ソースの「カスタム CSS」に貼りつけるだけで、

配信のコメント欄が、ふきだしに変わります

（YouTube はまるいアイコンつき、Twitch はふきだしだけになります）。

色は8色（さくら／れもん／そら／らべんだー／こーらる／みるく／わかば／もの）。

YouTube Live と Twitch の両方に対応しています。

このページで「無料版（さくら1色）」を選ぶと、さくら1色を無料でダウンロードできます。

8色セットと同じ CSS です（体験版ではありません。そのまま配信でお使いいただけます）。

スーパーチャット・メンバー加入・ステッカーも、同じまるみ・ふち・書体にそろえました。

配信中におさないボタン（メニュー・返信・ハート）は消してあります。

上の帯（YouTube のヘッダー・スパチャの帯・固定バナー、Twitch のコミュニティハイライト・ピン留め）も

消してあります。コメントの並びだけを出すためです。

【入っているもの】

◆ 8色セット　¥500

・8色 × YouTube用／Twitch用 ＝ CSS 16本（テキストファイル）

　（さくら／れもん／そら／らべんだー／こーらる／みるく／わかば／もの）

・つかいかたの案内（README.txt）

・ご利用の範囲（LICENSE.txt）

◆ 無料版（さくら1色）　¥0

・さくら 1色 × YouTube用／Twitch用 ＝ CSS 2本（テキストファイル）

・つかいかたの案内（README.txt）

・ご利用の範囲（LICENSE.txt）

【つかいかた】

1. OBS で「ブラウザ」ソースを作り、URL に次を入れます

　　YouTube … https://www.youtube.com/live_chat?v=（配信のID）&is_popout=1

　　Twitch 　… https://www.twitch.tv/popout/（チャンネル名）/chat

2. そのソースのプロパティをひらき、「カスタム CSS」の中をすべて消してから、

　 お好きな色のファイルの全文を貼りつけます

3. 幅は 360px 以上がおすすめです（それより狭いと、長いコメントの行数が増えます）

4. ソースを右クリックして「ブレンド方法」を「SRGBオフ」にします

　 （「既定」のままだと、明るい配信画面の上で、いちばん上のぼかしたところが灰色にくすみます）

【変えられるところ】

・色 … ファイルの上のほう、:root の中のはじめの4行

　 （--cc-bubble／--cc-line／--cc-accent／--cc-text）を書きかえると、お好きな色にできます

　 （そのすぐ下の --cc-muted と --cc-soft もそろえると、全部が変わります。

　 　そのまた下の --cc-accent-rgb は、いまの CSS では使っていません。

　 　Twitch 用は --cc-soft だけで足ります。--cc-muted は YouTube 用と並びをそろえるために

　 　置いてあるだけで、Twitch 用では使っていません）

・時こく（YouTube 用だけ） … この CSS では隠しています。

　 「時こく」の節の display の行の none を inline に書きかえると出ます

　 （YouTube 側の設定に関係なく出ます。行を消すだけでは出ません）

・投げ銭・メンバー加入の色（YouTube 用だけ） … ふだんは YouTube が決めた色のままです。

　 （投げ銭の色は金額によって変わります。メンバー加入はみどりのままです）

　 記号だけの行を2か所消すと、スパチャ・メンバー加入・ステッカーがまとめてテーマの色になります

・なまえの色（Twitch 用だけ） … テーマの色にそろえてあります。

　 「なまえと本文」の節の color: var(--cc-line) の行（注意書きのすぐ下）を消すと、

　 ご覧の方ごとの色に戻せます

・丸文字 … 1行目でネットから読んでいます。その1行を消すと、Mac では丸ゴシック体、

　 Windows ではふつうのゴシック体になります（丸文字のまま使うときは1行目を残してください）

【読みやすさについて】

・ふきだしの地は不透明にしてあります。すけさせると、うしろの配信画面の明るさによって

　字が読めなくなるためです。

・どの色も、字と地の明暗の差は 4.56:1 以上あります（読みやすさの目安 4.5:1 を満たしています）。

・コメントが画面いっぱいにならんでも配信画面がふさがらないよう、上のはしをぼかしています。

■ ご注意

・YouTube・Twitch・OBS のしくみに合わせて作った CSS です。

　これらのサービス側の作りが変わると、見た目が変わったり、効かなくなることがあります。

　その場合はできるかぎり直したものをお届けしますが、お約束はできかねます。

・OBS でコメントが表示できている状態が前提です。

・アイコンや絵は入っていません。コメントの見た目を変える CSS だけです。

・チャットに流れるギフト・サブスクのおしらせ（YouTube のメンバーシップのギフト、

　Twitch のサブスク・ギフト）は、ふきだしの見た目にそろえていません。

　実物で確かめられていないため、あてずっぽうの指定を入れていません。

　Twitch 用はコメント以外のおしらせのいくつか（おしらせ枠・コミュニティハイライト・

　ピン留めなど）を消しているので、これらも消えることがあります。

・丸文字はインターネットから読み込みます（消すこともできます・上に書いたとおりです）。

・OBS 以外のコメントビューアには対応していません。