徹底的に排除して、快適に視聴する為あれこれやっているよ、というだけの
記事です。ほぼ備忘録。
近年のYouTubeは改悪に次ぐ改悪でどんどん使いづらくなっているので、
この辺をどうにかしないとまともに視聴する事すら困難になっていますよね。
自分はPCの使用時間のほぼ8割くらいはYouTubeに居るので、使いづらく
されると観る気が失せるのです。
なので、自分がYouTubeを快適に利用する為に使っているブラウザ拡張や、
StyleBot等のCSSをご紹介。
尚、YouTubeはかなり頻繁にコロコロと仕様を変え(仕事をした気になって)
るので、気付いたらここも修正して行く予定～。
■ブラウザ拡張
入れているChrome用のブラウザ拡張は以下の通り(但し普段使用している
ブラウザは Brave です)。
BlockTube
ある程度は純正機能「チャンネルをおすすめに表示しない」で対応出来ます
が、これってしばらくするとまた出て来たりするんですよね。
不快なチャンネルはBlockTubeに登録してしまえば、解除するまでは二度と
出て来ません。
動画タイトル・チャンネル名・動画ID・チャンネルID・コメントまで対応
しています。但し作者のやる気がないのか更新は遅めなので、YouTube側の
仕様変更で効かなくなる事が多いのが難点。
h264ify
60fpsの動画を強制的に30fpsにしてくれます。以前から個人的に、動画って
60fpsで観る必要あります？30fpsで十分じゃね？と思うのであります。但し
最近YouTubeは再エンコ時に1080p 30fpsの動画を生成しないようなので、
そのような動画はこの拡張を入れていると最高が720p 30fpsになります。
ShortsBlocker - Remove Shorts from YouTube
PCで視聴する上で、スマホの縦動画は正直観るに堪えません。t*kt*kに対抗
したのでしょうが、Shortsは観たくないので全てブロックしています。
Youtube Playback Speed Control
音楽やよほど興味のあるもの以外は、大抵2倍速で視聴しています。しかし
いちいち右下の設定から再生速度を変えるのは面倒。この拡張を入れると、
右上に速度を変更する小さなボタンがホバーするので、ここから再生速度を
素早く変更できます。
YouTube Row Fixer
最近のYouTubeは何だか知らないけどやったらサムネイルをデカくする傾向
にありますね。フルHDで横3つとか。情報量が減ってスクロールが増えると
いう点に考えが行かないんでしょうか。
この拡張を入れると、一行のサムネイル数を自由に変更できます。6個位が
一番見やすいかな。
YouTube Unrounded Thumbnails
上のサムネイルくそデカ問題と同様、なぜかサムネイルやプレーヤのカドを
丸くしたがるんですよね。スマﾋｮ向けUIなら分からなくもないんですが、
PCでカドを丸くする意味が全く分からない。
この拡張を入れると、丸くなったカドを従来の四角に戻す事が出来ます。
toMono
再生中の動画の音声を、強制的にモノラルにします。YouTubeって意外と
音声が左右どちらかに片寄っている動画が多いんですよね～。特に人の声が
片寄っていたり、人の移動に合わせて声も左に右に移動するような動画は、
視聴していてイライラします。人の声をステレオで撮る意味が分からない。
対談系の動画で右の人は右chから、左の人は左chから、みたいなのは最悪。
■CSS・JS
StyleBot
上記拡張だけではどうにも出来ない不満点を解消してくれるのがStyleBot。
CSSを登録する事で、Webページを好きなように改変できます。YouTube用に
自分が登録しているCSSは以下の通り。
/*【角丸廃止】サムネイル*/
yt-thumbnail-view-model {
border-radius: 0 !important;
}
/*【角丸廃止】終了画面*/
.ytp-ce-video.ytp-ce-large-round, .ytp-ce-playlist.ytp-ce-large-round, .ytp-ce-large-round .ytp-ce-expanding-overlay-background {
border-radius: 0 !important;
}
/*【角丸廃止】再生リストや検索ボックス*/
div#container, button[aria-label="検索"] {
border-radius: 0 !important;
}
/*【角丸廃止】動画後に一覧で表示されるおすすめ動画*/
div[style^="background-image: url"] {
border-radius: 0 !important;
}
/*【角丸廃止】動画プレーヤー*/
ytd-player#ytd-player {
border-radius: 0 !important;
}
/*【検索結果】動画のサムネイル画像を小さくする*/
.ytd-search #primary #contents :is(ytd-thumbnail,.yt-lockup-view-model-wiz__content-image,#avatar-section) {
max-width: 200px !important;
min-width: unset !important;
}
/*左メニューの「ショート」削除*/
ytd-guide-entry-renderer:has(a#endpoint[title="ショート"]) {
display: none !important;
}
/*検索結果とトップページの「ミックスリスト」を非表示にする（2024年11月14日修正）*/
[page-subtype="home"] yt-lockup-view-model.lockup:has(path[d^="M9 6a3 3 0 00-."]) {
display: none !important;
}
/*ヘッダーのジャンルバーを非表示*/
div#header:has([component-style$="BAR_STYLE_TYPE_DEFAULT"]:not([component-style$="CHANNEL_PAGE_GRID"]) #chips-wrapper) {
display: none !important;
}
/*チャンネルページの「メンバー優先・限定」非表示（2025年03月26日作成）*/
#contents ytd-rich-item-renderer.ytd-rich-grid-renderer:has([aria-label^="メンバー"]) {
display: none !important;
}
/* YouTubeのおすすめ欄でメンバー限定動画を非表示にする */
yt-lockup-view-model:has(yt-content-metadata-view-model .yt-badge-shape--commerce) {
display: none !important;
}
/*検索結果のプレイリストのサムネイル縮小*/
#contents ytd-item-section-renderer .yt-lockup-view-model--horizontal { display: flex !important; align-items: flex-start !important; gap: 12px !important; }
/*検索結果の中でプレイリストのサムネイルのサイズを変更するCSS*/
#contents ytd-item-section-renderer .yt-lockup-view-model--collection-stack-2 [class*="Stack"], #contents ytd-item-section-renderer .yt-lockup-view-model--collection-stack-2 a.yt-lockup-view-model__content-image, #contents ytd-item-section-renderer .yt-lockup-view-model--collection-stack-2 yt-thumbnail-view-model { width: 200px !important; height: 112px !important; }
#contents ytd-item-section-renderer .yt-lockup-view-model--collection-stack-2 a.yt-lockup-view-model__content-image { flex-shrink: 0 !important; display: block !important; }
#contents ytd-item-section-renderer .yt-lockup-view-model--collection-stack-2 [class*="Stack"] { background-size: cover !important; }
#contents ytd-item-section-renderer .yt-lockup-view-model--collection-stack-2 yt-thumbnail-view-model img { width: 200px !important; height: 112px !important; object-fit: cover !important; }
#contents ytd-item-section-renderer .yt-lockup-view-model--collection-stack-2 .yt-lockup-view-model__metadata { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
/* ホバー時のタッチフィードバック背景を透明に（主な原因を防ぐ） */
ytd-rich-item-renderer:hover .yt-spec-touch-feedback-shape__hover-effect {
background: transparent !important;
opacity: 0 !important;
}
これだけ大量のCSSを導入しないと、まともに観られないYouTubeって…。
拡張と機能が重複しているものもありますが、拡張が効かなくなった場合の
保険って事で。
不満な部分をGrokさんに尋ねると、たちどころにCSSを作ってくれるので、
大変重宝しています。
No YouTube Volume Normalization
これはTampermonkey用のスクリプトです。YouTubeは動画の音量を勝手に
下げる「ラウドネスノーマライゼーション」という余計な機能が働いていて、
これが音楽の視聴時などに結構邪魔するんですよね。それを無効化する為の
スクリプトです。
※現状、残念ながらこのスクリプトは動作していません。
これだけではなく更に、uBlock Origin (uBO) を使って多数の不要な要素を
非表示にしています。
! YouTube終了画面削除
youtube.com##.ytp-ce-element
youtube.com#li(trending-guide-item)
||youtube.com/youtubei/v1/log_event?alt=json&key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8
youtube.com##.yt-uix-expander.live-chat-expander
!YouTubeプレーヤ $25B6|ボタン削除
www.youtube.com##.ytp-button.ytp-next-button
!検索欄から 他の人はこちらも視聴しています、あなたへのおすすめ、前に再生した動画 を削除
youtube.com##.style-scope ytd-search .style-scope.ytd-shelf-renderer,ytd-horizontal-card-list-renderer
! 2023-01-03 メンバーシップバナー
www.youtube.com##.ytd-item-section-renderer.style-scope > .ytd-recognition-shelf-renderer.style-scope
! feed/subscriptions
www.youtube.com###unlimited-guide-item > .spf-link.yt-valign.yt-uix-sessionlink.guide-item
! feed/subscriptions
www.youtube.com###trending-guide-item > .spf-link.yt-valign.yt-uix-sessionlink.guide-item
www.youtube.com##.spf-nolink.yt-valign.yt-uix-sessionlink.guide-item
! アノテーション非表示
||www.youtube.com/annotations_invideo?
www.youtube.com##.alerts-wrapper
www.youtube.com##ytd-rich-section-renderer
www.youtube.com###chat
www.youtube.com###contents > .ytd-secondary-search-container-renderer.style-scope
www.youtube.com###playlist
youtube.com##+js(json-prune, playerResponse.adPlacements playerResponse.playerAds adPlacements playerAds)
www.youtube.com###offer-module-container
youtube.com##ytd-thumbnail-overlay-endorsement-renderer
www.youtube.com##.ytp-button.ytp-miniplayer-button
www.youtube.com###clarify-box > .ytd-watch-flexy.style-scope
www.youtube.com###offer-module > .ytd-watch-next-secondary-results-renderer.style-scope
www.youtube.com##ytd-horizontal-card-list-renderer.ytd-item-section-renderer.style-scope
www.youtube.com###collapsible
www.youtube.com##.ytp-autonav-toggle-button-container
www.youtube.com##.ytp-right-controls > button.ytp-button:nth-of-type(1)
www.youtube.com###voice-search-button > .size-default.style-default.ytd-masthead.style-scope
www.youtube.com##.ytp-paid-content-overlay
studio.youtube.com##.opened.ytcp-top-banner.style-scope > .ytcp-banner.style-scope.container
studio.youtube.com##.opened.ytcp-top-banner.style-scope
www.youtube.com##ytd-guide-section-renderer.ytd-guide-renderer.style-scope:nth-of-type(3)
www.youtube.com###voice-search-button
www.youtube.com##.ytd-rich-metadata-renderer.style-scope.yt-simple-endpoint
www.youtube.com###sponsor-button
www.youtube.com##ytd-reel-shelf-renderer.ytd-item-section-renderer.style-scope
www.youtube.com###comment-teaser
www.youtube.com##.watch
www.youtube.com##ytd-guide-section-renderer.ytd-guide-renderer.style-scope:nth-of-type(4)
fonts.googleapis.com
!fonts.gstatic.com
@@fonts.gstatic.com/*$domain=translate.google.co.jp
@@fonts.gstatic.com/*$domain=mail.google.com
www.youtube.com##.ytp-tooltip-edu
youtube.com##div.style-scope yt-chip-cloud-renderer
www.youtube.com##.sparkles-light-cta.ytd-in-feed-ad-layout-renderer.style-scope
www.youtube.com##.ytd-toggle-button-renderer.style-scope.yt-simple-endpoint > .style-compact-gray.ytd-toggle-button-renderer.style-scope
! 2025/05/02 ホーム検索欄のハチマキ
www.youtube.com##div[id="frosted-glass"]
! 2025/05/14 アンケート吹き出し
www.youtube.com###attached-survey
! 2025/06/06 再生が中断されていますか？ボタン消去
www.youtube.com##.paper-toast-open.yt-notification-action-renderer.style-scope.toast-button
! 2025/06/19 ショート区切り
www.youtube.com##.ytSectionHeaderViewModelHost
www.youtube.com##grid-shelf-view-model.ytd-item-section-renderer.ytGridShelfViewModelHost:nth-of-type(1)
google.com##.hdzaWe
google.com##div[jsname][data-rl]
google.com##.YzCcne
google.com##h1[style*="clip:rect(1px,1px,1px,1px)"]
google.com##.in7vHe[role="button"]
www.youtube.com##ytd-guide-section-renderer.ytd-guide-renderer.style-scope:nth-of-type(5)
※古くなったフィルタもそのまま残しているので、既に使えなくなっている
要素が多いです、多分。探して消すの面倒なんで…。
uBOは今のChromeでは使えません。そのため自分はChromeを捨ててuBOが
インストール可能なBraveに移行しました。BraveもMV3に移行してuBOが
使えなくなったら、Firefoxに戻ります。
以上が、通常YouTubeを視聴する上で利用している拡張・CSSの類ですね～。
いかにYouTubeが使いづらいかが分かります。余計なものが多いんですよ。
機能を実装する分には構わないんですが、それならせめてON/OFFする設定を
付けてほしい。「ほら、こういう機能作ってやったぞ。ありがたいだろ～？
よし使え」はホント勘弁して下さいよ。
YouTubeはもっとユーザに寄り添ったUIを心がけるように。
