YouTubeコメントCSS無料配布｜OBSで使えるかわいい・かっこいい12種

OBSに映すYouTubeのコメント欄を、もっとかわいく・かっこよくしたい方へ。コピペで使えるコメントCSSを12種類、無料で配布します。

結論から言うと、YouTubeのコメントCSSは、OBSの「ブラウザ」ソースにチャット欄のURLを入れ、「カスタム CSS」の欄に貼るだけで使えます。このページのCSSは、ふつうのコメントに加えてスーパーチャットとメンバー加入の見た目も変わります。

CSSはすべて当サイトのオリジナルです。12種とも、YouTubeのチャット欄(ポップアウト)とOBS Studio 32.1.2(Windows版)で表示を確かめています(2026年10月時点)。

【スポンサーリンク】

YouTubeコメントCSS 12種の早見表

どれも無料・登録なしで使えます。雰囲気と、出てくるときの動きで選んでください。

商用・収益化しているチャンネルでも使えます。色や大きさを自分の配信に合わせて書きかえるのも自由です。CSSそのものを再配布・販売することだけはご遠慮ください。

OBSのコメントCSSとは?チャット欄の見た目を変える文字の設定

OBSのコメントCSSとは、OBSに映したYouTubeのチャット欄の色や形を、配信用に着せ替えるための設定の文です。

OBSの「ブラウザ」ソースは、Webページを配信画面に映す機能です。その中の「カスタム CSS」の欄に書いた設定は、映しているページに上書きで反映されます。OBS公式ナレッジベース「Browser Source」によると、この欄には最初から、背景を透明にしてスクロールバーを隠す設定が入っています。

YouTube自体の設定や、視聴者から見えるチャット欄は何も変わりません。変わるのは、自分のOBSに映しているコメント欄の見た目だけです。

YouTubeのコメントCSSをOBSで使う手順

やることは「チャット欄のURLを用意する」「ブラウザソースを作る」「CSSを貼る」の3つです。

手順1:YouTubeのチャット欄のURLを用意する

OBSに入れるのは、配信ページのURLではなく、チャット欄だけを表示する「ポップアウト」のURLです。形は次のとおりです。

https://www.youtube.com/live_chat?is_popout=1&v=動画ID

1. 配信の枠を作り、配信ページを開きます(予約の枠でもかまいません)
2. チャット欄の右上の「︙」から「チャットをポップアウト」を選びます
3. 開いたウィンドウのURLをコピーします

「動画ID」は、配信ページのURLの「watch?v=」のうしろ(または「live/」のうしろ)にある英数字です。上の形の「動画ID」の部分を書きかえても作れます。

手順2:OBSにブラウザソースを追加する

1. コメント欄を出したいシーンを選び、ソースの「+」から「ブラウザ」を選びます
2. 名前(例:コメント欄)を入れて「OK」を押します
3. 「URL」に、手順1のチャット欄のURLを貼ります
4. 「幅」を400、「高さ」を600〜800くらいにします

幅と高さは、あとから画面に合わせて変えてかまいません。幅を広げるとコメントが横長に、高さを広げると表示されるコメントの数が増えます。

手順3:「カスタム CSS」にCSSを貼る

1. 同じプロパティ画面の下のほうにある「カスタム CSS」の欄を開きます
2. 最初から入っている文字をすべて消します
3. この記事のCSSを1つ選んでコピーし、まるごと貼り付けます
4. 「OK」を押します

最初から入っている文字(背景を透明にする設定)は、このページのCSSの中にも入っています。消してから貼れば、コメントのうしろも透明になり、ゲーム画面の上に重ねられます。

かわいいYouTubeコメントCSS 6種

チェック柄・ミルクティー・ステッチなど、雑談や歌枠に合うかわいい系です。どれもスーパーチャットは金額ごとの色(YouTubeが付ける色)のまま、デザインに合わせた形になります。

1. ギンガムチェック

左はしがピンクのギンガムチェックになった、白いカード。スーパーチャットは金額の色のチェック柄になります。

• 動き: ぽんと出てきます
• 合う配信: 雑談・ゆるい配信

2. ミルクティー

ミルクティー色のやわらかいカード。文字も茶色系で、目にやさしい色合いです。

• 動き: 下からふわっと出てきます
• 合う配信: 作業・朝活・のんびり配信

[PR]自動ハイライト検出など便利な機能あり

Shorts工房を販売中！

★こちらから詳細確認
→Shorts工房について詳しく見る

3. ステッチ

ミントのフェルトに、白い糸で縫ったような点線のふち。名前は縫いつけたタグのような形です。

• 動き: 少し傾いてから、ぽんとおさまります
• 合う配信: 手づくり感を出したい配信

4. ぷっくりグミ

つやのある、ぷっくりしたグミのようなカード。上にてかりの光が入ります。

• 動き: ぷるんとゆれながら出てきます
• 合う配信: 元気な雑談・ゲーム配信

5. マリンボーダー

左はしが紺と白のボーダー。名前の前にいかりのマークが付きます。

• 動き: 右からすっと入ってきます
• 合う配信: 夏・さわやかな配信

6. くすみニュアンス

くすみピンクとセージグリーンの、落ち着いた大人かわいい色。角の丸みを左右で変えています。

• 動き: ぼかしから、ふわっと浮かび上がります
• 合う配信: 歌枠・落ち着いた雑談

静止画のコメント枠を画面に置きたいときは、かわいいコメント欄のフリー素材(16種類)もあわせてどうぞ。

かっこいいYouTubeコメントCSS 6種

ステッカー・雑誌・アメコミなど、ゲーム配信に合うかっこいい系です。暗いゲーム画面の上でも読みやすい色にしています。

7. ストリートステッカー

白いふちの黒いステッカーを、少し傾けて貼ったような形。名前は黄色いラベルです。

• 動き: ぺたっと勢いよく貼りつきます
• 合う配信: FPS・アクションゲーム

8. マガジン

雑誌の見出しのような、赤い線と明朝体のカード。名前は英字の太い書体で目立ちます。

• 動き: 上から下へ、めくるように現れます
• 合う配信: おしゃれに見せたい配信

9. ポップアート

太い黒ふちと水玉の、アメコミ風。黄色・水色・ピンクが順番に入れかわります。

• 動き: ドンと飛び出してきます
• 合う配信: にぎやかなゲーム配信

[PR]ゆめかわガーランド

動く配信画面を販売中！

★無料お試し版もあるよ↓
→ゆめかわガーランドの配信画面を詳しく見る

無料で可愛いイラストをゲット

10. チケット

左右に切りこみの入った、映画やライブのチケットの形。アイコンの横に点線のミシン目があります。

• 動き: 少し傾いて、上からすべりこみます
• 合う配信: 映画・ライブ・イベント系の配信

「チケット」の CSS を表示する(コピー用)

枠の中をクリック → Ctrl + A(全部選択)→ Ctrl + C(コピー)で、まるごとコピーできます。

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=Noto+Sans+JP:wght@500;700&display=swap"); body, html { background: transparent !important; overflow: hidden !important; } yt-live-chat-renderer, yt-live-chat-item-list-renderer, #item-scroller, #item-offset, #items { background: transparent !important; } yt-live-chat-header-renderer, yt-live-chat-ticker-renderer, yt-live-chat-banner-manager, #panel-pages, #input-panel, yt-live-chat-message-input-renderer, yt-live-chat-viewer-engagement-message-renderer, #show-more { display: none !important; } #item-scroller { overflow: hidden !important; } yt-live-chat-text-message-renderer #timestamp, yt-live-chat-text-message-renderer #menu, yt-live-chat-text-message-renderer #inline-action-button-container, yt-live-chat-text-message-renderer #chat-badges, yt-live-chat-paid-message-renderer #timestamp, yt-live-chat-paid-message-renderer #menu, yt-live-chat-paid-message-renderer #creator-heart-button, yt-live-chat-paid-message-renderer #gradient-container, yt-live-chat-paid-message-renderer #chat-badges, yt-live-chat-membership-item-renderer #timestamp, yt-live-chat-membership-item-renderer #menu, yt-live-chat-membership-item-renderer #chat-badges { display: none !important; } yt-live-chat-text-message-renderer { background: transparent !important; } yt-live-chat-text-message-renderer yt-live-chat-author-chip { display: block !important; margin: 0 !important; } yt-live-chat-text-message-renderer #content { font-size: 0 !important; } yt-live-chat-text-message-renderer #before-content-buttons, yt-live-chat-text-message-renderer #hover-message, yt-live-chat-text-message-renderer #deleted-state, yt-live-chat-text-message-renderer #show-original { display: none !important; } yt-live-chat-text-message-renderer #message { display: block !important; line-height: 1.5 !important; } yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { display: block !important; background: transparent !important; } yt-live-chat-text-message-renderer, yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { overflow: visible !important; contain: none !important; } yt-live-chat-paid-message-renderer #card, yt-live-chat-membership-item-renderer #card { background: transparent !important; } yt-live-chat-paid-message-renderer #header, yt-live-chat-membership-item-renderer #header { display: flex !important; align-items: center !important; } yt-live-chat-paid-message-renderer #author-photo, yt-live-chat-membership-item-renderer #author-photo { flex: none; border-radius: 50%; overflow: hidden; } yt-live-chat-paid-message-renderer #content, yt-live-chat-membership-item-renderer #content { display: block !important; } yt-live-chat-paid-message-renderer #message, yt-live-chat-membership-item-renderer #message { display: block !important; line-height: 1.5 !important; } yt-live-chat-membership-item-renderer #header-subtext { display: block !important; } yt-live-chat-text-message-renderer, yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { margin: 8px 12px !important; padding: 0 !important; font-family: "Noto Sans JP", sans-serif !important; animation: tk-slide .5s cubic-bezier(.2,.9,.3,1) both; } yt-live-chat-text-message-renderer { display: flex !important; align-items: stretch !important; background: radial-gradient(circle at 0 50%, transparent 9px, #23262f 10px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #23262f 10px) right / 51% 100% no-repeat !important; border-radius: 6px; } yt-live-chat-text-message-renderer #author-photo { width: 56px !important; height: auto !important; margin: 0 !important; flex: none; display: flex !important; align-items: center; justify-content: center; border-radius: 0 !important; border-right: 2px dashed rgba(255,255,255,.35); } yt-live-chat-text-message-renderer #author-photo img { width: 30px !important; height: 30px !important; border-radius: 50%; } yt-live-chat-text-message-renderer #content { flex: 1 1 auto !important; padding: 7px 18px 9px 14px !important; } yt-live-chat-text-message-renderer #author-name { font-family: "Oswald", "Noto Sans JP", sans-serif !important; font-size: 13px !important; letter-spacing: .08em; color: #f2c14e !important; background: none !important; } yt-live-chat-text-message-renderer #message { font-size: 18px !important; font-weight: 500; color: #f5f3ee !important; } yt-live-chat-paid-message-renderer #card, yt-live-chat-membership-item-renderer #card { background: #23262f !important; border-radius: 6px; overflow: hidden; } yt-live-chat-paid-message-renderer #header, yt-live-chat-membership-item-renderer #header { gap: 10px; padding: 8px 16px !important; border-bottom: 2px dashed rgba(255,255,255,.35); } yt-live-chat-paid-message-renderer #header { background: var(--yt-live-chat-paid-message-primary-color, #ffca28) !important; } yt-live-chat-membership-item-renderer #header { background: #f2c14e !important; } yt-live-chat-paid-message-renderer #author-photo, yt-live-chat-membership-item-renderer #author-photo { width: 32px !important; height: 32px !important; } yt-live-chat-paid-message-renderer #author-photo img, yt-live-chat-membership-item-renderer #author-photo img { width: 100% !important; height: 100% !important; border-radius: 50%; } yt-live-chat-paid-message-renderer #author-name, yt-live-chat-membership-item-renderer #author-name { font-family: "Oswald", "Noto Sans JP", sans-serif !important; font-size: 15px !important; color: #23262f !important; background: none !important; } yt-live-chat-paid-message-renderer #purchase-amount { font-family: "Oswald", sans-serif !important; font-size: 24px !important; color: #23262f !important; } yt-live-chat-membership-item-renderer #header-subtext { font-size: 14px !important; font-weight: 700; color: #23262f !important; } yt-live-chat-membership-item-renderer #header-subtext::before { content: "ADMIT ONE ▸ "; font-family: "Oswald", sans-serif; } yt-live-chat-paid-message-renderer #content, yt-live-chat-membership-item-renderer #content { padding: 8px 16px 11px !important; } yt-live-chat-paid-message-renderer #message, yt-live-chat-membership-item-renderer #message { font-size: 18px !important; color: #f5f3ee !important; } @keyframes tk-slide { 0% { transform: translateY(-14px) rotate(-2deg); opacity: 0; } 100% { transform: none; opacity: 1; } } yt-live-chat-membership-item-renderer #content { padding: 0 !important; } yt-live-chat-membership-item-renderer #message:not(:empty) { padding: 6px 16px 10px !important; }

11. ダークスモーク

黒から透明へ溶けていく、けむりのような帯と赤い線。ゲーム画面になじみます。

• 動き: 左から、ぼかしが晴れるように入ってきます
• 合う配信: ホラー・シリアスなゲーム

「ダークスモーク」の CSS を表示する(コピー用)

枠の中をクリック → Ctrl + A(全部選択)→ Ctrl + C(コピー)で、まるごとコピーできます。

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap"); body, html { background: transparent !important; overflow: hidden !important; } yt-live-chat-renderer, yt-live-chat-item-list-renderer, #item-scroller, #item-offset, #items { background: transparent !important; } yt-live-chat-header-renderer, yt-live-chat-ticker-renderer, yt-live-chat-banner-manager, #panel-pages, #input-panel, yt-live-chat-message-input-renderer, yt-live-chat-viewer-engagement-message-renderer, #show-more { display: none !important; } #item-scroller { overflow: hidden !important; } yt-live-chat-text-message-renderer #timestamp, yt-live-chat-text-message-renderer #menu, yt-live-chat-text-message-renderer #inline-action-button-container, yt-live-chat-text-message-renderer #chat-badges, yt-live-chat-paid-message-renderer #timestamp, yt-live-chat-paid-message-renderer #menu, yt-live-chat-paid-message-renderer #creator-heart-button, yt-live-chat-paid-message-renderer #gradient-container, yt-live-chat-paid-message-renderer #chat-badges, yt-live-chat-membership-item-renderer #timestamp, yt-live-chat-membership-item-renderer #menu, yt-live-chat-membership-item-renderer #chat-badges { display: none !important; } yt-live-chat-text-message-renderer { background: transparent !important; } yt-live-chat-text-message-renderer yt-live-chat-author-chip { display: block !important; margin: 0 !important; } yt-live-chat-text-message-renderer #content { font-size: 0 !important; } yt-live-chat-text-message-renderer #before-content-buttons, yt-live-chat-text-message-renderer #hover-message, yt-live-chat-text-message-renderer #deleted-state, yt-live-chat-text-message-renderer #show-original { display: none !important; } yt-live-chat-text-message-renderer #message { display: block !important; line-height: 1.5 !important; } yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { display: block !important; background: transparent !important; } yt-live-chat-text-message-renderer, yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { overflow: visible !important; contain: none !important; } yt-live-chat-paid-message-renderer #card, yt-live-chat-membership-item-renderer #card { background: transparent !important; } yt-live-chat-paid-message-renderer #header, yt-live-chat-membership-item-renderer #header { display: flex !important; align-items: center !important; } yt-live-chat-paid-message-renderer #author-photo, yt-live-chat-membership-item-renderer #author-photo { flex: none; border-radius: 50%; overflow: hidden; } yt-live-chat-paid-message-renderer #content, yt-live-chat-membership-item-renderer #content { display: block !important; } yt-live-chat-paid-message-renderer #message, yt-live-chat-membership-item-renderer #message { display: block !important; line-height: 1.5 !important; } yt-live-chat-membership-item-renderer #header-subtext { display: block !important; } yt-live-chat-text-message-renderer, yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { margin: 6px 0 !important; padding: 0 !important; font-family: "Noto Sans JP", sans-serif !important; animation: ds-in .7s ease-out both; } yt-live-chat-text-message-renderer { display: flex !important; align-items: center !important; padding: 9px 20px 10px 14px !important; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.55) 60%, transparent) !important; } yt-live-chat-text-message-renderer::before { content: ""; align-self: stretch; width: 3px; margin-right: 12px; background: #e53950; border-radius: 3px; } yt-live-chat-text-message-renderer #author-photo { width: 32px !important; height: 32px !important; margin-right: 12px !important; border-radius: 50%; } yt-live-chat-text-message-renderer #author-photo img, yt-live-chat-paid-message-renderer #author-photo img, yt-live-chat-membership-item-renderer #author-photo img { width: 100% !important; height: 100% !important; border-radius: 50%; } yt-live-chat-text-message-renderer #content { flex: 1 1 auto !important; } yt-live-chat-text-message-renderer #author-name { font-size: 12px !important; font-weight: 700 !important; color: rgba(255,255,255,.62) !important; background: none !important; } yt-live-chat-text-message-renderer #message { font-size: 18px !important; font-weight: 500; color: #fff !important; text-shadow: 0 2px 6px rgba(0,0,0,.6); } yt-live-chat-paid-message-renderer #card, yt-live-chat-membership-item-renderer #card { background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.6) 70%, transparent) !important; border-left: 3px solid var(--yt-live-chat-paid-message-primary-color, #ffca28); } yt-live-chat-membership-item-renderer #card { border-left-color: #e53950; } yt-live-chat-paid-message-renderer #header, yt-live-chat-membership-item-renderer #header { gap: 10px; padding: 9px 16px !important; } yt-live-chat-paid-message-renderer #header { background: linear-gradient(90deg, var(--yt-live-chat-paid-message-primary-color, #ffca28), transparent 85%) !important; } yt-live-chat-membership-item-renderer #header { background: linear-gradient(90deg, rgba(229,57,80,.55), transparent 85%) !important; } yt-live-chat-paid-message-renderer #author-photo, yt-live-chat-membership-item-renderer #author-photo { width: 32px !important; height: 32px !important; } yt-live-chat-paid-message-renderer #author-name, yt-live-chat-membership-item-renderer #author-name { font-size: 14px !important; font-weight: 700 !important; color: #fff !important; background: none !important; } yt-live-chat-paid-message-renderer #purchase-amount { font-size: 21px !important; font-weight: 700 !important; color: #fff !important; text-shadow: 0 2px 6px rgba(0,0,0,.5); } yt-live-chat-membership-item-renderer #header-subtext { font-size: 14px !important; font-weight: 700; color: #fff !important; } yt-live-chat-paid-message-renderer #content, yt-live-chat-membership-item-renderer #content { padding: 6px 16px 10px !important; } yt-live-chat-paid-message-renderer #message, yt-live-chat-membership-item-renderer #message { font-size: 18px !important; color: #fff !important; } @keyframes ds-in { 0% { transform: translateX(-40px); opacity: 0; filter: blur(5px); } 100% { transform: none; opacity: 1; filter: none; } } yt-live-chat-membership-item-renderer #content { padding: 0 !important; } yt-live-chat-membership-item-renderer #message:not(:empty) { padding: 6px 16px 10px !important; }

12. スプリット

名前の青い帯と、本文の暗い帯を、ななめに切って並べた形。

• 動き: ななめにすべりこみます
• 合う配信: スポーツ・対戦ゲーム

「スプリット」の CSS を表示する(コピー用)

枠の中をクリック → Ctrl + A(全部選択)→ Ctrl + C(コピー)で、まるごとコピーできます。

@import url("https://fonts.googleapis.com/css2?family=Teko:wght@600&family=Noto+Sans+JP:wght@500;700&display=swap"); body, html { background: transparent !important; overflow: hidden !important; } yt-live-chat-renderer, yt-live-chat-item-list-renderer, #item-scroller, #item-offset, #items { background: transparent !important; } yt-live-chat-header-renderer, yt-live-chat-ticker-renderer, yt-live-chat-banner-manager, #panel-pages, #input-panel, yt-live-chat-message-input-renderer, yt-live-chat-viewer-engagement-message-renderer, #show-more { display: none !important; } #item-scroller { overflow: hidden !important; } yt-live-chat-text-message-renderer #timestamp, yt-live-chat-text-message-renderer #menu, yt-live-chat-text-message-renderer #inline-action-button-container, yt-live-chat-text-message-renderer #chat-badges, yt-live-chat-paid-message-renderer #timestamp, yt-live-chat-paid-message-renderer #menu, yt-live-chat-paid-message-renderer #creator-heart-button, yt-live-chat-paid-message-renderer #gradient-container, yt-live-chat-paid-message-renderer #chat-badges, yt-live-chat-membership-item-renderer #timestamp, yt-live-chat-membership-item-renderer #menu, yt-live-chat-membership-item-renderer #chat-badges { display: none !important; } yt-live-chat-text-message-renderer { background: transparent !important; } yt-live-chat-text-message-renderer yt-live-chat-author-chip { display: block !important; margin: 0 !important; } yt-live-chat-text-message-renderer #content { font-size: 0 !important; } yt-live-chat-text-message-renderer #before-content-buttons, yt-live-chat-text-message-renderer #hover-message, yt-live-chat-text-message-renderer #deleted-state, yt-live-chat-text-message-renderer #show-original { display: none !important; } yt-live-chat-text-message-renderer #message { display: block !important; line-height: 1.5 !important; } yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { display: block !important; background: transparent !important; } yt-live-chat-text-message-renderer, yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { overflow: visible !important; contain: none !important; } yt-live-chat-paid-message-renderer #card, yt-live-chat-membership-item-renderer #card { background: transparent !important; } yt-live-chat-paid-message-renderer #header, yt-live-chat-membership-item-renderer #header { display: flex !important; align-items: center !important; } yt-live-chat-paid-message-renderer #author-photo, yt-live-chat-membership-item-renderer #author-photo { flex: none; border-radius: 50%; overflow: hidden; } yt-live-chat-paid-message-renderer #content, yt-live-chat-membership-item-renderer #content { display: block !important; } yt-live-chat-paid-message-renderer #message, yt-live-chat-membership-item-renderer #message { display: block !important; line-height: 1.5 !important; } yt-live-chat-membership-item-renderer #header-subtext { display: block !important; } yt-live-chat-text-message-renderer, yt-live-chat-paid-message-renderer, yt-live-chat-membership-item-renderer { margin: 8px 12px !important; padding: 0 !important; font-family: "Noto Sans JP", sans-serif !important; animation: sp-skew .5s cubic-bezier(.2,.9,.3,1) both; } yt-live-chat-text-message-renderer { display: flex !important; align-items: center !important; background: #1b1d24 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } yt-live-chat-text-message-renderer #author-photo { display: none !important; } yt-live-chat-text-message-renderer #content { display: flex !important; align-items: stretch; flex: 1 1 auto !important; } yt-live-chat-text-message-renderer yt-live-chat-author-chip { display: flex !important; align-items: center; flex: none; max-width: 38%; padding: 0 22px 0 12px; background: #2f6bff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); } yt-live-chat-text-message-renderer #author-name { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Teko", "Noto Sans JP", sans-serif !important; font-size: 17px !important; letter-spacing: .04em; color: #fff !important; background: none !important; } yt-live-chat-text-message-renderer #message { flex: 1 1 auto; padding: 7px 22px 8px 12px; font-size: 18px !important; font-weight: 500; color: #fff !important; } yt-live-chat-paid-message-renderer #card, yt-live-chat-membership-item-renderer #card { background: #1b1d24 !important; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); } yt-live-chat-paid-message-renderer #header, yt-live-chat-membership-item-renderer #header { gap: 10px; padding: 8px 26px 8px 14px !important; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); } yt-live-chat-paid-message-renderer #header { background: var(--yt-live-chat-paid-message-primary-color, #ffca28) !important; } yt-live-chat-membership-item-renderer #header { background: #2f6bff !important; } yt-live-chat-paid-message-renderer #author-photo, yt-live-chat-membership-item-renderer #author-photo { width: 32px !important; height: 32px !important; } yt-live-chat-paid-message-renderer #author-photo img, yt-live-chat-membership-item-renderer #author-photo img { width: 100% !important; height: 100% !important; border-radius: 50%; } yt-live-chat-paid-message-renderer #author-name, yt-live-chat-membership-item-renderer #author-name { font-family: "Teko", "Noto Sans JP", sans-serif !important; font-size: 18px !important; color: #111 !important; background: none !important; } yt-live-chat-membership-item-renderer #author-name { color: #fff !important; } yt-live-chat-paid-message-renderer #purchase-amount { font-family: "Teko", sans-serif !important; font-size: 26px !important; color: #111 !important; } yt-live-chat-membership-item-renderer #header-subtext { font-size: 14px !important; font-weight: 700; color: #fff !important; } yt-live-chat-paid-message-renderer #content, yt-live-chat-membership-item-renderer #content { padding: 8px 26px 11px 14px !important; } yt-live-chat-paid-message-renderer #message, yt-live-chat-membership-item-renderer #message { font-size: 18px !important; color: #fff !important; } @keyframes sp-skew { 0% { transform: translateX(-30px) skewX(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } } yt-live-chat-membership-item-renderer #content { padding: 0 !important; } yt-live-chat-membership-item-renderer #message:not(:empty) { padding: 6px 16px 10px !important; }

画像のコメント枠なら、クールで幾何学的なコメント欄の素材やシンプルなコメント枠・テロップ枠の素材も使えます。

色・文字の大きさ・フォントを変える方法

CSSの中の数字や色の記号を書きかえると、自分の配信に合わせられます。よく変える場所は次のとおりです。

変えたいもの	CSSの中で探す文字	書きかえ方
コメントの文字の大きさ	#message の font-size	18px を 22px などに
名前の文字の大きさ	#author-name の font-size	13px を 15px などに
ふち・名前の色	#ef8fa6 などの「#」で始まる6文字	好きな色の記号に
フォント	font-family	パソコンに入っているフォント名に
アイコンを消す	#author-photo	中身を display: none !important; に

色の記号は、「カラーコード」で検索すると色見本のサイトが見つかります。書きかえたら、OBSのブラウザソースの「OK」を押すと反映されます。

フォントは、CSSの1行目でGoogle Fontsから読み込んでいます(OBSがインターネットにつながっている必要があります)。自分のパソコンに入っているフォントに変えるときは、font-family の名前を書きかえてください。

YouTubeのコメントCSSが反映されないときの確認

CSSを貼っても見た目が変わらないときは、次の順に確かめてください。

困りごと	よくある原因	直し方
何も変わらない	URLが配信ページのまま	ポップアウトのURL(live_chat)にする
何も変わらない	前の表示が残っている	「現在のページのキャッシュを更新」を押す
一部だけ変わらない	CSSの最後まで貼れていない	もう一度まるごとコピーして貼る
見た目が混ざる	CSSを2つ貼っている	1つだけにする
うしろが白い	背景の設定を消してしまった	このページのCSSをまるごと貼り直す
コメントが出ない	配信が始まっていない・チャットがオフ	配信ページでチャットが見えるか確かめる

「現在のページのキャッシュを更新」は、ブラウザソースのプロパティ画面の下のほうにあるボタンです。

YouTubeがチャット欄のページの作りを変えると、CSSが効かなくなることがあります。そのときは、この記事のCSSを直して更新します。

このCSSで変わるところ・変わらないところ

このページのCSSは、YouTubeのチャット欄のうち、配信画面に出すことが多い部分を着せ替えます。

表示	このCSS
ふつうのコメント	デザインが変わる
スーパーチャット	デザインが変わる(金額の色はそのまま)
メンバー加入	デザインが変わる
スーパーステッカー・メンバーシップギフト	YouTubeの見た目のまま
上の見出し・入力欄・時刻・固定メッセージ	表示しない

Twitch・ツイキャスなどのチャット欄は、ページの作りがYouTubeとまったく違うため、このCSSは使えません。YouTube専用です。

無料のコメントCSSと「LIVE担当」のちがい

当サイトでは、このコメントCSSとは別に、配信画面の部品をまとめて出すWindowsアプリ「LIVE担当」(有料)も作っています。どちらも配信画面を飾るものですが、役割がはっきり分かれています。

	コメントCSS(無料)	LIVE担当(有料)
変えるもの	YouTubeのチャット欄の見た目	配信画面に出す部品
出せるもの	コメント・スーパーチャット・メンバー加入	タイマー・投票・目標ゲージ・くじ引き・LIVEの印・時計など
コメント欄	チャット欄のまま、自動で流れる	コメント欄(コメントの一覧)は出せない
動き	コメントが出てくるときの動き	もっと凝ったデザインと、中身に合わせた演出
デザイン	この記事の12種	アプリのテーマ(この記事とは別のデザイン)
使える配信	YouTubeだけ	どこでも(チャットの自動読み取りはTwitchのみ)

つまり、チャット欄そのものを着せ替えたいならコメントCSS、タイマーや投票など、チャット欄以外の部品を画面に出したいならLIVE担当です。組み合わせて使うこともできます。

スーパーチャット・メンバー加入の出し方もちがいます

このページのCSSでは、スーパーチャットとメンバー加入は、チャット欄の中に、ほかのコメントと同じ流れで表示されます。

LIVE担当では、スーパーチャットなどを、チャット欄とは別に、もっと凝ったデザインの動く演出として配信画面に出せる機能を追加する予定です。どの知らせに対応するかはまだ決まっておらず、スーパーチャットなどを検討しています。

ただし、YouTubeは完全に手動です。LIVE担当はYouTubeのチャットを自動で読み取らないため、自分でボタンを押したときだけ画面に出る形になる予定です。また、LIVE担当ではコメント欄(コメントの一覧)は出せません。YouTubeのコメント欄を自動で着せ替えたいときは、このページのコメントCSSを使ってください。

CSSだけではできないこと

• タイマー・投票・目標ゲージ・くじ引きを配信画面に出す
• 数が増えた瞬間に弾む、目標に届いたら演出が出る、のような数に合わせた動き
• コメント欄以外の部品(LIVEの印・時計など)を、同じテーマのデザインでそろえる

こうした部品を出したいときは、LIVE担当の記事で、できることとデザインを確かめてみてください。YouTubeの配信でも、投票や目標ゲージは +1 ボタンで手動で数えて使えます。

配信画面の部品をまとめて出せる「LIVE担当」を見る

配信前の待機画面から作りたい方は、OBSで待機画面を作る手順をまとめた記事もどうぞ。

YouTubeのコメントCSSでよくある質問

コメントCSSは無料で使えますか?

はい、無料です。登録もいりません。収益化しているチャンネルでも使えます。CSSそのものの再配布と販売だけはご遠慮ください。

スマホで見ている視聴者にも、このデザインで見えますか?

いいえ。変わるのは、OBSで配信画面に映しているコメント欄だけです。視聴者は、配信の映像の中でこのデザインのコメントを見ることになります。YouTubeのチャット欄そのものの見た目は変わりません。

コメントがたまると、古いコメントはどうなりますか?

ブラウザソースの高さに入りきらない古いコメントは、上から順に見えなくなります。表示するコメントの数を増やしたいときは、ブラウザソースの高さを広げてください。

自分で色を変えたCSSを使ってもいいですか?

はい。色・大きさ・フォントなど、自分の配信に合わせて自由に書きかえて使えます。

Twitchやツイキャスでも使えますか?

使えません。このページのCSSは、YouTubeのチャット欄の作りに合わせて作っています。

まとめ:YouTubeのコメント欄は、CSSを1つ貼るだけで変えられる

YouTubeのコメントCSSは、OBSのブラウザソースにチャット欄(ポップアウト)のURLを入れ、「カスタム CSS」に貼るだけで使えます。かわいい系6種・かっこいい系6種から、配信の雰囲気に合うものを選んでみてください。

スーパーチャットとメンバー加入もデザインに合わせて変わるので、うれしい瞬間も画面の雰囲気のまま見せられます。

合わせて読みたい

雑談配信などのかわいいコメント欄フリー素材（16種類）

合わせて読みたい

OBS待機画面の作り方｜動く背景・BGM・切り替えの設定手順

#CSS#OBS#お役立ち

【スポンサーリンク】

ABOUT ME

いっぷー

ゲーマー兼サムネ好き

XYouTube

不定期に更新していくよ！よろしくね♪