【YouTube】トップページのジャンルバーを非表示にするCSS

2022年8月26日YouTube

YouTubeのアイコン

この記事では、YouTubeのトップページの上部にあるジャンルバーを非表示にするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

【YouTube】トップページのジャンルバーを非表示にするCSS

本記事で紹介するCSSを使えば、YouTubeのトップページの上部にあるジャンルの絞り込みバーを非表示にできます。

以下のようなジャンルが記載されたアレのことです。ジャンルバーって言っていますが、正式名称は知りません。僕が勝手に今つけました。

  • すべて
  • 音楽
  • ゲーム
  • コント
  • キャラクターアニメ、子供向け
  • 料理
  • 最近アップロードされた動画

なんだかんだこのバーは高いので、画面を占有してしまいます。邪魔だと思った方は、僕だけではないはず…。ということで、非表示にする方法を書きます。CSSなので、いつでもオンオフできます。誰にも迷惑をかけません。

消すことで、ちょっとだけスタイリッシュにできます。最後におまけとして、検索ボックスがあるヘッダーの高さを調整するコードも紹介します。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

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

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

YouTubeの「ジャンルバー」を非表示にするCSS

YouTube」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのポップアップメニュー

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*ヘッダーのジャンルバーを非表示*/
div#header:has(#chips-wrapper) {
  display: none;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスタイルシート画面

再度拡張機能ボタンを押して、登録したサイト(例:www.youtube.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

ジャンルバーが丸々消えます。これで、画面を少しだけ広く利用できます。

ジャンル絞り込みバーを消したYouTube画面

一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、YouTubeのトップページに表示されるジャンルバーを非表示にするCSSでした。

2022年10月頃から、YouTubeのデザインが変わりましたね。個人的には結構好きです。

2022年8月26日YouTube