【YouTube】動画下のTHANKSボタン、クリップボタンなどを消す方法

2022年4月22日Stylebot&Stylus

Stylebotのアイコン

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

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

【YouTube】動画下のTHANKSボタン、クリップボタンなどを消す方法

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

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

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

間違って、「オフライン(ダウンロード)」や「THANKS」ボタンを押してしまって、ストレス溜まる方、ぜひ試してみてください。オンオフも簡単です。CSSでページ上非表示にしているだけなので、誰にも迷惑をかけません。非表示にすることで、間違えて押す心配がなくなります。

ただし、本記事で紹介するCSSは、少し注意点もあります。使いたい方は、記事を最後まで見てくださればなと思います。先に注意点を知りたい方は、こちらに飛んでください。

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

2022年5月6日追記

コメント欄で教えていただきました。広告ブロッカーの拡張機能「uBlock Origin」を使っている場合、確実に消すことが可能です。

本記事で紹介するCSSで消す方法だと、動画の内容によっては確実に消すことができないので、uBlock Originを使っている場合はこちらの方がいいかもしれません。

ブラウザ右上のuBlock Originアイコンをクリック→歯車アイコンをクリックします。

uBlock Originのポップアップ画面

マイフィルターをクリックします。コードを書き込める画面が表示されるので、非表示にしたいボタンのコードを書き込みます。

uBlock Origin マイフィルターにコードを書き込む
! 高評価/低評価
www.youtube.com###top-level-buttons-computed ytd-toggle-button-renderer
! 共有
www.youtube.com##.force-icon-button:has-text(共有)
! オフライン
www.youtube.com##.ytd-download-button-renderer
! THANKS
www.youtube.com##.force-icon-button:has-text(Thanks)
! クリップ
www.youtube.com##.force-icon-button:has-text(クリップ)
! 保存
www.youtube.com##.force-icon-button:has-text(保存)
! 報告、文字起こしを表示
www.youtube.com##.ytd-video-primary-info-renderer > .dropdown-trigger

これでピンポイントで特定のボタンを非表示にできます。CSSでは「has-text」使えないので、(使えませんよね…?)uBlock Originすごいなぁと思いました。

参考:https://twitter.com/YagumigeNeGo/status/1521749353542852608

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefox・Edgeをご利用の場合

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

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。

CSS

YouTubeにアクセスします。Stylebotを使っている人は、右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

拡張機能ボタン Stylebotを開く

Firefoxで、Stylusを使っている方は、右上の拡張機能アイコン→「次のスタイルを書く」の「www.youtube.com」をクリックします。新しいタブでスタイルシートが表示されるので、書き込んでいきます。書き込めたら、忘れずに「保存」をクリックします。

書き込むコードは、以下になっています。Stylebot、Stylusどちらも一緒です。全てを使うのではなく、自分が非表示にしたい項目だけを選択してください。

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

/*動画下の「ミートボールメニュー(報告、文字起こし)」ボタン非表示*/
button[aria-label="その他の操作"] {
  display: none !important;
}

/*動画下の「共有」ボタン非表示*/
#top-level-buttons-computed ytd-button-renderer.style-scope.ytd-menu-renderer:nth-of-type(1) {
  display: none !important;
}

/*動画下の「THANKS」(またはクリップ)ボタン非表示*/
#top-level-buttons-computed ytd-button-renderer.style-scope.ytd-menu-renderer:nth-of-type(2) {
  display: none !important;
}

/*動画下の「クリップ」(または保存)ボタン非表示*/
#top-level-buttons-computed ytd-button-renderer.style-scope.ytd-menu-renderer:nth-of-type(3) {
  display: none !important;
}

/*動画下の「保存」ボタン非表示*/
#top-level-buttons-computed ytd-button-renderer.style-scope.ytd-menu-renderer:nth-of-type(4) {
  display: none !important;
}

例えば、タイトルにある通り、「THANKS」と「クリップ」ボタンを消したい場合は、以下のコードだけでOKです。

/*動画下の「THANKS」(またはクリップ)ボタン非表示*/
#top-level-buttons-computed ytd-button-renderer.style-scope.ytd-menu-renderer:nth-of-type(2) {
  display: none !important;
}

/*動画下の「クリップ」(または保存)ボタン非表示*/
#top-level-buttons-computed ytd-button-renderer.style-scope.ytd-menu-renderer:nth-of-type(3) {
  display: none !important;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotに「YouTubeの各種ボタンを消すコード」を書き込んだ画面

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

Stylebot 「www.youtube.com」のオフ

書き込んだ状態で、適当に動画を再生します。試しに、芸人ジェラードンの公式チャンネルにあるこちらの動画で試してみます。

導入前は、THANKSとクリップボタンがありましたが、導入後は非表示になっています。元々なかったかのように、スペースも詰められます。クリックもできません。

YouTubeの動画下にある「THANKS」と「クリップ」ボタンを非表示にした比較画像

全てのCSSを適用した場合は、以下のようになります。評価ボタンだけ表示されて、スッキリします。完全に他のボタンを使っていない場合におすすめです。

高評価、低評価ボタンのみを表示させた画像

評価ボタンを非表示にするCSS

いいね、バッドボタンを非表示にするCSSです。上記で紹介した各種ボタンを非表示にするCSSと併用できます。

/*動画下の評価ボタン(高評価、低評価)の非表示*/
#top-level-buttons-computed ytd-toggle-button-renderer {
  display: none !important;
}

合わせて使うと、動画下の全てのボタンが消えることになります。「動画が見れればそれでいい」という方におすすめです。

動画下の各種ボタン全てを非表示にした画像

「いやいや、数だけ非表示にしてほしい。自分で高評価、低評価はこれまで通り押したい」という方は、代わりに以下のCSSを使ってみてください。

/*評価ボタンの数だけ非表示*/
#top-level-buttons-computed .ytd-toggle-button-renderer #text {
  display: none !important;
}

高評価数だけ非表示になり、ボタンは消えません。クリックで投票することは可能です。

評価ボタンの数だけ非表示にした画像

本記事で紹介したCSSの注意点

本記事で紹介したコードには、1つだけデメリットがあります。元々「THANKS」ボタンがない動画だと、代わりに「クリップ」ボタンが非表示になってしまうという点です。

チャンネルによっては、「THANKS」機能を解放していない場合があります。その場合、非表示にするCSSが1つずつずれてしまい、「THANKS」→「クリップ」、「クリップ」→「保存」と消す対象が変わってしまいます。

試しに、元々「THANKS」が表示されないジャルジャル(芸人)のこちらの動画で試してみます。「THANKS」と「クリップ」を消すCSSを書いている場合、1つずつずれて、「クリップ」と「保存」ボタンが消えます。

本記事のCSSのデメリット 場合によっては、非表示にするボタンがずれる

「保存」ボタンを使っていない方は、「THANKS(またはクリップ)」と「クリップ(または保存)」を消すコードを適用していいのかなと思います。

「いや、保存ボタンは使いたい」という方は、「THANKS(またはクリップ」のみのコードを使うようにしましょう。

/*動画下の「THANKS」(またはクリップ)ボタン非表示*/
#top-level-buttons-computed ytd-button-renderer.style-scope.ytd-menu-renderer:nth-of-type(2) {
  display: none !important;
}

こうすると、基本は「THANKS」を非表示にして、「THANKS」がない動画だと「クリップ」を非表示にします。保存ボタンは、どちらの場合でも消えないので安心です。

なぜ、このようなことが起こるのかというと、単純に僕の技術不足です。CSSで対象を消す時、「〇〇と書かれた部分を消してね~」って感じで指示するのですが、YouTubeの動画下のボタンには、具体的な名称が存在していませんでした。

本来なら、「ボタンA」、「ボタンB」といった感じで、別々の名称が存在しているはずですが、YouTubeの場合、全てのボタンが「ボタン」という名称になっていて、ピンポイントで指定できないようになっていました。どうにかできそうな気もするんですが、いかんせん現時点の僕の実力だとここまでのようです。

感想

以上、YouTubeの動画下に表示される各種ボタンを非表示にするCSSについてでした。

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

/*各種ボタンのテキスト非表示*/
#top-level-buttons-computed ytd-button-renderer a #text, /*共有、クリップ、保存*/
#top-level-buttons-computed ytd-download-button-renderer a #text, /*オフライン*/
#top-level-buttons-computed ytd-toggle-button-renderer a #text{ /*高評価、低評価*/
  display: none !important;
}
各種ボタンをアイコンのみ表示にした画像
本記事を書くにあたって

本記事は、以下の記事のコメント欄にて要望をいただいたので書いています。要望、感謝です。YouTubeの左側サイドバーの「ショート」を消したい方は、以下の記事を参考にしてみてください。

Posted by ナポリタン寿司