OBS用のYoutubeチャンネル登録者数のブラウザソース用カスタムCSSを作る奴【無料】

YouTube Studioから『登録者数』の数字だけをピンポイントで切り抜いて、自分好みのフォントやグラデーションで装飾したOBSブラウザソース用のカスタムCSSを生成するツールです。

「Youtubeの仕様が変わって、またカスタムCSS動かない/表示がおかしい」

そんな悩みを解決できるように、現在のページ仕様にあわせてカスタムCSSを生成できるツールを作りました！

表示がおかしくなったら、このツールで作り直せば、Youtubeの仕様が超複雑にならない限り対応できます。

MITライセンスです。

ソースをいじれる人は好きにいじっても大丈夫です。

【こんなところがすごい】

① 【超安全】アカウント連携・APIキーは一切不要！

このツールを使うのに、Youtubeログインなどは特に不要です。

Youtubeで言えば、チャンネルアナリティクスのチャンネル登録者数が表示されてるところを少し特殊な方法でコピーするだけです。

② 【超簡単】右クリックでコピーしたセレクタを貼るだけ！

HTMLの知識がなくても大丈夫。ブラウザのデベロッパーツール（検証）から「セレクタをコピー」して貼り付けるだけで簡単に使用できます。

③【直感操作】Google FontsのURLコピペでフォントが即反映！

標準で入ってるフォントだと、全然凝れないよね・・・というあなたに。

Google Fontsを使うことで、かなりの数の優秀なフォントが利用可能です！

フォント名を入力する手間もありません。Google Fontsでお好みのフォントのリンクを「右クリック ＞ リンクテキストをコピー」して本ツールに貼り付けるだけで、自動でフォント名を抽出してプレビューと生成CSSに適用します。

④【配信映え】リッチなデザインカスタマイズ機能！

単色だけでなく、滑らかな「文字グラデーション」にも対応。

文字をくっきり目立たせる「袋文字（縁取り）」の太さ・カラー調整。

視聴者の目を引く「アニメーション」（フェード、跳ねる、パルス、ネオン）の実装。

気に入ったデザインをいつでも呼び出せる「5スロットのデザインセーブ機能」もあるので、微調整や作り直しもしやすい。

（localstorage保存なので、念のため、カチッとデザインが決まったらスクリーンショットで設定を保存しておくのをおすすめします。）

Webページ版もありますので、「ダウンロードはめんどくさいな」

と思った方はこちらから

https://swordofkings-blip.github.io/OBSSubscriberCSSGenerator/

【こんな方にオススメ】

・Streamlabsなどの外部連携サービスの遅延やセキュリティに不安がある方

・APIクォータ制限による表示エラーに悩まされたくない方

・チャンネル登録者数や同時視聴者数を、配信画面のデザインにピッタリ合わせて綺麗に表示したい方

・CSSの知識がなくて綺麗な切り抜き表示を諦めていた方

【使い方】

※Youtubeを想定しています

①自身のYoutubeStudioのページをGoogle Chromeで開く

（他のブラウザでも大丈夫ですが、操作統一のためchrome系推奨（Firefox以外ほとんどchrome系です））

②アナリティクスのページを開く

https://studio.youtube.com/channel/【ch固有のIDの】/analytics/tab-overview/period-default

のURLのページです。

③リアルタイムの枠の中にあるチャンネル登録者数の数字を右クリック→開発者ツール→検証

すると開発者ツールに

<div class="metric-value style-scope yta-latest-activity-card">【自身のch登録者数】</div>

みたいな部分が選択されたところがでてくると思います。

④その選択された部分で右クリック→コピー→selectorをコピーを選択

⑤本ツール(index.html)をブラウザで開いて、一意のCSSセレクタへペースト。

ペースト文字列例）

#mini-card-header > div:nth-child(5) > div.metric-value.style-scope.yta-latest-activity-card

⑥OBSプレビューを見ながら、デザインをカスタマイズ

⑦完成したら保存してから、生成されたカスタムCSSのコピーボタンを押す。

⑧OBSのソースにブラウザソースを追加。

URLに

https://studio.youtube.com/channel/【ch固有のIDの】/analytics/tab-overview/period-default

を入力して作成。

一度その状態で「対話（操作）」からGoogleにログインします。

※もしGoogleログイン時にセキュリティエラーが出る場合は、OBSのブラウザソースプロパティの最下部にある「カスタムユーザーエージェントを使用する」にチェックを入れ、枠内に Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 と入力して試してみてください。

⑨ログインが完了したら「再読み込み」を押します。

⑩もう一度プロパティを開いて、カスタムCSSの欄に

先ほどツールで作成したカスタムCSSを貼り付けます。

⑪完成！あとは幅や高さを綺麗に調整したり、心ゆくまで仕上げてください。

【更新履歴】

2026/06/05 0.2.0 公開