OBSだけでチャンネル登録者数を常時表示させる

配信画面でよく見る、チャンネル登録者数の表示。表示をする為に、YouTubeStudioの画面を毎回開いてトリムしているのがよくあるやり方ですが、実はOBSから直接表示させる方法があります。

思っているより簡単に出来るので、是非やってみてください。

チャンネル登録者数のURLを取得する

チャンネル登録者数のURLはYouTubeStudioのアナリティクスから取得する事ができます。URLは通常の配信で利用しているブラウザで、[ YouTubeStudio ] の [ アナリティクス ] にアクセスしてください。

[ アナリティクス ] のページの右側にあるリアルタイム更新のチャンネル登録者数の下の [ 現在の数を表示 ] をクリックします。

そうすると下記のページが表示がされます。

そして、下記の様なURLがアドレスバーに表示されるので、こちらをコピーしておいてください。（チャンネルIDはあなたのチャンネルのIDになります。）

https://studio.youtube.com/channel/チャンネルID/analytics/tab-overview/period-default/explore?entity_type=CHANNEL&entity_id=チャンネルID&time_period=4_weeks&explore_type=SUBSCRIBERS

OBSのカスタムブラウザドックでYouTubeにログインする

OBSのカスタムブラウザドックで自分のチャンネルURLににアクセスし、ログインをします。

OBSの上部のメニューにある [ ドック ] の中にある [ カスタムブラウザドック ] を選択します。

追加すると、YouTubeの画面がでてくるので、通常のブラウザと同じように右上のログインからログインしてください。

このログインを行う事により、先に取得しているURLもログインした状態になります。

OBSへソースを追加する

ログインが完了した後に、OBSへ[ ブラウザソース ] で先ほど取得したURLを入力します。

ブラウザの入力画面が表示されたら、下記の様に入力をしてください。

入力するCSS

下記のCSSをカスタムCSSへコピペする事で、表示を好きなものに変更できます。
ソースコードの上にカーソルを持っていくと右側にコピーボタンが表示されるので、そこからコピーしていってください。

#page-container{
    background: #0f1!important;
    color: #fff!important;
}

background: #0f1!important;　が背景をグリーンバックにするものです。
color: #fff!important;　が文字の色を変更するものです。お好きな色に設定してください。

!importantがないと反映されない場合があるので忘れないように！！

カスタマイズする

単色で設置するのも問題ありませんが、可愛いデザインに合わせて変更などもできます。サンプルおいておくので、是非自分の好きな色にして設置してみてください！

黄色からピンクへのグラデーションにするCSS

#counter {background:#0f1;}
.small-counter-area.yta-explore-subscribers #counter.yta-explore-subscribers {
    --font-size: 160px;
    --digit-width: 102px;
    --non-digit-width: 86px;
    --digit-height: 142px;
}
.counter-value {
    color: transparent;
    -webkit-background-clip: text;
    background-image: linear-gradient(135deg, #ffec61, #f321d7);
}

黄赤紫青のグラデーションにするCSS

#counter {background:#0f1;}
.small-counter-area.yta-explore-subscribers #counter.yta-explore-subscribers {
    --font-size: 160px;
    --digit-width: 102px;
    --non-digit-width: 86px;
    --digit-height: 142px;
}
.counter-value {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 40%, rgba(154, 39, 238, 1) 68%, rgba(35, 102, 247, 1) 90%);
}

数字を少しでも楽しむために

チャンネル登録者数の増減で気分も上下してしまうものですが、できるだけ楽しく見ていられるものにしておいて、配信中、楽しい気分でいられるようにしましょう。