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

この記事は約7分で読めます。
記事内に広告が含まれています

登録チャンネルの画面

こんにちは、さち です。

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

それが原因で、見えている範囲に表示される「動画」の数が圧倒的に減ってしまいました。

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

スポンサーリンク

1列しか表示されない

登録チャンネルの画面

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

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

ちなみに、複数列で表示するにはウィンドウ幅を 721px 以上にする必要があります。逆に言えば、幅が 720px 以下のときは1列しか表示されないということです。

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

ちなみに、動画のサムネが全体的に大きくなり、ウインドウ幅が 721px 以上でも表示列数が減っています。

ユーザーCSS で解決する

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

  1. 拡張機能「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;
    }
  2. ユーザーCSS を適用するのは「次で始まる URL」にして、下記の URL(「登録チャンネル」のページ) を記述します。
    https://www.youtube.com/feed/subscriptions
  3. これで、動画のサムネイルを複数列で表示できるようになりました。
    登録チャンネルの画面

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

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

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

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

 

コメント

  1. 通りすがりのおじさん より:

    同じ理由で困っていました。Firefox 114.0.1にて理想的な動作をしてくれました。
    ありがとうございます。

タイトルとURLをコピーしました