【YouTube】邪魔な左メニューを消すCSS（拡張機能「Stylebot」）

スマホで読むときは、横持ちがおすすめです。

最速手順（パソコンのみ）

  1. YouTubeのページ内で、Chromeクローム拡張機能「Stylebotスタイルボット」（無料）を開く。
  2. 「Stylebotを開く」→「コード」を押して、真っ白なページを開く。
  3. 下のCSSコードをコピペして、左メニューに反映されれば完了。

コピーボタン↓

/*【左メニューの文字】登録チャンネル、探索、YouTubeの他のサービス*/
yt-formatted-string.style-scope.ytd-guide-section-renderer {
  display: none;
}

/*【左メニュー】ホーム、ショート*/
ytd-guide-entry-renderer:has(a#endpoint[title="ホーム"],[title="ショート"]) {
  display: none;
}

/*【左メニュー】マイページ*/
#guide-content #header {
  display: none;
}

/*【左メニュー】履歴、作成した動画、後で見る、オフライン*/
ytd-guide-entry-renderer:has(a#endpoint[title="履歴"],[title="作成した動画"],[title="後で見る"],[title="オフライン"]) {
  display: none;
}

/*【左メニュー】急上昇、音楽、ムービー&TV、ライブ、ゲーム、ニュース、スポーツ、コース*/
ytd-guide-entry-renderer:has(a#endpoint[title="急上昇"],[title="音楽"],[title="ムービー＆TV"],[title="ライブ"],[title="ゲーム"],[title="ニュース"],[title="スポーツ"],[title="コース"]) {
  display: none;
}

/*【左メニュー】YouTube Premium、YouTube Kids、YouTube Music、YouTube Studio*/
ytd-guide-entry-renderer:has(a#endpoint[title="YouTube Premium"],[title="YouTube Kids"],[title="YouTube Music"],[title="YouTube Studio"]) {
  display: none;
}

/*【左メニュー】設定、報告履歴、ヘルプ、フィードバックを送信*/
ytd-guide-entry-renderer:has(a#endpoint[title="設定"],[title="報告履歴"],[title="ヘルプ"],[title="フィードバックを送信"]) {
  display: none;
}

/*【左メニュー】１番下の表記（フッター）*/
#guide-content #footer {
  display: none;
}

/*【左メニュー】ボーダーライン*/
ytd-guide-section-renderer.style-scope.ytd-guide-renderer {
  border: none;
}

ここからStylebotの使い方を解説します。

PC（パソコン）ブラウザ版「YouTube」の邪魔な左メニューを消すCSSコードを紹介します。

自分で考えたCSSコードをウェブサイトに適用できるChromeクローム拡張機能「Stylebotスタイルボット」（無料）を使います。

スマホやタブレットでは使えません。

紹介するコードは、YouTubeの仕様変更で使えなくなる可能性があります。その点を理解した上でお使いください。

紹介するCSSコードで以下の左メニューを消します。

  • 「登録チャンネル」「探索」「YouTubeの他のサービス」（文字）
  • ホーム、ショート
  • マイページ、履歴、作成した動画（※）、後で見る、オフライン（※）
  • 急上昇、音楽、ムービー＆TV、ライブ、ゲーム、ニュース、スポーツ、コース
  • 設定、報告履歴、ヘルプ、フィードバックを送信
  • YouTube Premiumプレミアム、YouTube Kidsキッズ、、YouTube Musicミュージック（※）、YouTube Studioスタジオ（※）
  • １番下の表記（フッター）
  • 残ったボーダーライン

※オフライン、YouTube Musicは、YouTube Premiumに加入しない限り、左メニューに表示されません。

※作成した動画、YouTube Studioは、自分のチャンネルを作成して、YouTube Studioのページ内に入らない限り、左メニューに表示されません。

Stylebotのインストール方法

ChromeウェブストアでStylebotのページに入り、「Chromeに追加」を押してインストールします。

「自分の全データの読み取りと変更」などと聞かれますが、「拡張機能を追加」を押します。

突然「Stylebot Help」などと英語のページに飛ばされますが、閉じて大丈夫です。

画面右上に拡張機能ボタンが追加されればOKです。固定ボタンを押してショートカットをつくります。

CSSコードの入力方法

Stylebotを開き、①「Stylebotを開く」②「コード」を押して、③真っ白なページが出たら、下のCSSコードを入力します。

コピーボタン↓

/*【左メニューの文字】登録チャンネル、探索、YouTubeの他のサービス*/
yt-formatted-string.style-scope.ytd-guide-section-renderer {
  display: none;
}

/*【左メニュー】ホーム、ショート*/
ytd-guide-entry-renderer:has(a#endpoint[title="ホーム"],[title="ショート"]) {
  display: none;
}

/*【左メニュー】マイページ*/
#guide-content #header {
  display: none;
}

/*【左メニュー】履歴、作成した動画、後で見る、オフライン*/
ytd-guide-entry-renderer:has(a#endpoint[title="履歴"],[title="作成した動画"],[title="後で見る"],[title="オフライン"]) {
  display: none;
}

/*【左メニュー】急上昇、音楽、ムービー&TV、ライブ、ゲーム、ニュース、スポーツ、コース*/
ytd-guide-entry-renderer:has(a#endpoint[title="急上昇"],[title="音楽"],[title="ムービー＆TV"],[title="ライブ"],[title="ゲーム"],[title="ニュース"],[title="スポーツ"],[title="コース"]) {
  display: none;
}

/*【左メニュー】YouTube Premium、YouTube Kids、YouTube Music、YouTube Studio*/
ytd-guide-entry-renderer:has(a#endpoint[title="YouTube Premium"],[title="YouTube Kids"],[title="YouTube Music"],[title="YouTube Studio"]) {
  display: none;
}

/*【左メニュー】設定、報告履歴、ヘルプ、フィードバックを送信*/
ytd-guide-entry-renderer:has(a#endpoint[title="設定"],[title="報告履歴"],[title="ヘルプ"],[title="フィードバックを送信"]) {
  display: none;
}

/*【左メニュー】１番下の表記（フッター）*/
#guide-content #footer {
  display: none;
}

/*【左メニュー】ボーダーライン*/
ytd-guide-section-renderer.style-scope.ytd-guide-renderer {
  border: none;
}
ビフォー
アフター

CSSコードを無効にする

  • Stylebot内のオンオフスイッチを使う。
  • 入力したコード一部消す（または全文）。

解説します↓

Stylebotのオンオフスイッチ

YouTubeのページ内でStylebotを開き、YouTubeのサイト名（例：www.youtube.com）の左側にあるスイッチをオフにすると、入力したコードが無効化されます。

入力したコードを一部（または全文）消す

紹介したコードは、それぞれ「display: none;」（「border: none;」）という英文が入っています。語尾の「e」だけ消して、「display: non;」（「border: non;」）にすると無効化されます。

コードの一部を消す方法は、「無効化したい、でもコードは残したい」人におすすめです。

ビフォー
アフター

左メニューをより細かく表示・非表示にする

紹介したコードの中に、「[title=”～”]」という部分がある（「～」は左メニューの項目名）。その部分をピンポイントで消すと、目的の左メニューが元通り表示される。

解説します↓

紹介したコードのいくつかは、左メニューの複数の項目をまとめて消せるようにしています。以下の通りです。

  • ホーム、ショート
  • 履歴、作成した動画、後で見る、オフライン
  • 急上昇、音楽、ムービー＆TV、ライブ、ゲーム、ニュース、スポーツ、コース
  • 設定、報告履歴、ヘルプ、フィードバックを送信
  • YouTube Premium、YouTube Kids、YouTube Music、YouTube Studio

例えば、

左メニューの「ショート」は消えたままでいいけど、「ホーム」は表示させたい！

この場合、コードの中の「[title=”ホーム”],」を消します。

「[title=”ホーム”],」を消す前
「[title=”ホーム”],」を消した後

【注意】「,（カンマ）」は適切に入れる

下の画像は例です。「[title=”ホーム”]」と「[title=”ホーム”]」の間に「,」を入れていないことが原因で、入力したコードが目的通りに機能しません。

消すボタンを新しく追加する

コードの「ytd-guide-entry-renderer:has(a#endpoint」のあとに、「[title=”～”]」（「～」は消したい左メニューの項目名）を入れる。

解説します↓

【例】コードを全部コピペしても、左メニューの「再生リスト」や「高く評価された動画」を消せない！

その場合、紹介しているコードの「ytd-guide-entry-renderer:has(a#endpoint」という英文のあとに、「[title=”再生リスト”],[title=”高く評価された動画”],」を入力します。

下のようなコードになります。

/*【左メニュー】ホーム、ショート*/
ytd-guide-entry-renderer:has(a#endpoint[title="再生リスト"],[title="高く評価した動画"],[title="ホーム"],[title="ショート"]) {
  display: none;
}
ビフォー
アフター

「/*～～*/」（～～は適当な文字）はメモ代わりに使える

「/*」と「*/」の間に挟まれた文字は、注釈扱いになります。挟まれてさえいれば、どんな文字でもコードは問題なく機能します。

例

終わり。