【YouTube】再生リストの余白を縮めて高さを広げるCSS

2025年10月22日YouTube

この記事では、PCウェブサイト版「YouTube」の再生リストの余白を縮めて、高さを広げてスッキリさせるCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

PCウェブサイト版「YouTube」の動画プレーヤー下部にある「保存」をクリックした時の再生リスト一覧（保存先）ダイアログは、以下画像のようになっています。

ちょっと文字と文字の間の余白が大きく高さも狭いので、1ページに表示される項目数が少ないです。

本記事のCSSを利用することで自身の見た目上でカスタマイズできます。好きな余白具合、好きな高さに調整できます。

YouTubeのプレイリストをいっぱい作成していて登録する際にスクロールが大変！という方、参考にしてみてください。1ページに表示されるプレイリスト項目数を増やせます。

本記事は拡張機能をインストールできるPCブラウザ専用です。スマホやタブレットのアプリ版ではできません。

1. 前提
2. YouTubeのプレイリスト一覧の余白と高さを調整するCSS
3. 「YouTube Studio」の再生リスト選択画面を拡張するCSS
4. 感想

前提

「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

YouTubeのプレイリスト一覧の余白と高さを調整するCSS

スタイルシートを開く

「YouTube」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。

/*再生リストの保存先一覧リスト*/
/*横幅と高さ*/
tp-yt-iron-dropdown:has([aria-label^="動画の保存先"]) {
    max-width: 500px !important;

    & yt-sheet-view-model {
        max-height: unset !important;
    }

    & *:has(>div>yt-list-view-model) {
        max-width: unset !important;
    }

    & yt-list-view-model {
        max-height: 800px !important;
        width: auto !important;
    }

    /*余白具合*/
    & yt-list-item-view-model>div {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /*左側の高さ・横幅制限撤廃*/
    & [class*="image-container"]:nth-of-type(1) {
        height: unset !important;
        min-width: unset !important;

        /*左側のサムネイルサイズ*/
        &>yt-collection-thumbnail-view-model {
            width: 37px !important;
        }
    }
}

/*再生リストの保存先一覧リスト*/
/*横幅と高さ*/
tp-yt-iron-dropdown:has([aria-label^="動画の保存先"]) {
    max-width: 500px !important;

    & yt-sheet-view-model {
        max-height: unset !important;
    }

    & *:has(>div>yt-list-view-model) {
        max-width: unset !important;
    }

    & yt-list-view-model {
        max-height: 800px !important;
        width: auto !important;
    }

    /*余白具合*/
    & yt-list-item-view-model>div {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /*左側の高さ・横幅制限撤廃*/
    & [class*="image-container"]:nth-of-type(1) {
        height: unset !important;
        min-width: unset !important;

        /*左側のサムネイルサイズ*/
        &>yt-collection-thumbnail-view-model {
            width: 37px !important;
        }
    }
}