【YouTube】「チャンネル登録者数」の文字を非表示にするCSS

2024年12月30日YouTube

この記事では、PCウェブサイト版「YouTube」の動画プレーヤー下とチャンネルページにある「チャンネル登録者数」の文字を削除するCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

本記事で紹介するCSSを使えば、PCウェブサイト版「YouTube」の「チャンネル登録者数」の文字だけを非表示にできます。数字だけになりスッキリします。

通常は「チャンネル登録者数 63.2万人」といったように、「チャンネル登録者数」という文字があってそのあとに数字が表示されています。

「この数字はチャンネル登録者数を指している」と知っている人からしたら、わざわざ文字での説明は不要だと思います。非表示にすると数字だけになり見栄えが良くなります。チャンネルページと動画再生画面下の両方の文字を削除します。

本記事はチャンネル登録者数自体を非表示にする内容ではありません。「チャンネル登録者数〇〇人」のうち「〇〇人」だけ表示する…という記事です。登録者数自体を見えないようにしたい場合はこちらを参考にしてみてください。

本記事は拡張機能を導入できるPCブラウザ向けです。スマホやタブレットのアプリ版ではできません。

1. インストール方法
2. 「チャンネル登録者数」の文字だけ非表示にするCSS
3. 文字がずれて表示される場合の対処法
4. チャンネル登録者数自体を削除するCSS
5. 感想

インストール方法

Chromeウェブストアからインストールできます。

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot - Chrome Web Store

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

「チャンネル登録者数」の文字だけ非表示にするCSS

スタイルシートを開く

「YouTube」にアクセスします。インストールした「Stylebot」の拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。

CSS

/*チャンネルページの｢チャンネル登録数｣の文字削除（2024年12月30日更新）*/
div#page-header yt-content-metadata-view-model div:nth-of-type(2)>span:nth-of-type(1) {
    margin-left: -130px !important;
}

/*動画再生ページの｢チャンネル登録数｣の文字削除（2024年12月30日更新）*/
yt-formatted-string#owner-sub-count {
    margin-left: -136px !important;
    font-size: 15px !important;
}