いまからVTuberを目指す方へ『VTuberの教科書』

【OBS】コメント欄をかわいい吹き出しにするCSS配布中【YouTube・Twitch対応】

当サイトでは、YouTubeやTwitchのコメント欄をカスタマイズするカスタムCSSを配布しています。

吹き出しをはじめ、かわいいデザインをそろえているので、ぜひチェックしていってください。

YouTubeでも解説中!

この記事の内容をYouTubeでも解説しています。動画のほうが見やすい方は下記のリンクからご覧ください。

コメント欄を吹き出しにできるCSS

当サイトの運営する「はいしんツールキット」で配布している、コメント欄のカスタムCSSを紹介します。

まずは、チャット風の吹き出しです。

吹き出しコメント欄
吹き出しコメント欄

飛び出しが左側にあるのと、右側にあるのとで、2種類の吹き出しを用意しています。

YouTubeとTwitchに対応Twitchに対応しているCSS生成ツールは珍しいのではないでしょうか。ぜひ使ってください。

それぞれ、色とフォントを変更可能。自動的にCSSを生成してくれます。

CSSをコピーしたら「OBS」で設定するだけ。詳しい方法は後述します。

\コメ欄を簡単カスタマイズ!/

コメ欄カスタマイズはこちらから

シンプルなカスタマイズができるCSS

シンプルコメ欄
シンプルコメ欄

シンプルな変更ができるコメント欄も用意しています。

フォントカラーを変えれるもの(画像左)と縁取りのカラーを変えれるもの(画像右)です。

ほかのサイトで配布しているCSSでは、むやみに縁取りをとりすぎ、不格好になっているものも散見されます。当サイトのツールでは、縁取りの大きさにはこだわっているので、見やすくカスタマイズできるのではないでしょうか。

もちろん、YouTubeとTwitchの両対応。フォントも変更できます。


当サイトのコメ欄カスタマイズツールでは、コメントを打ったユーザーの名前は表示させないようにしています。(メンバー・購読者のスタンプは表示されます)

ユーザの中には、長い名前の人や不適切な名前の人もいるかと思います。名前を隠すことで、コメントを完全に左揃え・治安も守る仕様です。

カスタマイズしたコメント欄をOBS上に表示させる方法

ここからは、YouTube + OBSの組み合わせでコメントを表示する方法を説明します。

STEP1:ライブ配信のコメント欄を準備する

コメント欄をポップアップ
Lofi girl」様の配信より引用

YouTubeライブの配信画面を開き、コメント欄の右上の三点リーダをクリック。

チャットをポップアウト」をクリックし、新規ウィンドウとしてコメント欄を表示させます。

ポップアウトしたコメント欄のリンクをのちのSTEPで使用します。

STEP2:コメント欄のデザインを準備する

コメント欄カスタマイズツール」にアクセスし、お好みのデザインにカスタマイズします。

今回はふきだしのコメント欄を例として取り上げます。

ほかのデザインでも操作は変わらないので、お好きなものをどうぞ。

ふきだしコメント欄
  • フォント選択
  • カラー選択

以上を選択します。

「コピペ用CSS」はSTEP3で使用します。

STEP3:OBSで設定する

OBSのソースに「ブラウザ」を追加します。

OBSソースのブラウザを追加する

「URL」の欄にSTEP1で用意した、コメント欄のポップアップのリンクをコピペします。

コメント欄のポップアップ

「カスタムCSS」の欄にはSTEP2で準備した「コピペ用CSS」をコピペします。

完成形は↓↓のような感じ。

最後にOKボタンを押して完了です。

Twitch用にCSSを使いたい方もYouTubeと操作はそれほど変わりません。

コメント欄にある歯車マークから「チャットをポップアウト」し、リンクをコピー。
OBS上でブラウザソースを追加し、コピーしたリンクを貼り付けます。
「カスタムCSS」にTwitch用のCSSをコピペすれば完了です。

YouTubeとTwitchでコピペするCSSが違うので注意してください。

吹き出しのサイズ調整はOBS上で行います

吹き出しの幅調整方法

もし、コメント欄の幅が長すぎるときは、OBS上の「幅」を小さくすることで調整します。

高さに関しても同様です。

はいしんツールキットは便利なツールがたくさん

当サイトが提供している「はいしんツールキット」では、デジタル時計のカスタマイズのほかに、discordオーバレイのカスタマイズやデジタル時計など、オリジナルのツールを用意しています。

【Discord】オーバレイを横並び・四角・動くように!カスタムCSS配布中【OBS】 【配信者向け】かわいくておしゃれな配信用時計ジェネレータ【OBS】

無料で使えるのでぜひ使ってみてくださいね!

また、「こんなデザインが欲しい!」「こんなツールが欲しい!」「ここをもっと使いやすくしてほしい!」などのご意見もぜひお待ちしております。

この記事のコメント欄か運営Twitterまでお気軽にどうぞ!

2023/01/05追記

コメントで沢山のご要望をいただいています。いつもありがとうございます!

運営側から返信があるとメール通知が行くようになっていますが、迷惑メールに格納されてしまう場合もあります。

基本的に当日~2日以内には返信しますので、改めてこの記事をチェックいただけると助かります!

お手数おかけしますがよろしくお願いします!!

37 COMMENTS

あんこ

コメント失礼致します。
コメント欄を吹き出しにした上でフェードアウトさせる方法はございますか?
お忙しい中恐縮ですが、ご返信いただけると幸いです。

返信する
ちゃーず

とても魅力的な素材ありがとうございます!
わたしもフェードアウトさせたくてCSS animationを調べたのですが、どう書けばいいのかわからず、
教えていただけないでしょうか。。。
何卒宜しくお願いします。

返信する
運営

了解です!
youtubeを例に書いてみました。下記のコードをカスタムCSS欄に追記してください。
表示から4秒後に3秒かけてfadeoutするようにしています。適宜変更して使ってください!

yt-live-chat-text-message-renderer #message,
yt-live-chat-paid-message-renderer,
yt-live-chat-membership-item-renderer{
animation: fadeout-keyframes 3s ease 4s 1 forwards;
}
@keyframes fadeout-keyframes {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

返信する
ちゃーず

お早いお返事ありがとうございます!!
twitchでの使用でしたが、参考にしたらできました!!!
とても嬉しいです!本当にありがとうございました!

ぷりん

素敵な素材感謝いたします。
いつもありがたく使用させていただいております。

Youtube配信のスーパーチャットのコメントが青、水色、緑、黄までのスパチャはコメント表示されるのですが、オレンジ、マゼンタ、赤のスパチャはコメント表示が反映がされません。
お忙しいところ大変恐縮ではありますが、可能であればご対応のほどよろしくお願いいたします。

返信する
運営

使っていただきありがとうございます!
色別の表示反映については確認できなかったのですが、スパチャ・メンバーシップのデザインが崩れているのは確認し修正しました。
解決していればいいのですが…まだ不具合があればご連絡いただけると幸いです!

改めてブラウザソースを作り直す+URLの末尾に「?2」をつけるをすれば即時反映されるはずです。

返信する
さぃと

とても素敵なツールをありがとうございます。
要望になってしまい恐縮なのですが、、
「見出し付きコメント」を利用したいなと思っているのですが、長いコメントの際など、見出しの長さが改行されたコメントに対して長さが足りないかな?と感じてしまいました。
可能なら1つのコメントに対して見出しも上下の高さが揃っていると嬉しいです。

返信する
運営

ご要望ありがとうございます!Twitchのほうですかね?
確かに短かったので、長さを調節しました。完全には揃えていませんが、見やすくなっているかと思います。

実装直後はOBSにキャッシュが残ります。
@import url(“https://ruri.info/tool/css/twmidashi1Comment.css?2”);
のように、「リンク+?2」のように?と数字を付けると、すぐに使えます。

返信する
さぃと

早々のご対応ありがとうございます。
ただ数字を着けてみてもキャッシュを更新してみても以前と変わりませんでした。。。
何か対応策がありましたらご教示いただけると嬉しいです。

返信する
運営

あらためて、見出し付きコメントをTwitchで試したところ問題なく表示できます。
他の対応策として、
・ブラウザソースを作り直す
・追加するのをほかの数字に変えてみる
を試してみてください!

今回の変更は微調整の域なので、これで変化がなければ、想定されている改修をこちらができていないとかですかね…。
以上、確認お願いしますー!

返信する
さぃと

ありがとうございます!!
ブラウザソースを作り直してみたら無事に長くなってました!!
確認不足で申し訳ありません。。。

長さも程よい感じで思い描いた通りのコメント欄になりました。。!嬉しいです!!
こちらのツールありがたく利用させていただきます!!

運営

はじめまして!
他の方のコメントにあるように、配信マネージャーのコメントリンクを使っているのではないでしょうか?
チャンネルページ(視聴者も見る画面)からリンクを持ってくるといけるかと思います。

返信する
ぴこ

配信マネージャーのほうから開いていたので、チャンネルページから
開きなおして貼り付けたところ、ログインの表示はなくなったのですが
試しにコメントしてみましたが反映されません(´;ω;`)

返信する
運営

なるほど!
Twitchのコメ欄は、OBSに表示されるまでのラグがあります。
ためしに、コメントの流れが活発な配信者さんのコメ欄を表示できるか検証してもらえますか?
もし、表示出来れば方法はあっているので、自分のコメ欄に連投すれば表示を確認できると思います!

返信する
ぴこ

obs上の表示が小さかったみたいで、反映されていました!迅速な対応ありがとうございます!
とても可愛い配信画面が出来上がりました!

これからも配信ツール楽しみにしてます♪

返信する
ぴこ

初めまして!とてもかわいい素材をありがとうございます!

Twitchで利用したいと思いobsで設定をしていたのですが
コメント欄のリンクを貼り付けたところ、Twtitchにログインという画面が出てきます。
やり方などは問題ないと思うのですが、コメント欄の表示がされません
ご対応よろしくお願いいたします。

返信する
運営

はじめまして、ご利用ありがとうございます!!!
貼り付けたリンクは「https://www.twitch.tv/popout/<配信者のID>/chat?popout=」になっていますか?

返信する
名無し

こんにちは。素敵なツールありがとうございます!

こちら使用させていただいたのですが
絵文字を使うと改行されてしまいます…!
改行しないようにできますでしょうか??

お忙しいところ恐縮ですが、お時間があればよろしくお願いいたします!

返信する
運営

ご報告ありがとうございます!
絵文字の改行について改善しました。

もし、OBS上に反映されない場合は再起動するか、カスタムCSSの
@import url(“https://ruri.info/tool/css/fukidashiComment.css”);
を、下記のように変更してください。
@import url(“https://ruri.info/tool/css/fukidashiComment.css?1”);

よろしくお願いします!!

返信する
名無し

こんばんは!
吹き出しとてもかわいくて導入を検討しているのですが、
コメントしていただいた方の名前とアイコンが出るようにはできますでしょうか…?

返信する
運営

こんばんは
名前・アイコンを出そうとすると、かなりコードを変更しないといけないので難しいです…。
気に入っていただいたのにすみません;;

返信する
名無し

こんにちは。素敵なツールありがとうございます!
質問なのですが、Twitchで使用する際に「○○さんが○○を引き替えました」のようなチャンネルポイントの引き換えメッセージを消すことはできますか?
お忙しいところ恐縮ですが、お時間があればよろしくお願い致します!

返信する
運営

ご利用ありがとうございます!
チャンネルポイント引き換えについては下記のコードを、OBSの「カスタムCSS」欄に追記してください。

.user-notice-line{
display: none;
}

これで消えるかと思います!

返信する
名無し

取り急ぎのご対応ありがとうございます!
お陰様でより快適になりました!

返信する
なつき

とても可愛い素材で是非導入したいのですが、Twitchのコメントを表示する際上部に「サブスクを送ってナンバーワンに」の表示が出てしまうのですが、消す方法はありますでしょうか。
また、文字のサイズの変え方等もございましたらご教示願いたいです。

返信する
運営

以前より改善したい変更点でしたので、この機会に先ほどアプデを入れました。
もう「サブスクを送って~~~」の欄は表示されないかと思いますが、まだ表示される場合は他のコメントにあるimport部分の変更を試してみてください。

また、文字サイズの変更については現状対応しきれていません…。
よってOBS上で拡大・縮小するか下記のコードを追加してください。

.chat-line__message{
font-size:24px!important;
}

数字部分はお好みです。(デフォルトは13px)
以上よろしくお願いします!!!! 

返信する
なつき

早速対応していただきありがとうございます。
上に出ていたところがなくなり、文字のサイズも大きく表示することができました。

返信する
のん

とても素敵で可愛い素材をありがとうございます!
Twitchでの導入の仕方を知りたいです…!

返信する
運営

ありがとうございます!
Twitchでも、コメント欄にある歯車マークから「チャットをポップアウト」し、リンクをコピーしてください。
OBS上でブラウザソースを追加し、コピーしたリンクを貼り付けます。
「カスタムCSS」にTwitch用のCSSをコピペすれば完了です。
YouTubeとはCSSが異なるので注意です!!

返信する
藤咲シオン

とても素敵な素材をありがとうございます。
長文コメントの改行やフォントサイズの変更、吹き出しのサイズなどを指定・変更ができるとより便利だと感じました。
ご検討のほどよろしくお願いいたします。

返信する
運営

リクエストありがとうございます。
取り急ぎ、長文コメントの吹き出しデザインを改善しました。
現在は、きれいに改行されるかと思います。

また、フォント・吹き出しのサイズに関してはOBS上である程度調整できますので、いずれのアプデ内容として検討させてもらいます。
よろしくお願いします!

返信する
藤咲シオン

早々のご対応ありがとうございます。
さっそく使わせていただきます!

返信する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です