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

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

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

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

/*【検索結果】ミックスリスト、知らん人のプレイリスト*/
yt-lockup-view-model.ytd-item-section-renderer.lockup {
  display: none;
}

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

PC（パソコン）ブラウザ版YouTubeで、検索結果の邪魔な部分を消すCSSコードを紹介します。自分で考えたコードをWebサイトに適用できるChromeクローム拡張機能「Stylebotスタイルボット」（無料）を使います。

「PCのみ使える方法＋そのうち使えなくなる可能性あり」ですが、それでも良いよ！という方はお使いください。

「Stylebot」をインストール

１．chromeウェブストアで上記画像のStylebotを検索し、「Chromeに追加」を押します。

２．「～自分の全データの読み取りと変更」と出ますが、「拡張機能を追加」を押します。

３．英語のページに飛びますが、閉じて大丈夫です。

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

CSSコードを入力

YouTubeのページ内で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;
}

/*【検索結果】ミックスリスト、知らん人のプレイリスト*/
yt-lockup-view-model.ytd-item-section-renderer.lockup {
  display: none;
}

CSSコードを無効化

StylebotのON・OFFスイッチ

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

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

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

どのコードが何を消してるのか

詳細検索

「フィルタ」ボタンだけ残す

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

上のコードは「フィルタ」ボタン（1年以内に出た動画・評価の多い動画の検索に便利）だけ残します。

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

ミックスリスト、知らん人のプレイリスト

/*【検索結果】ミックスリスト、知らん人のプレイリスト*/
yt-lockup-view-model.ytd-item-section-renderer.lockup {
  display: none;
}

終わり。