【無料0円】YouTubeチャンネル登録者数カウンター（HTML/CSS）
- Digital0 JPY
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 初版