こんにちは、さち です。
いつものように PC で YouTube を開いてみると、「登録チャンネル」で表示される動画のサムネイル(以下:サムネ)が巨大化していました。
それが原因で、見えている範囲に表示される「動画」の数が圧倒的に減ってしまいました。
無理やり、解決してみます。
1列しか表示されない
「登録チャンネル」のページを表示すると、動画の表示が一列だけになっていました。
ウェブブラウザーのウィンドウ幅が 700px 程度になっているとはいえ、さすがに1列は少なすぎます。両サイドに巨大な隙間ができてスッカスカです。
ちなみに、複数列で表示するにはウィンドウ幅を 721px 以上にする必要があります。逆に言えば、幅が 720px 以下のときは1列しか表示されないということです。
画面端で YouTube を流しながら PC 作業をする私には、ものすごく不便な仕様変更です。
ちなみに、動画のサムネが全体的に大きくなり、ウインドウ幅が 721px 以上でも表示列数が減っています。
ユーザーCSS で解決する
無理やり複数列にする ユーザーCSS を作ってみました。(ウェブブラウザーの拡張機能を使うので、スマホの YouTubeアプリ では使えません)
- 拡張機能「Stylus」で新しいスタイルを作って、下記の「ユーザーCSS」をコピペします。(
:root
のカッコ中の数値はお好みで変更して下さい)/* Author うみの さち URL https://at.sachi-web.com/youtube_subscriptions_columns.html Version 20240725 */ /* サイズ指定(お好みで変更して下さい)*********************************/ :root { /* 動画サムネの最小サイズ(初期値:320px) */ --video-thumbnail-size: 210px; /* チャンネルアイコンのサイズ(初期値:36px) */ --ch-icon-size: 25px; /* 動画タイトルの文字サイズ(初期値:1.6rem) */ --title-font-size: 1.4rem; /* チャンネル名・再生数・投稿日時の文字サイズ(初期値:1.4rem) */ --info-font-size: 1.3rem; } /***********************************************************************/ /* 動画リストのヘッダー幅調整 */ ytd-rich-section-renderer { grid-column: 1 / -1; } #content.ytd-rich-section-renderer { max-width: none !important; } /* 列数強制の無効化 */ ytd-rich-grid-row, ytd-rich-grid-row #contents { display: contents !important; } /* 動画リストのレイアウト調整 */ ytd-two-column-browse-results-renderer.grid-3-columns { width: 100% !important; } #primary.ytd-two-column-browse-results-renderer { padding-right: 5px !important; padding-left: 5px !important; } #contents.ytd-rich-grid-renderer { display: grid !important; width: 100% !important; max-width: none !important; grid-gap: 0 5px !important; grid-template-columns: repeat( auto-fill, minmax( var(--video-thumbnail-size), 1fr ) ) !important; } /* 各動画のサイズ調整 */ ytd-rich-item-renderer { width: 100% !important; margin: 0 0 40px !important; } /* 動画情報のサイズ調整 */ #avatar.ytd-rich-grid-media { width: var(--ch-icon-size) !important; height: var(--ch-icon-size) !important; } #avatar-link.ytd-rich-grid-media { margin-right: 5px !important; } #meta.ytd-rich-grid-media { padding-right: 15px !important; } /* 動画情報のフォントサイズの調整 */ #video-title.ytd-rich-grid-media { font-size: var(--title-font-size) !important; } ytd-video-meta-block #text.ytd-channel-name, ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block { font-size: var(--info-font-size) !important; } /* ショート動画 レイアウト調整 */ #contents.ytd-rich-shelf-renderer { gap: 5px !important; } ytd-rich-shelf-renderer #contents.ytd-rich-shelf-renderer { justify-content: center !important; } /* ショート動画 サムネイルサイズ */ ytd-rich-shelf-renderer ytd-rich-item-renderer { width: calc( (100dvh - 180px) * 9 / 16) !important; max-width: var(--video-thumbnail-size) !important; min-width: 150px !important; } /* ショート動画 情報のサイズ調整 */ h3.ytd-rich-grid-slim-media { padding: 5px 15px 0 0; } ytd-menu-renderer.ytd-rich-grid-slim-media { right: -3px !important; } /* ショート動画 フォントサイズ */ #video-title.ytd-rich-grid-slim-media { font-size: var(--title-font-size) !important; } /* チャンネルページの調整 */ ytd-two-column-browse-results-renderer.grid-4-columns, ytd-two-column-browse-results-renderer.grid-5-columns, ytd-two-column-browse-results-renderer.grid-6-columns { width: 100% !important; max-width: none !important; }
- ユーザーCSS を適用するのは「次で始まる URL」にして、下記の URL(「登録チャンネル」のページ) を記述します。
https://www.youtube.com/feed/subscriptions
- これで、動画のサムネイルを複数列で表示できるようになりました。
「動画サムネ」「チャンネルアイコン」のサイズと、「動画タイトル」「チャンネル名」「再生数・投稿日時」のフォントサイズは、お好みに合わせて変更して下さい。
【おまけ】 チャンネルページにも適用
チャンネルページの「動画」「ライブ」にも対応してみたので、必要な方は ユーザーCSS の適用先に「正規表現に一致する URL」で https://www\.youtube\.com/@[^/]+/(videos|streams)
を追加してみて下さい。
※ チャンネルの URL が YouTubeハンドル(@から始まるチャンネルを示す名前) を含まない場合は機能しません
コメント
同じ理由で困っていました。Firefox 114.0.1にて理想的な動作をしてくれました。
ありがとうございます。