【YouTube】検索結果のサムネイル画像が大きいので小さくするCSS
2024年3月頃からPCウェブサイト版「YouTube」の検索結果に表示される動画サムネイルが大きくなりました。大きくなったことで1ページに表示される動画数が減りました。
ガチ不便です。なんでこんな仕様変更したのか全く理解できません。
当時はYouTubeあるあるのA/Bテストで、メイン垢のみサイズがでっかくなっていて、サブ垢のほうはまだサイズが変わっていなかったので、変わってしまう前のサイズを参考にして元のサイズに戻してみます。
CSSを利用します。自身の環境上だけで他人の見た目や適用していないブラウザには影響されません。いつでもオンオフできます。本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホやタブレットのアプリ版ではできません。
調べてみると「uBlock Origin」や「Tampermonkey（JavaScriptを適用できる拡張機能）」を使ったユーザースクリプトなど色々選択肢はありました。参考リンクを貼っておきます。
- YouTube – Gigantic Search Result Thumbnails Fix
- Has YouTube increased the size of thumbnails after a search? : r/youtube
前提
「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。
https://www.naporitansushi.com/stylebot/検索結果の大きくなったサムネイルを小さくするCSS
スタイルシートを開く
「YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。
もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
以下のコードを書き込みます。
/*【検索結果】動画のサムネイル画像を小さくする（2024年12月4日修正）*/
.ytd-search #primary #contents :is(ytd-thumbnail,.yt-lockup-view-model-wiz__content-image,#avatar-section) {
max-width: 360px !important;
min-width: unset !important;
}上記CSSの「ytd-thumbnail」が通常動画のサムネイル、「.yt-lockup-view-model-wiz__content-image」がプレイリスト（再生リスト）、「#avatar-section」がチャンネル画像を指しています。それらのサムネイルを「max-width」で任意の数値に変更します。
サブ垢で見たとき通常サイズが「360px」になっていたのでそのまま「360px」にしています。もっと小さくしたい場合は数値を小さくします。
「:is」を使っています。もしかしたらお使いのブラウザによっては動作しないかもしれません。その場合「ChatGPT」とかにCSSを貼り付けて「このCSSの:isのグループ化を解除して一つずつ表示して」みたいな感じで聞くと分解してくれます。
あくまで「:is」非対応のブラウザでの話で、「YouTube」自体が仕様変更した場合「:is」を使おうが使うまいが動作しないので注意です。
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
元のサイズになったか確認
「YouTube」上で適当に検索します。試しに「ナポリタン寿司の自然日記」と検索してみます。サムネイルが小さく表示されます。小さくなるというか、大きくなる前のサイズに戻ったって感じです。
「max-width」の数値を小さくするとそれだけ小さくなります。例えば「max-width: 300px !important;」みたいな感じです。
本記事を最初に書いた時は最小制限（min-width）があったので、特定の値以下にしてもそれ以上は小さくならなかったんですが、2024年12月にCSSを修正した際、最小制限を撤廃する「min-width: unset !important;」コードも追記したので、どこまでも小さくできると思います。
一時的に無効化したい場合は、拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
ホームの一行に表示されるサムネイル数を変更したい場合
僕の環境だと2023年3月上旬から「YouTube」のトップページ、チャンネルページ（動画ページ）の一行に表示されるサムネイル表示数が3列、あるいは4列になってしまいました。
有志の方が公開している拡張機能「YouTube Row Fixer」を使うことで好きな列数に増やせます。
感想
以上、PCウェブサイト版「YouTube」の検索結果に表示されるサムネイル画像を任意のサイズに変更するCSSでした。
開発者ツールで見たところ「ytd-video-renderer」にある「bigger-thumbs-style="BIG"」と「use-bigger-thumbs」あたりが悪さをしている感じでした。これらを「JavaScript」などで除去することでも小さくなりました。
