当サイトでは、YouTubeやTwitchのコメント欄をカスタマイズするカスタムCSSを配布しています。
吹き出しをはじめ、かわいいデザインをそろえているので、ぜひチェックしていってください。
YouTubeでも解説中！
この記事の内容をYouTubeでも解説しています。動画のほうが見やすい方は下記のリンクからご覧ください。
コメント欄を吹き出しにできるCSS
当サイトの運営する「はいしんツールキット」で配布している、コメント欄のカスタムCSSを紹介します。
まずは、チャット風の吹き出しです。
飛び出しが左側にあるのと、右側にあるのとで、2種類の吹き出しを用意しています。
YouTubeとTwitchに対応。Twitchに対応しているCSS生成ツールは珍しいのではないでしょうか。ぜひ使ってください。
それぞれ、色とフォントを変更可能。自動的にCSSを生成してくれます。
CSSをコピーしたら「OBS」で設定するだけ。詳しい方法は後述します。
＼コメ欄を簡単カスタマイズ！／
シンプルなカスタマイズができるCSS
シンプルな変更ができるコメント欄も用意しています。
フォントカラーを変えれるもの（画像左）と縁取りのカラーを変えれるもの（画像右）です。
ほかのサイトで配布しているCSSでは、むやみに縁取りをとりすぎ、不格好になっているものも散見されます。当サイトのツールでは、縁取りの大きさにはこだわっているので、見やすくカスタマイズできるのではないでしょうか。
もちろん、YouTubeとTwitchの両対応。フォントも変更できます。
当サイトのコメ欄カスタマイズツールでは、コメントを打ったユーザーの名前は表示させないようにしています。（メンバー・購読者のスタンプは表示されます）
ユーザの中には、長い名前の人や不適切な名前の人もいるかと思います。名前を隠すことで、コメントを完全に左揃え・治安も守る仕様です。
カスタマイズしたコメント欄をOBS上に表示させる方法
ここからは、YouTube + OBSの組み合わせでコメントを表示する方法を説明します。
YouTubeライブの配信画面を開き、コメント欄の右上の三点リーダをクリック。
「チャットをポップアウト」をクリックし、新規ウィンドウとしてコメント欄を表示させます。
ポップアウトしたコメント欄のリンクをのちのSTEPで使用します。
「コメント欄カスタマイズツール」にアクセスし、お好みのデザインにカスタマイズします。
今回はふきだしのコメント欄を例として取り上げます。
ほかのデザインでも操作は変わらないので、お好きなものをどうぞ。
- フォント選択
- カラー選択
以上を選択します。
「コピペ用CSS」はSTEP3で使用します。
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日以内には返信しますので、改めてこの記事をチェックいただけると助かります！
お手数おかけしますがよろしくお願いします！！
スポンサードリンク
コメント失礼致します。
コメント欄を吹き出しにした上でフェードアウトさせる方法はございますか？
お忙しい中恐縮ですが、ご返信いただけると幸いです。
当サイトでは実装していませんが、CSS animationを使えばできるかと思います！
とても魅力的な素材ありがとうございます！
わたしもフェードアウトさせたくて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での使用でしたが、参考にしたらできました！！！
とても嬉しいです！本当にありがとうございました！
twichでしたか..できたようならよかったです！
素敵な素材感謝いたします。
いつもありがたく使用させていただいております。
Youtube配信のスーパーチャットのコメントが青、水色、緑、黄までのスパチャはコメント表示されるのですが、オレンジ、マゼンタ、赤のスパチャはコメント表示が反映がされません。
お忙しいところ大変恐縮ではありますが、可能であればご対応のほどよろしくお願いいたします。
使っていただきありがとうございます！
色別の表示反映については確認できなかったのですが、スパチャ・メンバーシップのデザインが崩れているのは確認し修正しました。
解決していればいいのですが…まだ不具合があればご連絡いただけると幸いです！
改めてブラウザソースを作り直す+URLの末尾に「?2」をつけるをすれば即時反映されるはずです。
とても素敵なツールをありがとうございます。
要望になってしまい恐縮なのですが、、
「見出し付きコメント」を利用したいなと思っているのですが、長いコメントの際など、見出しの長さが改行されたコメントに対して長さが足りないかな？と感じてしまいました。
可能なら1つのコメントに対して見出しも上下の高さが揃っていると嬉しいです。
ご要望ありがとうございます！Twitchのほうですかね？
確かに短かったので、長さを調節しました。完全には揃えていませんが、見やすくなっているかと思います。
実装直後はOBSにキャッシュが残ります。
@import url(“https://ruri.info/tool/css/twmidashi1Comment.css?2”);
のように、「リンク+?2」のように？と数字を付けると、すぐに使えます。
早々のご対応ありがとうございます。
ただ数字を着けてみてもキャッシュを更新してみても以前と変わりませんでした。。。
何か対応策がありましたらご教示いただけると嬉しいです。
あらためて、見出し付きコメントをTwitchで試したところ問題なく表示できます。
他の対応策として、
・ブラウザソースを作り直す
・追加するのをほかの数字に変えてみる
を試してみてください！
今回の変更は微調整の域なので、これで変化がなければ、想定されている改修をこちらができていないとかですかね…。
以上、確認お願いしますー！
ありがとうございます！！
ブラウザソースを作り直してみたら無事に長くなってました！！
確認不足で申し訳ありません。。。
長さも程よい感じで思い描いた通りのコメント欄になりました。。！嬉しいです！！
こちらのツールありがたく利用させていただきます！！
よかったです！！
はじめまして！
Twitchにて使用したく
コメント欄のリンクを貼り付けたところ、Twtitchにログインという画面が出てきます。
https://www.twitch.tv/popout//chat?popout=
を使用しても出来ませんでした…
はじめまして！
他の方のコメントにあるように、配信マネージャーのコメントリンクを使っているのではないでしょうか？
チャンネルページ(視聴者も見る画面)からリンクを持ってくるといけるかと思います。
配信マネージャーのほうから開いていたので、チャンネルページから
開きなおして貼り付けたところ、ログインの表示はなくなったのですが
試しにコメントしてみましたが反映されません(´;ω;｀)
なるほど！
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上である程度調整できますので、いずれのアプデ内容として検討させてもらいます。
よろしくお願いします！
早々のご対応ありがとうございます。
さっそく使わせていただきます！