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