【YouTube】共有、THANKS、クリップ、保存などを削除する方法

2022年4月22日YouTube

YouTubeのアイコン

この記事では、YouTubeの動画下にあるTHANKS、クリップ、オフラインをはじめとした各種ボタンを非表示にするCSSについて書きます。

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

YouTubeの再生ページ下にある各種ボタンを削除するイメージ画像

CSSを使うか、広告ブロッカーを使うことで、YouTubeの動画下にある各種ボタンを非表示にできます。具体的には、以下のボタンです。

  • 高評価
  • 低評価
  • 共有
  • オフライン(ダウンロード)
  • THANKS
  • クリップ
  • 保存
  • ミートボールメニュー(報告、文字起こし)

使っていないボタンは、非表示にしたほうが押し間違えなくなるので便利です。全部ではなく、個別に削除できます。

YouTubeプレミアムに加入していないのに、「オフライン」ボタンを押しちゃって、勧誘ポップアップが表示される…なんてことがたまにーあります。間違えて「THANKS」を押して、寄付画面が表示され、「あわわ…」となった経験もあります。

同じような悩みを抱えている方、ぜひ参考にしてみてください。オンオフも簡単です。ページ上非表示にしているだけなので、誰にも迷惑をかけません。

本記事で紹介する拡張機能「Stylebot」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。広告ブロッカーを使った方法を試したい場合は、こちらを参考にしてみてください。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

YouTubeの動画下にある各種ボタンを削除する手順

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

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

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*「高評価」ボタン非表示*/
ytd-toggle-button-renderer:has(a>#button>button[aria-label*="高く評価しました"]) {
  display: none;
}

/*「低評価」ボタン非表示*/
ytd-toggle-button-renderer:has(a>#button>button[aria-label="この動画を低く評価する"]) {
  display: none;
}

/*「共有」ボタン非表示*/
ytd-button-renderer:has(a>#button>button[aria-label="共有"]) {
  display: none;
}

/*「オフライン」ボタン非表示*/
ytd-button-renderer:has(a>#button>button[aria-label="オフライン"]) {
  display: none;
}

/*「THANKS」ボタン非表示*/
ytd-button-renderer:has(a>#button>button[aria-label="Thanks"]) {
  display: none;
}

/*「クリップ」ボタン非表示*/
ytd-button-renderer:has(a>#button>button[aria-label="クリップ"]) {
  display: none;
}

/*「保存」ボタン非表示*/
ytd-button-renderer:has(a>#button>button[aria-label="再生リストに保存"]) {
  display: none;
}

/*「報告」ボタン非表示*/
ytd-menu-service-item-renderer[role="menuitem"]:has([d^="M13.18,4l0.24,1.2L13.58"]) {
  display: none;
}

/*「文字起こしを表示」ボタン非表示*/
ytd-menu-service-item-renderer[role="menuitem"]:has([d^="M5,11h2v2H5V11z M15,15H5v2h10V15z"]) {
  display: none;
}

全部を適用する必要はありません。自分が消したい項目だけを使ってみましょう。上記コードだと、高評価と低評価ボタンも、全部消してしまいます。

例えば、「THANKS」と「クリップ」ボタンを消したい場合は、以下のコードだけ書き込みます。

/*「THANKS」ボタン非表示*/
ytd-button-renderer:has(a>#button>button[aria-label="Thanks"]) {
  display: none;
}

/*「クリップ」ボタン非表示*/
ytd-button-renderer:has(a>#button>button[aria-label="クリップ"]) {
  display: none;
}

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

2022年10月後半あたり、YouTubeのUIが、ちょこちょこ変わっています。

そのせいで、上記CSSだと効かない場合があります。その場合は、下記コードを使ってみてください。どっちのCSSが使えるかは、その人のアカウント次第です。

/*高評価ボタン以外のテキスト削除*/
#menu button:not([aria-label*="評価"]) > .cbox[class*="text"] {
  display: none;
}

/*ボタンの間隔を狭くする*/
#menu button {
  padding: 0 5px;
}

/*各種ボタン(高評価など)の背景色*/
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
  background-color: transparent;
}

/*「低評価」ボタン非表示*/
#segmented-dislike-button {
  display: none;
}

/*「共有」ボタン非表示*/
button[aria-label="共有"] {
  display: none;
}

/*「オフライン」ボタン非表示*/
.ytd-download-button-renderer {
  display: none;
}

/*「THANKS」ボタン非表示*/
button[aria-label="Thanks"] {
  display: none;
}

/*「クリップ」ボタン非表示*/
button[aria-label="クリップ"] {
  display: none;
}

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

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

書き込んだ状態で、動画再生ページにアクセスします。書き込んだ項目のボタンが消えていると思います。

YouTubeの動画下にある余計なボタンを削除した比較画像

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

【余談】高評価と低評価のボタンの色

【おまけ】テキストを削除して、アイコンだけにする方法

各種ボタンのテキストを非表示にするコードも紹介します。見栄えをスッキリさせたい方は、使ってみてください。本記事で紹介した他のCSSと併用できます。

/*高評価ボタン以外のテキスト削除*/
#menu .style-scope.ytd-menu-renderer #text:not(.ytd-toggle-button-renderer) {
  display: none;
}

/*ボタンの間隔を狭くする*/
ytd-toggle-button-renderer,
ytd-button-renderer {
  margin-left: 0;
}

高評価数以外のボタンの文字が消えます。どーせならと思い、左右の余白を詰めて、コンパクトにするCSSも書いています。これで、かなりスタイリッシュになると思います。

高評価以外のテキストを削除して、詰めた画像
新しいYouTubeデザインで、背景色がある場合

2022年9月からYouTubeのデザインが変わりました。

10月時点では、全員変わったというわけではなく、一部のアカウントのみに適用されています。僕もメインのほうは変わっていましたが、サブアカのほうは変わっていませんでした。今後変わると思います。

新しいUIは、ボタンの背景に色がついています。本記事のコンパクトCSSを使う場合、背景色のせいで、ちょっとブサイクになります。それが嫌な場合は、以下の記事を参考にして、背景色を透明にしてみてください。

2022年9月より一新されたYouTubeデザイン画像

Stylebot(CSS)ではなく、広告ブロッカーで削除する方法

広告ブロッカーの拡張機能「uBlock Origin」を使うことでも、削除できます。ただし、広告ブロッカーは、YouTubeだけでなく、ウェブサイト全体に影響を及ぼします。既に、導入している方向けかなと思います。

CSSと併用しても意味がないので、使う場合は、どちらかだけにしましょう。

YouTubeにアクセスして、インストールしたuBlock Originアイコンをクリックします。有効になっているか確認します。電源マークが青色だったら、有効になっています。

uBlock Originを使って、YouTubeの不要なボタンを削除する手順画像1

ポップアップ内右下の歯車アイコンをクリックします。

uBlock Originを使って、YouTubeの不要なボタンを削除する手順画像2

上部にある「マイフィルター」タブをクリックします。コードを書き込める画面が表示されるので、非表示にしたい項目のコードを書き込みます。

! 「高評価」ボタン非表示
www.youtube.com##ytd-toggle-button-renderer:has(a>#button>button[aria-label*="高く評価しました"])

! 「低評価」ボタン非表示
www.youtube.com##ytd-toggle-button-renderer:has(a>#button>button[aria-label="この動画を低く評価する"])

! 「共有」ボタン非表示
www.youtube.com##ytd-button-renderer:has(a>#button>button[aria-label="共有"])

! 「オフライン」ボタン非表示
www.youtube.com##ytd-button-renderer:has(a>#button>button[aria-label="オフライン"])

! 「THANKS」ボタン非表示
www.youtube.com##ytd-button-renderer:has(a>#button>button[aria-label="Thanks"])

! 「クリップ」ボタン非表示
www.youtube.com##ytd-button-renderer:has(a>#button>button[aria-label="クリップ"])

! 「保存」ボタン非表示
www.youtube.com##ytd-button-renderer:has(a>#button>button[aria-label="再生リストに保存"])

! 「報告」ボタン非表示
www.youtube.com##ytd-menu-service-item-renderer[role="menuitem"]:has([d^="M13.18,4l0.24,1.2L13.58"])

! 「文字起こしを表示」ボタン非表示
www.youtube.com##ytd-menu-service-item-renderer[role="menuitem"]:has([d^="M5,11h2v2H5V11z M15,15H5v2h10V15z"])

書き込めたら、上部の「変更を適用」をクリックします。YouTubeのページを一度リロード(更新)します。これで、反映されると思います。

uBlock Originを使って、YouTubeの不要なボタンを削除する手順画像2

高評価以外のボタンテキストを削除したい場合は、以下のコードを追加で書き込みます。

! 高評価ボタン以外のテキスト削除
www.youtube.com###menu .style-scope.ytd-menu-renderer #text:not(.ytd-toggle-button-renderer)

感想

以上、YouTubeの動画下に表示される「高評価」、「低評価」、「共有」、「オフライン」、「THANKS」、「クリップ」、「保存」ボタンを削除する方法でした。

余談ですが、YouTubeの特定のチャンネル・ワードをブロックできる「Youtubeフィルタ」が、最近の僕の中でのお気に入りです。

2022年4月22日YouTube