【Stylebot】YouTubeの余計な要素を非表示にするCSS
本記事のCSSを利用することでYouTube上の以下の項目を非表示にできます。
- サイドバーのおすすめ動画・関連動画
- メイン動画
- タイトル
- チャンネル名（概要欄）
- コメント欄
自分が非表示にしたい項目だけ適用できます。例えば「動画の映像を消してコメント欄だけ見る。音だけ楽しむ。」といったように個別に調整できます。
マウスを乗せたときは普通に表示するので見たくなった時はいつでも見れます。マウスオーバーするだけです。ワンクリックでオンオフできます。
本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホやタブレットのアプリ版ではできません。
本記事はCSSを使います。もし「CSSは少し難しい！」という場合は他の方が公開している拡張機能がおすすめです。CSSと比べると自由度が低いですがサクッと利用できます。
| 拡張機能名 | 何ができる？ |
|---|---|
| Youtube Audio（Firefoxアドオン） | YouTubeの動画を非表示にして音だけにする |
| Music Mode for Youtube（Chrome拡張機能） | |
| Hide Youtube Viewers and Ratings（Chrome拡張機能） | 再生回数・同時接続数、評価、登録者数、コメント欄などを非表示にする |
| Remove YouTube End Cards & End Screen Videos | YouTube動画の最後に表示される終了画面を非表示にする |
インストール方法
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/YouTubeのいたるところをマウスホバーで表示するCSS
マウスホバーではなく完全に非表示にしたい場合はこちらを参考にしてみてください。
YouTubeの動画再生ページだけで動作するスタイルシートを作成する
インストールした「Stylebot」拡張機能アイコンを右クリック→「オプション」をクリックします。
通常、サイト（ドメイン）単位でCSSを適用させたい場合は左クリック→「Stylebotを開く」を押すことでCSSを書く画面を開けます。
今回はYouTubeのトップページではなくYouTubeの動画再生画面上だけに適用するので、オプションから専用のスタイルシートを作成します。
トップページ含むYouTube上で動作するようにしてもいいんですが、何となく動画ページ上だけに絞ってみたいと思います。
左側にある「スタイル」→「新しいスタイルを追加」をクリックします。
2つのテキストボックスが表示されます。1つ目のテキストボックスにCSSを適用させたいURL、2つ目のテキストボックスにCSSを書き込んでいきます。
今回はYouTubeの動画プレーヤーページ上だけで動くようにしたいので、URLは「**www.youtube.com/watch?**」になります。
**www.youtube.com/watch?**CSSを書き込む
2つ目のテキストボックスにCSSを書き込みます。全てのコードをコピペする必要はありません。自身がマウスホバーで表示を切り替えたい項目だけ書き込みます。
/*サイドバー*/
#secondary:not(:hover) {
opacity: 0;
}
/*メイン動画*/
.video-stream.html5-main-video:not(:hover) {
opacity: 0;
}
/*動画のタイトル*/
h1.ytd-watch-metadata:not(:hover) {
opacity: 0;
}
/*チャンネル名*/
#owner:not(:hover) {
opacity: 0;
}
/*高評価・保存などの動画下ボタン*/
#actions:not(:hover) {
opacity: 0;
}
/*コメント欄*/
ytd-comments#comments:not(:hover) {
opacity: 0;
}本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
例えば、コメント欄とメイン動画を消したい場合下記画像のようになります。書き込めたら右下の「保存する」をクリックします。
CSSが適用されたか確認する
「YouTube」にアクセスして適当に動画を開きます。
拡張機能ボタンを押して登録したサイト（例：**www.youtube.com/watch?**）がオンになっていることを確認します。オンになっている間は有効になっているということです。
コメント欄と動画が非表示になります。
マウスオーバーでゆっくり表示します。実際に使ってみた動画を貼っておきます。
ライトモードを利用している方でも同じコードで反映されます。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「**www.youtube.com/watch?**」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
【追記】Firefoxで表示されるサムネイル削除
Firefoxベースのブラウザの場合、動画をクリックするとすぐには再生されず、動画のサムネイルが表示されます。クリックで再生が開始されます。Google ChromeやVivaldiだとすぐに再生されます。
このサムネイルを非表示にするコードも追記しておきます。使いたい方はスタイルシートに追加で書き込みます。
/*メイン動画のサムネイル*/
.ytp-cued-thumbnail-overlay-image {
opacity: 0;
}サムネイルが真っ黒になって表示されなくなります。
マウスオーバーで表示させたい場合は上記コードではなく以下のコードになります。
/*メイン動画のサムネイル*/
.ytp-cued-thumbnail-overlay-image:not(:hover) {
opacity: 0;
}マウスホバーではなく、完全非表示にしたい場合
「マウスを乗せても表示したくない！」という場合以下のCSSを利用します。ホバー時の挙動を全部削除しているので、マウスを乗せても表示されなくなります。
/*サイドバー*/
#secondary {
display: none !important;
}
/*メイン動画*/
.video-stream.html5-main-video {
opacity: 0 !important;
}
/*動画のタイトル*/
h1.ytd-watch-metadata {
display: none !important;
}
/*チャンネル名*/
#owner {
display: none !important;
}
/*高評価・保存などの動画下ボタン*/
#actions {
display: none !important;
}
/*コメント欄*/
ytd-comments#comments {
display: none !important;
}まとめ
以上、PCウェブサイト版「YouTube」の余計な要素を非表示にしてマウスオーバーで表示するCSSについてでした。
サイドバーにおすすめ動画や関連動画が表示されていると延々と見ちゃって時間を食っちゃいます。集中したい時は思い切って全部非表示（透明）にすると案外はかどるかもしれません。