【YouTube】再生リストの余白を詰めてスッキリさせるCSS

2022年10月16日YouTube

YouTubeのアイコン

この記事では、YouTubeの再生リストの余白を詰めて、スッキリさせるCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

【YouTube】再生リストの余白を詰めてスッキリさせるCSS

本記事のCSSを使えば、YouTubeの動画を任意の再生リストに登録できる「保存先」ダイアログの行間を縮めることができます。

通常は、以下のようになっていて、ちょっと文字と文字の間の余白が大きいです。

YouTubeの「保存先」ダイアログ画面

YouTubeのプレイリストをいっぱい作成していて、登録する際に、スクロールが大変!という方におすすめです。詰めることで、1ページに表示されるプレイリスト数が増えます。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

YouTubeのプレイリスト登録リストの行間を縮めるCSS

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*再生リストの行間*/
#playlists>.ytd-add-to-playlist-renderer {
  margin-bottom: 0 !important;
}

文字の下にある余白(margin-bottom)を、「0」にするという意味です。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:www.youtube.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

有効にした状態で、再生リストに登録したい動画の再生ページにいきます。動画下のボタンをクリックします。

YouTubeの再生リストの登録手順画像

再生リスト(プレイリスト)の行間が縮んでぎゅっとなっています。比較画像を貼っておきます。1ページにより多くの再生リストが表示されます。スクロール量も減ります。

CSSで再生リストの行間を縮めた比較画像

一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、YouTubeのプレイリスト登録リストの行間を0にして、ぎゅっとさせるCSSでした。

読者の方から要望をいただいたので、記事にしました。要望、感謝です。

Posted by ナポリタン寿司