【YouTube】 「登録チャンネル」での動画の表示列数が激減して不便すぎる

こんにちは、さち です。

いつものように PC で YouTube を開くと、「登録チャンネル」で表示される動画のサムネイル（以下：サムネ）が巨大化していました。

それが原因で、見えている範囲に表示される「動画」の数が激減！　スクロールが増えてすごく使いにくい……。

無理やり解決してみます。

1列しか表示されない

「登録チャンネル」ページでの動画の表示が一列だけになってしまいました。

ウェブブラウザーのウィンドウ幅が 700px 程度とはいえ、1列はさすがに少なすぎます。両サイドに巨大な隙間ができてスッカスカです。

ちなみに、複数列で表示するにはウィンドウ幅を 721px 以上にする必要があります。また、サムネのサイズも大きくなり、複数列にしても表示される数は減っています。

画面端で YouTube を流しながら PC 作業をする私には不便な仕様変更です。

ユーザーCSS で解決する

無理やり複数列にする ユーザーCSS を作ってみました。（ウェブブラウザーの拡張機能を使うので、スマホの YouTubeアプリ では使えません）

1. 拡張機能「Stylus」で新しいスタイルを作って、下記の「ユーザーCSS」をコピペします。（ :root のカッコ中の数値はお好みで変更して下さい）

   /*************************************
   * 登録チャンネル 動画列数を変更
   *************************************/
   
   /*
   Author     うみの さち
   URL        https://at.sachi-web.com/youtube_subscriptions_columns.html
   Version    20251231
   */
   
   
   /* サイズ指定（お好みで変更して下さい）*********************************/
   :root {
     /* 動画サムネの最小サイズ（初期値：320px） */
     --video-thumbnail-size: 180px;
     /* チャンネルアイコンのサイズ（初期値：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;
   }
   .ytThumbnailViewModelLarge {
     border-radius: 0 !important;
   }
   
   /* 各動画のサイズ調整 */
   ytd-rich-item-renderer {
     width: 100% !important;
     margin: 0 0 40px !important;
   }
   
   /* 動画情報のサイズ調整 */
   .yt-spec-avatar-shape--avatar-size-medium {
     width: var(--ch-icon-size) !important;
     height: var(--ch-icon-size) !important;
   }
   .yt-spec-avatar-shape__button--button-medium {
     width: auto;
     height: auto;
   }
   .yt-lockup-metadata-view-model__avatar {
     margin-right: 2px !important;
   }
   #meta.ytd-rich-grid-media {
     padding-right: 15px !important;
   }
   
   /* 動画情報のフォントサイズの調整 */
   .yt-lockup-metadata-view-model__title {
     font-size: var(--title-font-size) !important;
   }
   .yt-content-metadata-view-model--medium-text .yt-content-metadata-view-model__metadata-text {
     font-size: var(--info-font-size) !important;
   }
   
   /* 動画プレビューが見きれないように調整 */
   #media-container.ytd-video-preview {
     overflow: visible !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;
   }
   
   /* ショート動画 フォントサイズ */
   .shortsLockupViewModelHostMetadataTitle {
     font-size: var(--title-font-size) !important;
   }
   
   /* チャンネルページの調整 動画一覧 */
   ytd-two-column-browse-results-renderer.grid-2-columns,
   ytd-two-column-browse-results-renderer.grid-3-columns,
   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;
   }

2. ユーザーCSS を適用するのは「次で始まる URL」にして、下記の URL（「登録チャンネル」のページ） を記述します。
   https://www.youtube.com/feed/subscriptions
3. これで、動画のサムネイルを複数列で表示できるようになりました。
   

「動画サムネ」「チャンネルアイコン」のサイズと、「動画タイトル」「チャンネル名」「再生数・投稿日時」のフォントサイズは、お好みに合わせて変更して下さい。

【おまけ】 チャンネルページにも適用

チャンネルページの「動画」「ライブ」にも対応してみたので、必要な方は ユーザーCSS の適用先に「正規表現に一致する URL」で https://www\.youtube\.com/@[^/]+/(videos|streams) を追加してみて下さい。

※ チャンネルの URL が YouTubeハンドル（@から始まるチャンネルを示す名前） を含まない場合は機能しません