【YouTube】検索結果ページの邪魔な部分を消すCSS（拡張機能「Stylebot」）

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

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

1. YouTubeでChromeクローム拡張機能「Stylebotスタイルボット」を開く。
2. 「Stylebotを開く」、次に「コード」を押して、真っ白なページを開く。
3. 下記のCSSコードをコピペして、検索結果ページで「詳細検索」「YouTubeによる自動生成」「横に並んだショート動画」「他の人はこちらも検索」「未視聴のチャンネル・関連する検索から」が消えれば完了。

コピーボタン↓

/*【検索結果】上部の詳細検索*/
ytd-search-header-renderer.style-scope.ytd-search {
  display: none;
}

/*【検索結果（主にゲーム）】右側のYouTubeによる自動生成*/
ytd-secondary-search-container-renderer.style-scope.ytd-two-column-search-results-renderer {
  display: none;
}

/*【検索結果】横に並んだショート動画*/
ytd-reel-shelf-renderer.style-scope.ytd-item-section-renderer {
  display: none;
}

/*【検索結果】他の人はこちらも検索*/
ytd-horizontal-card-list-renderer.style-scope.ytd-item-section-renderer {
  display: none;
}

/*【検索結果】未視聴のチャンネル・関連する検索から*/
div.style-scope.ytd-shelf-renderer {
  display: none;
}

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

PC（パソコン）ブラウザ版YouTubeで、検索結果ページの「詳細検索」・「YouTubeによる自動生成」「ショート動画」を非表示にするCSSコードを紹介します。

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

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

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

「Stylebot」のインストール方法

Chromeウェブストアで下記画像のStylebotのページから、「Chromeに追加」を押してインストールします。

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

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

PC画面の右上に拡張機能ボタンが追加されればOK（初めて拡張機能をインストールした場合）。固定ボタンを押してショートカットをつくります。

CSSの入力方法

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

コピーボタン↓

/*【検索結果】上部の詳細検索*/
ytd-search-header-renderer.style-scope.ytd-search {
  display: none;
}

/*【検索結果（主にゲーム）】右側のYouTubeによる自動生成*/
ytd-secondary-search-container-renderer.style-scope.ytd-two-column-search-results-renderer {
  display: none;
}

/*【検索結果】横に並んだショート動画*/
ytd-reel-shelf-renderer.style-scope.ytd-item-section-renderer {
  display: none;
}

/*【検索結果】他の人はこちらも検索*/
ytd-horizontal-card-list-renderer.style-scope.ytd-item-section-renderer {
  display: none;
}

/*【検索結果】未視聴のチャンネル・関連する検索から*/
div.style-scope.ytd-shelf-renderer {
  display: none;
}

CSSコードを無効にする

Stylebotのオンオフスイッチ

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

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

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

下の画像は、「YouTubeによる自動生成」を消すコードを無効化して、元に戻しています。

どのCSSコードがどこを消しているのか

【検索結果】詳細検索

「フィルタ」ボタンは残したい人へ

下のコードで「詳細検索」の「フィルタ」ボタン（右端）・それ以外で、個別に消したり元に戻したりできます。

/*【検索結果】詳細検索の「フィルタ」ボタン*/
button.yt-spec-button-shape-next.yt-spec-button-shape-next--text.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-trailing.yt-spec-button-shape-next--enable-backdrop-filter-experiment {
  display: none;
}

/*【検索結果】詳細検索（フィルタ以外）*/
iron-selector.style-scope.yt-chip-cloud-renderer {
  display: none;
}

「フィルタ」ボタンは、今年中に出た動画・評価の多い動画の検索に便利です。

【検索結果】YouTubeによる自動生成

/*【検索結果（主にゲーム）】右側のYouTubeによる自動生成*/
ytd-secondary-search-container-renderer.style-scope.ytd-two-column-search-results-renderer {
  display: none;
}

【検索結果】横に並んだショート動画

/*【検索結果】横に並んだショート動画*/
ytd-reel-shelf-renderer.style-scope.ytd-item-section-renderer {
  display: none;
}

【検索結果】他の人はこちらも検索

/*【検索結果】他の人はこちらも検索*/
ytd-horizontal-card-list-renderer.style-scope.ytd-item-section-renderer {
  display: none;
}

【検索結果】未視聴のチャンネル・関連する検索から

/*【検索結果】未視聴のチャンネル・関連する検索から*/
div.style-scope.ytd-shelf-renderer {
  display: none;
}

終わり。