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

Stylebot&Stylus

Stylebotのアイコン

この記事では、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です。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

CSS

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

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

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

/*ヘッダーのジャンルバーを非表示*/
#primary #header {
  display: none;
}

/*コンテンツ全体を上にずらす*/
#primary #contents {
  margin-top: 0;
}

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

YouTubeのジャンルバーを非表示にするコードを書き込んだ画面

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

ジャンルバーが丸々消えます。「コンテンツ全体を上にずらす」は、上に残ってしまう余白を除去するコードです。一緒に書き込んでおくといいかなと思います。

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

これで、画面を少しだけ広く利用できます。

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

感想

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

おまけで、ヘッダー(検索ボックスなど)をちょっと小さくするコードも書いておきます。一緒に併用すると、よりスタイリッシュになります。それぞれの数値は、各自で合うように調整してみてください。

/*ヘッダー(検索ボックスなど)の高さ調整*/
#container.ytd-masthead {
  height: 42px;
}

/*コンテンツ全体の位置調整*/
#page-manager.ytd-app {
  margin-top: 46px !important;
}

Posted by ナポリタン寿司