【YouTube】トップページのジャンルバーを非表示にするCSS
この記事では、YouTubeのトップページの上部にあるジャンルバーを非表示にするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、YouTubeのトップページの上部にあるジャンルの絞り込みバーを非表示にできます。
以下のようなジャンルが記載されたアレのことです。ジャンルバーって言っていますが、正式名称は知りません。僕が勝手に今つけました。
- すべて
- 音楽
- ゲーム
- コント
- キャラクターアニメ、子供向け
- 料理
- 最近アップロードされた動画
なんだかんだこのバーは高いので、画面を占有してしまいます。邪魔だと思った方は、僕だけではないはず…。ということで、非表示にする方法を書きます。CSSなので、いつでもオンオフできます。誰にも迷惑をかけません。
消すことで、ちょっとだけスタイリッシュにできます。最後におまけとして、検索ボックスがあるヘッダーの高さを調整するコードも紹介します。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/YouTubeの「ジャンルバー」を非表示にするCSS
「YouTube」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*ヘッダーのジャンルバーを非表示*/
div#header:has(#chips-wrapper) {
display: none;
}下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
ジャンルバーが丸々消えます。これで、画面を少しだけ広く利用できます。
一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、YouTubeのトップページに表示されるジャンルバーを非表示にするCSSでした。
2022年10月頃から、YouTubeのデザインが変わりましたね。個人的には結構好きです。
