【YouTube】再生リストの余白を詰めてスッキリさせるCSS
この記事では、YouTubeの再生リストの余白を詰めて、スッキリさせるCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事のCSSを使えば、YouTubeの動画を任意の再生リストに登録できる「保存先」ダイアログの行間を縮めることができます。
通常は、以下のようになっていて、ちょっと文字と文字の間の余白が大きいです。
YouTubeのプレイリストをいっぱい作成していて、登録する際に、スクロールが大変！という方におすすめです。詰めることで、1ページに表示されるプレイリスト数が増えます。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/YouTubeのプレイリスト登録リストの行間を縮めるCSS
YouTubeにアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*再生リストの行間*/
#playlists>.ytd-add-to-playlist-renderer {
margin-bottom: 0 !important;
}文字の下にある余白（margin-bottom）を、「0」にするという意味です。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
有効にした状態で、再生リストに登録したい動画の再生ページにいきます。動画下の
ボタンをクリックします。
再生リスト（プレイリスト）の行間が縮んでぎゅっとなっています。比較画像を貼っておきます。1ページにより多くの再生リストが表示されます。スクロール量も減ります。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、YouTubeのプレイリスト登録リストの行間を0にして、ぎゅっとさせるCSSでした。
読者の方から要望をいただいたので、記事にしました。要望、感謝です。