【YouTube】検索結果のサムネイル画像が大きいので小さくするCSS
2024年3月に「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
インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕は、メインでは「Stylus」を使っています。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/検索結果の大きくなったサムネイルを小さくするCSS
「YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*【検索結果】動画のサムネイル画像を小さくする*/
.ytd-search #primary #contents :is(ytd-thumbnail,ytd-playlist-thumbnail,#avatar-section) {
max-width: 360px !important;
}上記CSSの「ytd-thumbnail」が通常動画のサムネイル、「ytd-playlist-thumbnail」がプレイリスト（再生リスト）、「#avatar-section」がチャンネル画像を指しています。それらのサムネイルを「max-width」で任意の数値に変更します。
サブ垢で見たとき、通常サイズが「360px」になっていたので、そのまま「360px」にしています。もっと小さくしたい場合は数値を小さくします。
本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
上記CSSは、「:is」を使っています。もしかしたらお使いのブラウザによっては動作しないかもしれません。その場合、「ChatGPT」とかに、CSSを貼り付けて「このCSSの:isのグループ化を解除して、一つずつ表示して」みたいな感じで聞くと、分解してくれます。
あくまで「:is」非対応のブラウザでの話で、「YouTube」自体が仕様変更した場合、「:is」を使おうが使うまいが、動作しないので注意です。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
「YouTube」上で適当に検索します。試しに「ナポリタン寿司の自然日記」と検索してみます。サムネイルが小さく表示されます。小さくなるというか、大きくなる前のサイズに戻ったって感じです。
「max-width」の数値を小さくすると、それだけ小さくなります。例えば「max-width: 300px !important;」みたいな感じです。ただし、最小サイズ（240px）が設定されていたので、それより小さい数字は指定しても反映されません。
一時的に無効化したい場合は、拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
ホームの一行に表示されるサムネイル数を変更したい場合
僕の環境だと、2023年3月上旬から、「YouTube」のトップページ、チャンネルページ（動画ページ）の一行に表示されるサムネイル表示数が3列、あるいは4列になってしまいました。
有志の方が公開しているユーザースクリプト（JavaScript）を利用することで、任意の列数に変更できます。詳しくは、下記記事を参考にしてみてください。
感想
以上、PCウェブサイト版「YouTube」の検索結果に表示されるサムネイル画像を任意のサイズに変更するCSSでした。
開発者ツールで見たところ、「ytd-video-renderer」にある「bigger-thumbs-style="BIG"」と「use-bigger-thumbs」あたりが悪さをしている感じでした。これらを「JavaScript」などで除去することでも、小さくなりました。
