【全８種】YoutubeCH登録者数カウンター HTML,CSS(ネオングロー)

.

概要

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

YouTube Studioのチャンネルアナリティクスの画面を、OBSのカスタムCSSで変更する方法を採用しています。

利用方法

1️⃣ YouTube Studioでリアルタイム表示を開く

まずはブラウザで、自分の YouTube Studio を開きます。

左側のメニューから 「アナリティクス」 を選択し、チャンネル アナリティクス を表示してください。

その後、画面右側にあるリアルタイム欄の 「現在の数を表示」 をクリックします。

開いたページのURLをコピーしておきましょう。📋

2️⃣ OBSにブラウザソースを追加する

次にOBSを起動し、ソース一覧から 「ブラウザ」 を追加します。

ブラウザソースのプロパティ画面が開いたら、先ほどコピーしたURLを URL欄 に貼り付けます。

あわせて、サイズ設定は以下のように入力してください。👇

幅：800

高さ：600（好みに合わせて調整してください😊）

3️⃣ custom.css を反映する

OBSのブラウザソース設定内にある カスタムCSS には、最初からサンプル用の記述が入っています。

その内容はいったん削除し、配布ファイル内の custom.css に書かれているコードをそのままコピーして貼り付けてください。🧩

4️⃣ OBS上で表示範囲を整える

設定が完了すると、OBSのプレビュー上にカウンターが表示されます。

表示範囲をきれいに整えるには、赤枠の点 にマウスカーソルを合わせて操作します。

ALT + 左クリックしながらドラッグ

→ カウンター部分だけが見えるようにトリミングできます ✂️

赤い点を左クリックでドラッグ

→ サイズの拡大・縮小ができます 🔍

カウンター本体を左クリックでドラッグ

→ 表示したい位置に移動できます

5️⃣ 位置を固定する

最後に、ソース一覧の右側にある 🔒 マーク をクリックしてロックします。

これで配置が固定され、誤って動かしてしまうのを防げます。🔐

利用規約

【許可されること】

○ 動画・生配信への使用

○ クレジット表記不要

○ 商用利用可能（収益化チャンネルでの使用可）

○ 使用報告不要

○ トリミング・個人利用の範囲での改変

【禁止事項】

× 素材そのもの、または改変した素材の再配布・再販売

× コードの一部または全部を書き換えた上での再販売

× 本素材をベースにした派生商品の販売

× 商標登録

× 公序良俗に反する活動、不正・違法サイトでの使用

× 自作発言

変更履歴

V1.0.0 2026/03/13リリース

その他

本素材の著作権は、すべて作成者に帰属します。

コードの書き換え・改変は自由に行えますが、

改変の有無や程度にかかわらず、著作権および関連する一切の権利が利用者へ移転することはありません。

本素材の全部または一部を利用して制作された派生物についても、

第三者への販売・配布・譲渡を目的とした利用は認められません。

本素材の利用により発生したいかなる損害についても、

当方は一切の責任を負いません。