【YouTube】左側サイドバーの不要な項目を削除するCSS

2022年11月10日YouTube

YouTubeのアイコン

この記事では、YouTubeの左側サイドバーにある「ショート」、「後で見る」、「オフライン」、「急上昇」などの項目を削除してスッキリするCSSについて書きます。

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

YouTubeの左側サイドバーの画像1

本記事で紹介するCSSを使えば、YouTubeの左側サイドバーにある以下のような項目を削除できます。消すことでスッキリします。

  • ホーム
  • ショート
  • Originals
  • YouTube Music
  • ライブラリ
  • 履歴
  • 自分の動画
  • 後で見る
  • オフライン
  • 自分のクリップ
  • 探索(急上昇、学び、ニュースなど)
  • YouTubeのその他のサービス
  • 報告履歴
  • ヘルプ
  • フィードバックを送信
  • フッター

「使っていない項目を削除してスッキリさせたい!」という方、参考にしてみてください。サクっと非表示にでき、いつでもオンオフできます。

左側サイドバーとは、以下の部分です。YouTubeにアクセスすると、左側に表示されます。

YouTubeの左側サイドバーの画像2

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

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

左側サイドバーの不要な項目を削除するCSS

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。全部を書き込む必要はありません。自分が消したい項目だけコピペします。

/*左メニューの「ホーム」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="ホーム"]) {
  display: none;
}

/*左メニューの「ショート」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="ショート"]) {
  display: none;
}

/*左メニューの「Originals」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="Originals"]) {
  display: none;
}

/*左メニューの「YouTube Music」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="YouTube Music"]) {
  display: none;
}

/*左メニューの「ライブラリ」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="ライブラリ"]) {
  display: none;
}

/*左メニューの「履歴」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="履歴"]) {
  display: none;
}

/*左メニューの「自分の動画」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="自分の動画"]) {
  display: none;
}

/*左メニューの「後で見る」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="後で見る"]) {
  display: none;
}

/*左メニューの「オフライン」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="オフライン"]) {
  display: none;
}

/*左メニューの「自分のクリップ」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="自分のクリップ"]) {
  display: none;
}

/*左メニューの「急上昇(探索)」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="急上昇"]) {
  display: none;
}

/*左メニューの「音楽(探索)」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="音楽"]) {
  display: none;
}

/*左メニューの「ライブ(探索)」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="ライブ"]) {
  display: none;
}

/*左メニューの「ゲーム(探索)」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="ゲーム"]) {
  display: none;
}

/*左メニューの「ニュース(探索)」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="ニュース"]) {
  display: none;
}

/*左メニューの「スポーツ(探索)」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="スポーツ"]) {
  display: none;
}

/*左メニューの「学び(探索)」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="学び"]) {
  display: none;
}

/*左メニューの「YouTubeのその他のサービス」一覧すべて削除*/
ytd-guide-section-renderer.ytd-guide-renderer:has(path[d^="M11.13 1.21c"]) {
  display: none;
}

/*左メニューの「報告履歴」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="報告履歴"]) {
  display: none;
}

/*左メニューの「ヘルプ」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="ヘルプ"]) {
  display: none;
}

/*左メニューの「フィードバックを送信」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="フィードバックを送信"]) {
  display: none;
}

/*左メニューのフッター削除*/
#guide-content #footer {
  display: none;
}

右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

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

書き込んだ項目が綺麗に消えます。ショートやOriginals、後で見る、オフラインなど、使っていない項目はじゃんじゃん消してみましょう。

YouTubeの左側サイドバーの不要な項目を削除する前と後の比較画像

「ホーム」も人によっては不要かもですね。YouTubeロゴを押すことでもホームに戻れるので、役割が被っています。

探索項目も、自分の好きなジャンルだけにできます。

YouTubeの左側サイドバーの探索内の不要項目を削除した画像

そもそも探索自体を丸々削除したい場合は、以下のコードを使ってみてください。

/*左メニューの「探索」一覧すべて削除*/
ytd-guide-section-renderer.ytd-guide-renderer:has(a#endpoint[title="急上昇"]) {
  display: none;
}

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

ウィンドウを小さくした時用

YouTubeのウィンドウを小さくしたとき、フレキシブルで左側メニューが出現します。これらも削除したい場合は、以下のコードを追加で利用してみてください。

/*左メニューの「ホーム」削除*/
ytd-mini-guide-entry-renderer[aria-label="ホーム"] {
  display: none;
}

/*左メニューの「ショート」削除*/
ytd-mini-guide-entry-renderer[aria-label="ショート"] {
  display: none;
}

/*左メニューの「登録チャンネル」削除*/
ytd-mini-guide-entry-renderer[aria-label="登録チャンネル"] {
  display: none;
}

/*左メニューの「Originals」削除*/
ytd-mini-guide-entry-renderer[aria-label="Originals"] {
  display: none;
}

/*左メニューの「YouTube Music」削除*/
ytd-mini-guide-entry-renderer[aria-label="YouTube Music"] {
  display: none;
}

/*左メニューの「ライブラリ」削除*/
ytd-mini-guide-entry-renderer[aria-label="ライブラリ"] {
  display: none;
}

/*左メニューの「オフライン」削除*/
ytd-mini-guide-entry-renderer[aria-label="オフライン"] {
  display: none;
}

以下の部分のことです。ウィンドウを一定の横幅まで狭めるとミニサイドバーに切り替わります。

YouTubeのフレキシブルな左側サイドバー画像

感想

以上、YouTubeの左側サイドバーの項目を、CSSで綺麗にする方法でした。

僕は、ほとんど削除しています。かなりスッキリしていい感じです。

YouTubeの左側サイドバーをかなりスッキリさせた画像

余談ですが、チャンネルページは、以下のようにカスタマイズしています。最近YouTubeのデザインが変わって、若干表示が崩れた部分もありますが、いちおまだ使えます。

2022年11月10日YouTube