【無料0円】YouTubeチャンネル登録者数カウンター（HTML/CSS）

YouTubeのチャンネル登録者数を表示するカウンターです。

YouTube DATA APIでは、有効数字3桁しか取得できないため、YouTube Studioのチャンネルアナリティクスの画面を、OBSのカスタムCSSで書き換える方式を採用しています。

「👀👍同接数＆高評価数カウンター」と似たデザインとなっています。

使った感想等を「#まえっち業務連絡」を付けて𝕏にポストしていただけると嬉しいです。

問い合わせ先：𝕏(Twitter) @maH_support

機能

１．チャンネル登録者数表示機能

　　・YouTube Studioのチャンネルアナリティクス表示を使って、リアルタイムにチャンネル登録者数を表示します。

２．デザインカスタマイズ

　　・カスタムCSSの変数の値を変更することで、表示幅、表示高さ、文字色、背景色、背景透過率、角丸、枠線幅、アイコンを変更できます。

:root {

--textColor: 0, 0, 0; /* 文字色(R, G, B) */

--backgroundColor: 255, 255, 255; /* 背景色(R, G, B) */

--opacity: 1; /* 背景透過率（0から1で指定） */

--borderWidth: 4px; /* 枠線の太さ（0で線なし） */

--statusWidth: 300px; /* ステータス幅 */

--statusHeight: 80px; /* ステータス高さ */

--borderRadius: 50px; /* 枠線の角丸 */

--icon: "🔔"; /* アイコン */

事前準備

１．OBS内蔵ブラウザに自分のYouTubeアカウントのログイン情報を記憶させます。

　　OBSを起動して、メニューの「ドッグ」ー「カスタムブラウザドック」を開きます。

　　ドッグ名に「YouTube」、URLにあなたのチャンネルのURL（https://youtube.com/channel/チャンネルID）を入力します。

　　【適用】を押すとYouTubeのログイン画面が表示されるので、右上の【ログイン】をクリックしてログインを完了してください。

　　ログイン完了したら、右上の❌️でドッグ画面を閉じます。

２．ダウンロードした「maH-Subscribersx.x.x」のzipファイルをお使いのPCのHDDやSSDに展開して「custom.css」があることを確認します。

設定方法

１．自分のチャンネルのYouTube Studioをブラウザで開きます。

２．左側のメニューリストから【アナリティクス】をクリックして、チャンネル アナリティクスを表示し、右側のリアルタイムの【現在の数を表示】をクリックします。

　　この時にブラウザに表示されたURLをコピーします。

３．OBSを起動して、ソースに「ブラウザ」を追加します。

　　プロパティが表示されたら、先程コピーしたURLをURL欄に貼り付けます。

　　幅欄に「1920」、高さ欄に「1080」を入力します。

　　カスタムCSSに標準で記入されている設定を削除して、custom.cssの内容をコピー＆ペーストします。

４．カスタムCSSの変数をお好きなデザインとなるように変更します。（機能のデザインカスタマイズの内容を参照）

　　変更が完了したら【OK】をクリックします。

５．OBSの配信画面にカウンターが表示されるので、赤枠の点部分にマウスカーソルを合わせて、ALT+左クリックでドラッグしてカウンター部分だけを表示するようにサイズを調整します。

　　赤点の部分を左クリックでドラッグすると、拡大・縮小ができます。カウンターを左クリックでドラッグして表示したい位置に移動します。

６．ソース表示の右の🔒️マークをクリックして位置を固定します。

ライセンスについて

このソフトウェアを使用する場合は、以下を必ずお読みください。

(c) 2025 maHover18

・個人、法人問わず商用利用可能です。

・クレジット表記、使用報告の義務はありません。クレジット表記していただけると喜びます。

・用途に合わせて自由に改変可能です。ただし、改変した場合は、概要欄に「チャンネル登録者数カウンター (c) 2025 maHover18」の記載をお願いします。

・改変したものの再配布や自作発言はご遠慮ください。

・ソースの利用によって発生したトラブルには一切の責任を負いません。

謝辞

■YouTube Studioのチャンネル登録者数をOBSに表示するにあたり、kentaxさんの下記の記事を参考にさせていただきました。

https://enjoy-vtuber.net/obs_view_youtube_subscribers/

変更履歴

Ver1.0.0 初版