Twitchのコメント欄をCSSでカスタマイズする方法を解説
目次
視聴者の目を引くデザインで配信を盛り上げる
Twitchの配信を見ていて、おしゃれなコメント欄を見たことがありませんか？カスタムCSSを活用すると、コメント欄をカスタマイズできます。おしゃれなデザインのコメント欄にすると視聴者の目を引きやすく、配信のクオリティが上がること間違いなしです。また、カスタムCSSは基本コピペだけで利用できるため、簡単に使えます。コメント欄のデザインを自分好みにして、他の配信者と差をつけましょう！
本記事では、Twitchのコメント欄を簡単にカスタマイズする方法を詳しく解説します。
Twitchのコメント欄をCSSでカスタマイズする方法
Twitchのコメント欄をカスタマイズできるカスタムCSSは各サイトで配布、販売されています。カスタムCSSが入手できるおすすめのサイトを3つ紹介します。
方法1：はいしんツールキット
はいしんツールキットは、配信画面の装飾に使える素材を無料で配布しているサイトです。コメント欄のカスタムCSS以外にも、時計やDiscordオーバーレイなども配布しています。
手順1：サイトにアクセス
はいしんツールキットのサイトにアクセスします。
手順2：コメント欄の設定
コメント欄をカスタマイズします。好みの表示形式を選び、フォントや色を設定してください。
手順3：CSSをコピー
画面下にある「Twitchコメント欄のカスタムCSS」をコピーします。
手順4：ブラウザソースを作成
OBSを開き、「ソース」からブラウザソースを作成します。「プロパティ」の「カスタムCSS」欄にコピーしたCSSを貼り付けてください。
手順5：コメント欄のURLを取得
Twitchのコメント欄を開き、歯車マークからチャットをポップアウトをクリックします。ポップアウトしたコメント欄上部にURLが表示されるのでコピーしてください。
手順6：コメント欄のURLをコピペ
再度OBSを開き、ブラウザソースのプロパティの「URL」に取得したコメント欄のURLを貼り付け、「OK」をクリックしてください。
方法2：fukidashi
fukidashiはコメント欄を吹き出し風に表示できるカスタムCSSです。はいしんツールキット同様、無料で利用できます。
手順1：サイトにアクセス
fukidashiのサイトにアクセスします。
手順2：コメント欄の設定
コメントのフォントや色、枠線の色などを設定します。その際、「Platform」が「Twitch」になっていることを確認してください。
手順3：CSSをコピー
画面を一番下までスクロールし「Create」をクリック後、表示されたカスタムCSSをコピーします。
手順4：ブラウザソースを作成
OBSを開き、「ソース」からブラウザソースを作成します。「プロパティ」の「カスタムCSS」欄にコピーしたCSSを貼り付け「OK」をクリックします。
手順5：コメント欄のURLを取得
Twitchのコメント欄を開き、歯車マークからチャットをポップアウトをクリックします。ポップアウトしたコメント欄上部にURLが表示されるのでコピーしてください。
手順6：コメント欄のURLをコピペ
再度OBSを開き、ブラウザソースのプロパティの「URL」に取得したコメント欄のURLを貼り付け、「OK」をクリックしてください。
方法3：BOOTH
BOOTHではクリエイターが作成したカスタムCSSを購入できます。BOOTHはクリエイターがカスタムCSSやオーバーレイなど、様々なものを出品しているサイトです。有料での販売が基本で、カスタムCSSは数百円で購入できるものが多いです。中には無料のものもあります。
また、BOOTHではコメント欄のカスタムCSSだけでなく、配信画面に表示できる時計やオーバーレイなど、配信に必要な素材が一通り出品されています。1つのサイトで配信素材が揃うのもBOOTHの特徴です。「無料のものでは物足りない」「他の配信者と配信画面のクオリティで差をつけたい」と思った人は、BOOTHで配信素材を探すのがおすすめです。
番外編：CSSを使わずにコメント欄をカスタマイズ「CastCraft」
CastCraftは配信者の魅力を上げる、配信者のためのツールです。コメビュや特定コメントに対するエフェクトの表示など、配信を盛り上げる機能が多数揃っています。CastCraftにはコメント欄をカスタマイズする機能があります。
手順1：ダウンロード
CastCraftにアクセスしてダウンロードします。その後、Twitchのアカウントでログインしてください。
手順2：Screenを起動
「Screen」タブをクリックし、CastCraft Screenをダウンロードし、インストールしてください。
手順3：ScreenをOBS等に追加
OBS上にCastCraftで設定したコメント欄が表示されるようにします。OBSで「映像キャプチャ」ソースを作成し、「デバイス」を「CastCraft Screen」に設定してください。
手順4：コメント欄を追加
CastCraft Screenを「クラフトモード」にして、「ウィジェット設定」から「チャットボックス」を追加します。「設定」からカスタマイズしてください。
手順5：キャストモードに変更
コメント欄のカスタマイズが完了したら「キャストモード」に切り替えます。配信中はキャストモードにしてください。
手順6：配信開始
OBSから配信を開始してください。CastCraftが自動的にコメント欄の情報を取得します。自動で接続されない場合は「Live Dashboard」から「配信に接続」をクリックしてください。
OBSでコメント欄のCSSが反映されない場合の対処法
カスタムCSSが反映されない場合は、OBSを最新バージョンにアップデートしてください。カスタムCSSは作成時点で最新のOBSのバージョンに対応して作られていることが多いです。古いバージョンのままOBSを使っているとカスタムCSSが反映されない場合があります。OBSを最新バージョンにアップデートしましょう。
それでも解決しない場合は、カスタムCSSを配布・販売しているサイトやクリエイターに問い合わせてみてください。
Twitchのコメント欄を自分好みにカスタマイズしよう！
Twitchのコメント欄をカスタムCSSを使ってカスタマイズする方法を解説しました。カスタムCSSはほぼコピペだけで設定できるので、誰でも簡単にコメント欄を華やかにできます。ぜひ本記事で紹介したカスタムCSSを試してみてください。
コメント表示だけじゃない、OBS配信におすすめのツール
配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
視聴者と向き合うために最もおすすめな配信ツールがCastCraftです。
CastCraftを使えば、YouTube/Twitchのコメントを簡単にカスタマイズしてOBSに表示させることができますが、それだけでなく視聴者と向き合うためのさまざまな機能があります。
配信中のコメント管理ダッシュボード
- 視聴者ごとの情報をためて、視聴者全員を覚えられる
- 初見や常連を一目で判断できる
- スパチャ・ビッツ等を読み上げたかどうか管理できる
画面演出の「Screen」
- 配信コメントをニコニコ風にOBS画面に横流しできる
- 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
- 設定した画像やGIFで自由に画面演出が作れる
このような機能により、配信者が視聴者との関係を深めることができます。
CastCraftを利用する配信者さんの声
ぺこPさん
『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』
MeeChanneLさん
『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』
九条林檎さん
『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』
ゆっきん【博多弁猫Vtuber】さん
『CastCraft様にはどれだけお世話になっているかわかりません！配信生活をもっと楽しいものにしてくださってありがとうございます。』
日々の配信をより良く
CastCraftが導入されているチャンネルの総登録者数は1.5億人を超えており、これまで140万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。
