当サイトでは、YouTubeやTwitchのコメント欄をカスタマイズするカスタムCSSを配布しています。
吹き出しをはじめ、かわいいデザインをそろえているので、ぜひチェックしていってください。
この記事の内容をYouTubeでも解説しています。動画のほうが見やすい方は下記のリンクからご覧ください。
コメント欄を吹き出しにできるCSS
当サイトの運営する「はいしんツールキット」で配布している、コメント欄のカスタムCSSを紹介します。
まずは、チャット風の吹き出しです。
飛び出しが左側にあるのと、右側にあるのとで、2種類の吹き出しを用意しています。
YouTubeとTwitchに対応。Twitchに対応しているCSS生成ツールは珍しいのではないでしょうか。ぜひ使ってください。
それぞれ、色とフォントを変更可能。自動的にCSSを生成してくれます。
CSSをコピーしたら「OBS」で設定するだけ。詳しい方法は後述します。
シンプルなカスタマイズができるCSS
シンプルな変更ができるコメント欄も用意しています。
フォントカラーを変えれるもの（画像左）と縁取りのカラーを変えれるもの（画像右）です。
ほかのサイトで配布しているCSSでは、むやみに縁取りをとりすぎ、不格好になっているものも散見されます。当サイトのツールでは、縁取りの大きさにはこだわっているので、見やすくカスタマイズできるのではないでしょうか。
もちろん、YouTubeとTwitchの両対応。フォントも変更できます。
当サイトのコメ欄カスタマイズツールでは、コメントを打ったユーザーの名前は表示させないようにしています。（メンバー・購読者のスタンプは表示されます）
ユーザの中には、長い名前の人や不適切な名前の人もいるかと思います。名前を隠すことで、コメントを完全に左揃え・治安も守る仕様です。
【YouTube】カスタマイズしたコメント欄をOBS上に表示する
ここからは、YouTube + OBSの組み合わせでコメントを表示する方法を説明します。
STEP1：ライブ配信のコメント欄を準備する
YouTubeライブの配信画面を開き、コメント欄の右上の三点リーダをクリック。
「チャットをポップアウト」をクリックし、新規ウィンドウとしてコメント欄を表示させます。
ポップアウトしたコメント欄のリンクをのちのSTEPで使用します。
使用するのは「配信画面のチャット」です！
YouTubeのチャットには「配信画面のチャット」と「管理画面のチャット」があります。
ライブ配信の管理画面からではなく、視聴者も見ることのできる配信画面のほうを使用してください。
STEP2：コメント欄のデザインを準備する
「コメント欄カスタマイズツール」にアクセスし、お好みのデザインにカスタマイズします。
今回はふきだしのコメント欄を例として取り上げます。
ほかのデザインでも操作は変わらないので、お好きなものをどうぞ。
- フォント選択
- カラー選択
以上を選択します。「コピペ用CSS」はSTEP3で使用します。
STEP3：OBSで設定する
OBSのソースに「ブラウザ」を追加します。
「URL」の欄にSTEP1で用意した、コメント欄のポップアップのリンクをコピペします。
「カスタムCSS」の欄にはSTEP2で準備した「コピペ用CSS」をコピペします。
完成形は↓↓のような感じ。
最後にOKボタンを押して完了です。
【Twitch】カスタマイズしたコメント欄をOBS上に表示する
Twitch用にCSSを使いたい方もYouTubeと操作はそれほど変わりません。
STEP1：ライブ配信のコメント欄を準備する
Twitchの配信ページを開き、コメント欄をポップアウトします。新規ウィンドウでコメント欄が表示されるので、こちらのリンクをこれからOBSに追加していきます。
使用するチャットは「配信画面のチャット」です。
Twitchのチャットには「配信画面のチャット」と「管理画面のチャット」があります。
Twtichの管理画面からではなく、視聴者も見ることができる配信画面のチャットをポップアウトしてください。
STEP2：コメント欄のデザインを準備する
ここからはYouTube版と操作は変わりません。
「コメント欄カスタマイズツール」にアクセスし、お好みのデザインにカスタマイズします。
ほとんどのデザインでYouTubeとTwitchの両方で使えるように用意していますが、コピーするコードに違いがあります。「Twitch用」を使うように注意してください。
STEP3：OBSで設定する
OBSのソースに「ブラウザ」を追加します。
ブラウザソースの「URL」の欄にSTEP1で用意した、コメント欄のポップアウトのリンクをコピペします。
「カスタムCSS」の欄にはSTEP2で準備した「コピペ用CSS」をコピペします。
最後にOKボタンを押すと反映されます。
コメントのサイズ調整はOBS上で行います
コメントのサイズ調整方法を2パターン取り上げます。
パターン①：コメントが横に長すぎるとき
例えば、「吹き出しが横に長すぎる」ときは、ブラウザソースの幅を小さくします。
ブラウザソース内の幅と高さで、コメント欄の表示範囲を設定しましょう。
スーパーチャットのサイズが横に長すぎるときも同様の方法で、調整できます。
パターン②：コメントのサイズを大きくしたいとき
コメント全体の大きさ意を変更するときは、OBSのプレビュー部分から直接サイズを変更してください。
はいしんツールキットは便利なツールがたくさん
当サイトが提供している「はいしんツールキット」では、デジタル時計のカスタマイズのほかに、discordオーバレイのカスタマイズやデジタル時計など、オリジナルのツールを用意しています。
無料で使えるのでぜひ使ってみてくださいね！
また、「こんなデザインが欲しい！」「こんなツールが欲しい！」「ここをもっと使いやすくしてほしい！」などのご意見もぜひお待ちしております。
この記事のコメント欄か運営Twitterまでお気軽にどうぞ！
使用上の不明点や要望がある際は、サポート用のDiscordを用意しています。お気軽にご連絡ください。
コメント
コメント一覧 （54件）
何時も素敵なデザインを使用させていただいております！ありがとうございます。
昨日あたりから、よく配信で使用しているデザインの「ふきだしコメント欄(右)」と「見出し付きコメント」にて、スパチャだけ表示されなくなってしまいました。
以前までは表示されており、通常のコメントだけしか反映されません。
CSSの張り直しだったり他配信者さんのコメントURLで表示させてみたり、OBSやPC再起動などいろいろ試しましたが、やはりスパチャだけ反映されません。
お忙しいところ恐縮ですが、ご確認いただけましたら幸いです。よろしくお願いいたします。
使っていただきありがとうございます。
youtubeのコメントCSSでスパチャが表示されないのは、先日からの仕様です。
youtubeではスパチャやスタンプ、メンバー、ギフトなど多くの表示があり今後も追加されることが予測されます。
CSSの都合上、アプデが入るたびに当サイトでも対応が必要です。
安定したクオリティでCSSを提供し続けるために表示する項目を絞って生成します。
素敵なツールありがとうございます。
いつもYouTubeやTwitchの配信で使用させており、大変お世話になっております！
要望で恐縮ですが、
YouTubeの「見出し付きコメント」で、長文などで改行した2行目以降のコメントが
少し見出しの棒に被っていたのでこちらご調整いただくことは可能でしょうか？
ありがとうございます。
現在、有料コンテンツを優先的に開発しており、通常コンテンツへの対応は後回しになっています。
改行については有料のほうでは対応済みですので、よろしければそちらをどうぞ！
通常コンテンツのほうも近日中には対応したいと考えています。
なるほどです！
ご回答ありがとうございました。
見てみます～。
吹き出しとても可愛くって使っていきたいのですが、最初のコメントが上から下に行く様式を下から上にはできませんか??
ありがとうございます。
当サイトが配布しているCSSでは、デザインを上書きしているだけなので挙動に関しては配信サイトの仕様です。
ただ私のほうでいただいた挙動に心当たりがなく、一つ目のコメントのみ違う動きをするということでしょうか？
お使いの配信サイトと合わせて教えていただけると助かります！
いつもtwitchで使用させていただいております、ありがとうございます！
数日前からコメント表示が不調でして、
配信開始すぐのコメントは普段通り吹き出し風コメントとして表示されるのですが、
途中からtwitchにログインという画面になってしまいます。
ChromeやEdgeでtwitchにログインしていても直りません。
解決方法ご存じありませんでしょうか…
よろしくお願いいたします。
管理ページのコメント欄のリンクを使うとログイン画面が表示されるようです。
チャンネルページ（配信のページ）のコメント欄を使うと解決するかもしれません。
私も同じ状態で困っており
試しましたが解決しませんでした。
他に対処法はございませんか？
私の環境では再現できていないので完全ではないですが、改めて確認してほしいことをまとめます。
・配信ページのリンクを使っているか確認する
↓このリンク形式
「https://www.twitch.tv/popout/<ユーザ名>/chat?popout=」
↓これはダメ
「https://dashboard.twitch.tv/popout/u/<ユーザ名>/stream-manager/chat?uuid=…..」
・ソースを作成しなおす
私はソースを放置してもログインが維持されていますが、色々いじっている間に変なキャッシュが残っているかもしれません。
ソースを削除→OBS再起動→ソース新規作成、まで試します。
・twitchにログインしなおす
たしかtwitchってログインの時に「30日間ログインを維持する」みたいな設定ありますよね..？
私はいつもチェック入れるのですが関係あるかも？（わかりませんが）
——————–
ほかの方法は確認も報告も受けていないのでわかりません！
ご返信ありがとうございます。
運営様の対応策で試してみましたが、残念ながら直らず…
また、今回ただのブラウザソースとして新しくソースを作成しポップアウトリンクを貼ったところ、
未配信だとコメントが表示されますが、配信するとログイン画面になってしまいます。
流れが活発な配信者さんのコメントでも試してみましたが同じ画面に…
ブラウザやStreamlabs OBSが原因かと思いますが、私では解決できませんでした。
色々試してみたいと思いますが、再使用できるようになった際には、運営様のCSSをまた使わせて頂こうと思います。
お時間いただきありがとうございました。
ご報告ありがとうございます。
ほかのユーザさんのためにメモを残すと…
Streamlabs版のOBSの影響かもしれません。
通常版?のOBSで私は不具合が起きたことはないので、当サイトに関わらずカスタムcssを使いたい場合は試してみてください。
コメント失礼致します。
コメント欄を吹き出しにした上でフェードアウトさせる方法はございますか？
お忙しい中恐縮ですが、ご返信いただけると幸いです。
当サイトでは実装していませんが、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でしたか..できたようならよかったです！
twithc用のフェードアウトのｃｓｓおしえていただけますか？
例えばですが、こんな感じですかね
2秒後に3秒かけてフェードアウトします
.chat-line__no-background {
animation: fadeout-keyframes 3s ease 2s 1 forwards;
}
@keyframes fadeout-keyframes {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
素敵な素材感謝いたします。
いつもありがたく使用させていただいております。
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のブラウザの大きさを変更しても吹き出しの大きさが変わりません。もう少し大きく表示したいのですが、どうにかできないでしょうか？
OBSのプレビュー（ゲーム画面とかコメントとか表示されるところ）でサイズを調整してみてください。
角にマウスを合わせて拡大するアレです。それで大きさを変更できると思うのですがどうでしょうか？
おそらくブラウザソース内で、高さと幅を変更していたのではと想像しています。
高さと幅を変更すると、横の長さなど、表示する範囲が変わります。
こんにちは。素敵なツールありがとうございます！
こちら使用させていただいたのですが
絵文字を使うと改行されてしまいます…！
改行しないようにできますでしょうか？？
お忙しいところ恐縮ですが、お時間があればよろしくお願いいたします！
ご報告ありがとうございます！
絵文字の改行について改善しました。
もし、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上である程度調整できますので、いずれのアプデ内容として検討させてもらいます。
よろしくお願いします！
早々のご対応ありがとうございます。
さっそく使わせていただきます！