広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

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

2022年11月10日YouTube

YouTubeのアイコン

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

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」や「Stylus(スタイラス)」を利用します。

PCウェブサイト版「YouTube」の左側サイドバーの画像1

本記事で紹介するCSSを使えば、PCウェブサイト版「YouTube」の左側サイドバーにある、以下のような項目を見えないよう隠せます。消すことでスッキリします。

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

「使っていない項目を削除してスッキリさせたい!」という方、参考にしてみてください。サクっと非表示にでき、いつでもオンオフできます。自身の環境上(見た目の表示)だけの反映で、他の方には影響されません。自分のPCだけで、誰にも迷惑をかけません。

左側サイドバーとは、下記画像の部分です。PCブラウザで「YouTube」にアクセスすると、左側に表示されます。僕の場合、結構使っていない項目がありました。使わないのに表示されているせいで、本当に押したい項目を探すのが手間でした。

PCウェブサイト版「YouTube」の左側サイドバーの画像2

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

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

Stylebot - Chrome ウェブストア

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

「YouTube」の左側サイドバーにある不要な項目を非表示にするCSS

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

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

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。

書き込むコードは、以下になっています。全部を書き込む必要はありません。自分が消したい項目だけコピペします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

書き込めたら右上の「×」でスタイルシートを閉じます。

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

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

書き込んだ項目が綺麗に消えます。「ショート」や「探索」、「後で見る」、「オフライン」など、使っていない項目はじゃんじゃん消すといいかなと思います。

PCウェブサイト版「YouTube」の左側サイドバーの不要な項目を削除する前と後の比較画像

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

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

PCウェブサイト版「YouTube」の左側サイドバーの探索内の不要項目を削除した画像

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

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

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

収納時のミニサイドバーに適用するCSS

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;
}

ウィンドウを一定の横幅まで狭めるか、左上の三本線をクリックすると、ミニサイドバーに切り替わります。

PCウェブサイト版「YouTube」のフレキシブルな左側サイドバー画像

左側サイドバーの項目間の余白具合を調整するCSS

左側サイドバーの各項目間の余白具合を調整したい場合、以下のCSSを利用します。

/*左サイドバーの余白*/
tp-yt-paper-item.ytd-guide-entry-renderer {
    padding: 0 10px 0 5px;
}

/*左サイドバーの項目の高さ*/
ytd-guide-entry-renderer {
    height: 34px !important;
    overflow: hidden;
}

比較画像を貼っておきます。左が導入前で、右が導入後です。項目間の余白がきゅっと狭くなり、一ページに表示される項目量が増えます。

PCウェブサイト版「YouTube」の左側サイドバーの項目間の余白をCSSで調整した比較画像

【余談】アカウントメニューから不要な項目を消したい場合

ログインしている時に、右上のプロフィールアイコンをクリックすると、アカウントメニューが表示されます。

この中にある「Googleアカウント」、「YouTube Studio」、「購入とメンバーシップ」、「YouTubeでのデータ」、「制限付きモード」など、不要な項目を消すCSS記事を書いています。詳しくは、下記記事を参考にしてみてください。

感想

以上、PCウェブサイト版「YouTube」の左側サイドバーの項目を、CSSで綺麗にする方法でした。

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

PCウェブサイト版「YouTube」の左側サイドバーをCSSで、かなりスッキリさせた画像

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

2022年11月10日YouTube

Posted by ナポリタン寿司