Twitchのコメント欄をCSSでカスタマイズする方法を解説

目次

5項目 開く 閉じる

1. 01 視聴者の目を引くデザインで配信を盛り上げる ›
2. 02 Twitchのコメント欄をCSSでカスタマイズする方法 ›
3. 03 番外編：CSSを使わずにコメント欄をカスタマイズ「CastCraft」 ›
4. 04 OBSでコメント欄のCSSが反映されない場合の対処法 ›
5. 05 Twitchのコメント欄を自分好みにカスタマイズしよう！ ›

視聴者の目を引くデザインで配信を盛り上げる

Twitchの配信を見ていて、おしゃれなコメント欄を見たことがありませんか？カスタムCSSを活用すると、コメント欄をカスタマイズできます。おしゃれなデザインのコメント欄にすると視聴者の目を引きやすく、配信のクオリティが上がること間違いなしです。また、カスタムCSSは基本コピペだけで利用できるため、簡単に使えます。コメント欄のデザインを自分好みにして、他の配信者と差をつけましょう！
本記事では、Twitchのコメント欄を簡単にカスタマイズする方法を詳しく解説します。

カスタムCSSとは？OBS配信でかっこいいコメント欄を表示する方法

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にはコメント欄をカスタマイズする機能があります。

CastCraftをインストール

CastCraftの公式サイトでデスクトップアプリをインストールします。

CastCraftのダウンロードページ

CastCraftでチャットボックスを作成

LiveDashboard下部にある「チャットボックス」の欄で「配信に表示する」ボタンを押します。

チャットボックスの基礎となるデザインを選びます。

「チャットボックスを作成」ボタンを押します。

「URLをコピー」ボタンを押します。

OBSのブラウザソースにURL貼り付け

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

先ほどコピーしたチャットボックスのURLを貼り付けます。

幅と高さを調整し、「OK」ボタンを押します。
【推奨設定】幅：480 ~ 640, 高さ：1080

チャット欄を表示させる位置を調整します。

デザインの詳細設定

デザインをカスタマイズしたい場合、CastCraftでチャットボックスを作成した画面にて鉛筆のアイコン（編集ボタン）を押します。

デザインやフォント、アニメーションをカスタマイズした後、右上にある「保存する」ボタンを押すことでカスタマイズが反映されます。

CastCraftで配信に接続

OBSやYouTube/Twitch管理画面から配信を開始した後、LiveDashboardの「配信に接続」ボタンを押すとコメントの取得を開始すると、コメントが配信画面に映し出されます！

OBS上でのコメント表示をかわいいデザインにカスタマイズする方法【吹き出し風も】

OBSでコメント欄のCSSが反映されない場合の対処法

カスタムCSSが反映されない場合は、OBSを最新バージョンにアップデートしてください。カスタムCSSは作成時点で最新のOBSのバージョンに対応して作られていることが多いです。古いバージョンのままOBSを使っているとカスタムCSSが反映されない場合があります。OBSを最新バージョンにアップデートしましょう。
それでも解決しない場合は、カスタムCSSを配布・販売しているサイトやクリエイターに問い合わせてみてください。

OBSブラウザソースの設定＆操作方法｜映らないときの対処法についても解説

Twitchのコメント欄を自分好みにカスタマイズしよう！

Twitchのコメント欄をカスタムCSSを使ってカスタマイズする方法を解説しました。カスタムCSSはほぼコピペだけで設定できるので、誰でも簡単にコメント欄を華やかにできます。ぜひ本記事で紹介したカスタムCSSを試してみてください。

OBSでのコメント表示におすすめのCastCraft

OBSでYouTubeやTwitchなどの配信コメント表示を行う際のツールとして、CastCraftをおすすめします。

CastCraftでOBS等に配信コメントを表示する

CastCraftを使えば、配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。

配信中のコメント管理ダッシュボード

• 視聴者ごとの情報をためて、視聴者全員を覚えられる
• 初見や常連を一目で判断できる
• スパチャ・ビッツ等を読み上げたかどうか管理できる

画面演出の「Screen」

• 配信コメントをニコニコ風にOBS画面に横流しできる
• 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
• 設定した画像やGIFで自由に画面演出が作れる

いつでも投げ銭（収益化）機能

• 配信者に9割還元できる
• 投げ銭してくれた視聴者に対して個別のお礼の返信や、特典ファイル（画像や音声など）を送付することも可能

このような機能により、配信者が視聴者との関係を深めることができます。

CastCraftの公式ページ（利用無料）

CastCraftを利用する配信者さんの声

ぺこPさん

『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』

MeeChanneLさん

『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』

九条林檎さん

『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』

ゆっきん【博多弁猫Vtuber】さん

『CastCraft様にはどれだけお世話になっているかわかりません！配信生活をもっと楽しいものにしてくださってありがとうございます。』

日々の配信をより良く

CastCraftが導入されているチャンネルの総登録者数は1.6億人を超えており、これまで260万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。

CastCraftを試してみる（利用無料）