【YouTube】共有、THANKS、クリップ、保存などを削除する方法
この記事では、YouTubeの動画下にあるTHANKS、クリップ、オフラインをはじめとした各種ボタンを非表示にするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
CSSを使うか、広告ブロッカーを使うことで、YouTubeの動画下にある各種ボタンを非表示にできます。具体的には、以下のボタンです。
- 高評価
- 低評価
- 共有
- オフライン（ダウンロード）
- THANKS
- クリップ
- 保存
- ミートボールメニュー（報告、文字起こし）
使っていないボタンは、非表示にしたほうが押し間違えなくなるので便利です。全部ではなく、個別に削除できます。
YouTubeプレミアムに加入していないのに、「オフライン」ボタンを押しちゃって、勧誘ポップアップが表示される…なんてことがたまにーあります。間違えて「THANKS」を押して、寄付画面が表示され、「あわわ…」となった経験もあります。
同じような悩みを抱えている方、ぜひ参考にしてみてください。オンオフも簡単です。ページ上非表示にしているだけなので、誰にも迷惑をかけません。
本記事で紹介する拡張機能「Stylebot」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。広告ブロッカーを使った方法を試したい場合は、こちらを参考にしてみてください。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/YouTubeの動画下にある各種ボタンを削除する手順
「YouTube」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*「高評価」ボタン非表示*/
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→「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も書いています。これで、かなりスタイリッシュになると思います。
2022年9月からYouTubeのデザインが変わりました。
10月時点では、全員変わったというわけではなく、一部のアカウントのみに適用されています。僕もメインのほうは変わっていましたが、サブアカのほうは変わっていませんでした。今後変わると思います。
新しいUIは、ボタンの背景に色がついています。本記事のコンパクトCSSを使う場合、背景色のせいで、ちょっとブサイクになります。それが嫌な場合は、以下の記事を参考にして、背景色を透明にしてみてください。
Stylebot（CSS）ではなく、広告ブロッカーで削除する方法
広告ブロッカーの拡張機能「uBlock Origin」を使うことでも、削除できます。ただし、広告ブロッカーは、YouTubeだけでなく、ウェブサイト全体に影響を及ぼします。既に、導入している方向けかなと思います。
CSSと併用しても意味がないので、使う場合は、どちらかだけにしましょう。
YouTubeにアクセスして、インストールしたuBlock Originアイコンをクリックします。有効になっているか確認します。電源マークが青色だったら、有効になっています。
ポップアップ内右下の歯車アイコンをクリックします。
上部にある「マイフィルター」タブをクリックします。コードを書き込める画面が表示されるので、非表示にしたい項目のコードを書き込みます。
! 「高評価」ボタン非表示
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のページを一度リロード（更新）します。これで、反映されると思います。
高評価以外のボタンテキストを削除したい場合は、以下のコードを追加で書き込みます。
! 高評価ボタン以外のテキスト削除
www.youtube.com###menu .style-scope.ytd-menu-renderer #text:not(.ytd-toggle-button-renderer)感想
以上、YouTubeの動画下に表示される「高評価」、「低評価」、「共有」、「オフライン」、「THANKS」、「クリップ」、「保存」ボタンを削除する方法でした。
余談ですが、YouTubeの特定のチャンネル・ワードをブロックできる「Youtubeフィルタ」が、最近の僕の中でのお気に入りです。
