【YouTube×拡張機能「Stylebot」】「後で見る・キューに追加」を消すCSS

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

最速手順(パソコンのみ)

  1. YouTubeを開き、次にChromeクローム拡張機能「Stylebotスタイルボット」(無料)を開く。
  2. 「Stylebotを開く」、次に「コード」を押して真っ白なページを開く。
  3. 下のCSSコードをコピペして、サムネイル右上にマウスカーソルを置いても「後で見る・キューに追加」が出なくなれば完了。

コピーボタン↓

/*【サムネイル右上】後で見る・キューに追加*/
ytd-thumbnail-overlay-toggle-button-renderer.style-scope.ytd-thumbnail {
  display: none;
}

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

PC(パソコン)ブラウザ版「YouTube」のサムネイル右上にある「後で見る・キューに追加」を消すCSSコードを紹介します。

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

スマホやタブレットでは使えないし、YouTubeの仕様変更でPCでも使えなくなる可能性があります。それでも良いよ!という方はお使いください。

「後で見る・キューに追加」が出なくなる

「Stylebot」をインストール

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

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

3.英語のページに飛ばされますが、閉じて大丈夫です。

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

CSSコードを入力

Stylebotを開き、①「Stylebotを開く」②「コード」を押して、③空白のページに下のCSSコードを入力します。

                             コピーボタン↓ 

/*【サムネイル右上】後で見る・キューに追加*/
ytd-thumbnail-overlay-toggle-button-renderer.style-scope.ytd-thumbnail {
  display: none;
}
ビフォー
アフター

サムネイル右上にマウスカーソルを置いても「後で見る・キューに追加」が出なくなれば完了。

CSSコードを無効化

  • StylebotのON・OFFスイッチを使う
  • 入力したコードを一部(または全て)消す

解説します↓

StylebotのON・OFFスイッチ

入力したコードを無効化

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

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

ビフォー
アフター

紹介したコードに「display: none;」という英語が入っています。語尾の「e」だけ消して「display: non;」にすると無効になります。終わり。