【YouTube】トップページのジャンルバーを非表示にするCSS
YouTubeのトップページにあるジャンルバーとは、以下のようなジャンルが記載されたアレのことです。ジャンルバーって言っていますが、正式名称は知りません。僕が勝手に今つけました。
- すべて
- 音楽
- ゲーム
- コント
- キャラクターアニメ、子供向け
- 料理
- 最近アップロードされた動画
人によっては、不要かもしれません。2023年4月時点で、標準の設定からは消せません。CSSを利用することで消せます。不要だと思う方、参考にしてみてください。いつでもオンオフできます。
本記事は、PCブラウザユーザー向けです。スマホアプリ版ではありません。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/YouTubeの「ジャンルバー」を非表示にするCSS
Chrome拡張機能をインストールしたブラウザで、「YouTube」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*ヘッダーのジャンルバーを非表示*/
div#header:has([component-style$="BAR_STYLE_TYPE_DEFAULT"]:not([component-style$="CHANNEL_PAGE_GRID"]) #chips-wrapper) {
display: none !important;
}下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
ジャンルバーが丸々消えます。画面を少しだけ広く利用できます。
本記事を公開した時は、別のCSSを紹介していました。そのCSSだと、チャンネルページの動画タブのヘッダーも削除していました。ここは消さないように、CSSを修正しました。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、PCウェブサイト版「YouTube」のトップページに表示されるジャンルバーを非表示にするCSSでした。
2022年10月頃から、YouTubeのデザインが変わりました。個人的には結構好きです。
