Twitch CSS ジェネレーター← 一覧へ

STREAM

Twitch コメント CSS ジェネレーター

OBS配信用のコメント欄CSSをカスタマイズして生成できます

テーマプリセット

フォント設定

プレビュー：あいうえおABCDE 123

カラー設定

メッセージ背景

100%

テキスト色

ボーダー / アクセント

ユーザー名色を固定する

スタイル設定

ボーダー半径 16px

ボーダー幅 2px

フォントサイズ 13px

メッセージ間隔 8px

表示設定

バッジを表示ユーザー名を表示左ラインアクセント投げ銭ランキングを非表示

課金イベント設定

課金通知を表示する(テスト中)

🌟 サブスクライブ

背景色

テキスト色

アクセント

💠 ビッツ (Bits)

背景色

テキスト色

アクセント

🎯 チャンネルポイント

背景色

テキスト色

アクセント

プレビュー

チャットオーバーレイプレビュー

幅px

⭐ゆきちゃん: こんにちは！配信楽しみにしてました 🎉

🌟TwitchFan99さんが Tier 1 でサブスクライブしました！(3ヶ月連続)· 3ヶ月目です！応援してます！

🛡️mod_alice: 今日も楽しい配信ですね！

💎subscriber_bob💠100: 100ビッツ！いい配信！

🎯ハイライト·GamingPro2025: このシーンクリップして！

NewViewer: 初見です！よろしくお願いします！ 👋

※ プレビューはイメージです。実際のTwitchチャットとは表示が異なる場合があります

生成された CSS

💡 OBS > ブラウザソースを追加し、URL に https://www.twitch.tv/popout/チャンネル名/chat?popout= を設定後、「カスタムCSS」に下記を貼り付けてください

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* ============================================
 * Twitch Chat OBS CSS
 * Generated by yuki-tools
 * --------------------------------------------
 * 使い方:
 *   1. OBS > ブラウザソース を追加
 *   2. URL: https://www.twitch.tv/popout/チャンネル名/chat?popout=
 *   3. 「カスタムCSS」に下記を貼り付ける
 * ============================================ */

/* ==========================================
   背景・ベース
   ========================================== */
body,
.chat-room,
.chat-line__moderation,
.chat-line__status,
.chat-line__message,
.chat-author__display-name {
  background-color: transparent !important;
}
/* スクロールバー非表示（htmlにoverflowを設定するとOBSで高さ計算が狂うためbodyのみ） */
body { overflow: hidden; }

/* ==========================================
   OBS対応: メッセージを常に画面下部から表示
   ========================================== */
/* メッセージコンテナをflexにして下揃えにする
   メッセージが少ない時も画面下部から積み上がるように表示される */
.chat-scrollable-area__message-container {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* ==========================================
   非表示にする要素
   ========================================== */

/* スクロールバー */
::-webkit-scrollbar,
.simplebar-scrollbar {
  display: none !important;
}

/* チャット入力欄・送信ボタン・ヘッダー */
.stream-chat-header,
.chat-input,
.chat-input-section,
.chat-room__content .chat-input-container {
  visibility: hidden !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
}

/* ピン留めメッセージ */
.paid-pinned-chat-message-list,
.paid-pinned-chat-message-content-wrapper {
  display: none !important;
}

/* ステータス行（入室・退室など） */
.chat-line__status {
  display: none !important;
}

/* ログイン名 (@username) */
.chat-author__intl-login {
  display: none !important;
}

/* タイムスタンプ */
.chat-line__timestamp {
  display: none !important;
}

/* ホバー時に出るUIアイコン（ピン留めなど） */
.chat-line__icons {
  display: none !important;
}

/* アナウンスライン（透明化） */
.announcement-line {
  background-color: transparent !important;
  border: none !important;
}

/* ボーダー除去（Twitchの内部クラス） */
.fiHaCw {
  border: none !important;
}

/* ==========================================
   投げ銭ランキング / チャンネルポイントキュー
   ========================================== */
/* 投げ銭ランキング・チャンネルポイントキューを非表示 */
.channel-leaderboard-container {
  display: none !important;
  visibility: hidden !important;
}
.community-highlight-stack__container,
.community-highlight-stack__scroll-area--disable,
.community-highlight-stack__backlog-card,
.community-highlight-stack__nav-target {
  display: none !important;
}

/* チャット上部のランキング・クリップウィジェット（枠・矢印含む最外殻ごと非表示） */
[class*="channelLeaderboard"],
.chat-room__content > .tw-transition {
  display: none !important;
}

/* ==========================================
   フォント
   ========================================== */
/* フォント */
body,
.chat-line__message,
.text-fragment,
[data-a-target="chat-line-message-body"],
.user-notice-line {
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* ==========================================
   メッセージスタイル
   ========================================== */
.chat-line__message {
  background: rgba(255, 255, 255, 1) !important;
  color: #333333 !important;
  border: 2px solid #9147ff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  font-size: 13px !important;
  margin: 6px 4px 8px !important;
  padding: 5px 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* バッジ・ユーザー名エリアの縦中央揃え */
.chat-line__username-container {
  display: inline-flex !important;
  align-items: center !important;
}

/* ==========================================
   ユーザー名
   ========================================== */
/* ユーザー名: 表示 */

/* ユーザー名色: Twitchの設定値をそのまま使用 */

/* メッセージテキスト */
.text-fragment,
[data-a-target="chat-line-message-body"] {
  color: #333333 !important;
}

/* メッセージ本文エリア（テキスト＋エモートの縦中央揃え） */
[data-a-target="chat-line-message-body"] {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* ==========================================
   バッジ
   ========================================== */
/* バッジ: 表示 */
button[data-a-target="chat-badge"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}
.chat-badge {
  display: block !important;
  vertical-align: middle !important;
}

/* エモート */
.chat-image {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* ==========================================
   課金イベント (サブスク / ビッツ / チャンネルポイント)
   ========================================== */
/* サブスクライブ / サブギフト通知 */
.user-notice-line {
  display: flex !important;
  background: #6441a5 !important;
  border-left: 4px solid #9147ff !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 16px !important;
  margin: 8px 4px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
.user-notice-line .user-notice-line__message-container,
.user-notice-line .user-notice-line__message-container * {
  color: #ffffff !important;
}

/* ビッツ (Bits) */
[data-test-selector="bits-message"] .chat-line__message {
  background: #1a237e !important;
  border-left: 4px solid #ff9800 !important;
}
.bits-card-amount {
  color: #ff9800 !important;
}
.bits-card-amount__icon {
  fill: #ff9800 !important;
}

/* チャンネルポイント (ハイライトメッセージ) */
.chat-line--has-highlight .chat-line__message {
  background: rgba(74, 20, 114, 0.35) !important;
  border-top: 2px solid #f5c518 !important;
  border-radius: 16px !important;
}
.chat-line__highlight-bar {
  background: #f5c518 !important;
}

/* ==========================================
   テロップスクロール
   ========================================== */
/* テロップスクロール: 無効 */

🎬 オーバーレイ版ならCSSを貼らなくていい

設定をサーバーに保存 — テーマを変えてもOBSのURLはそのまま
OBSに貼るのは短いオーバーレイURL1本だけ
テストメッセージを流して表示確認できる
テロップスクロール表示に対応

オーバーレイ版を開く ↗

※ tools.yukisuna777.com に移動します。Twitch ログインが必要です。

Twitch コメント CSS ジェネレーターとは？

Twitch のチャット欄を OBS のブラウザソースに載せるとき、そのままだと味気ない見た目になります。このツールは、そこに貼り付けるカスタムCSSをプレビューしながら作れる無料ツールです。吹き出し・ダーク・ネオン・ガラスなど12種のプリセットから選び、背景色や透過率、角丸、フォント、メッセージ間隔をスライダーで微調整するだけ。生成された CSS をコピーして OBS に貼れば完成します。サブスク・ビッツ・チャンネルポイントの通知色も個別に設定できます。入力内容はブラウザの中だけで処理され、サーバーには送信されません。

使い方

左のパネルでテーマプリセットを選びます。まずは近い雰囲気のものを選ぶのが早いです。
フォント・色・角丸・透過率などを調整します。右側のプレビューがリアルタイムで変わります。
「CSSをコピー」ボタンで生成された CSS をコピーします。
OBS でブラウザソースを追加し、URL に https://www.twitch.tv/popout/チャンネル名/chat?popout= を入力します。
同じ画面の「カスタムCSS」欄に、コピーした CSS を貼り付けて OK を押せば完了です。

よくある質問

Q. 無料ですか？ログインは必要ですか？: 完全無料で、ログインなしで使えます。すべてブラウザ内で処理されるので、設定内容がサーバーに送られることはありません。
Q. 生成した CSS はどこに貼ればいいですか？: OBS の「ブラウザソース」のプロパティ画面に「カスタムCSS」という入力欄があります。そこに貼り付けてください。 URL には Twitch のポップアウトチャット（https://www.twitch.tv/popout/チャンネル名/chat?popout=）を設定します。
Q. テーマを変えるたびに OBS を編集し直すのが面倒です: その場合はオーバーレイ版がおすすめです。設定をサーバー側に保存するので、 OBS に貼るのは短いオーバーレイURL 1本だけで済み、テーマを変更しても OBS 側の編集は不要になります。 Twitch ログインが必要で、 tools.yukisuna777.com で提供しています。
Q. プレビューと実際のチャットの見た目が違います: プレビューはイメージです。Twitch 側の DOM 構造の変更や、バッジ・エモートの有無によって実際の表示は多少変わります。OBS に貼ったあと、実際のチャットを見ながら微調整してください。
Q. 日本語フォントは使えますか？: 使えます。Google Fonts の日本語フォント10種類から選べます。生成される CSS にフォントの読み込み（@import）が含まれるので、OBS 側で別途フォントをインストールする必要はありません。

𝕏 でシェアする不具合・要望を送る ↗