【YouTube Music】プログレスバーを太くするCSS

この記事では、「YouTube Music(PC版)」で曲を再生している時に表示されるプログレスバーを見やすいように太くするCSSを紹介します。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を利用します。PC版限定です。スマホではできません。

2022年8月に購入した「Google Pixel 6a」についてきた特典で、「YouTube Music(YouTube Premium)」に加入していました。音楽が聴き放題でとても便利なんですが、下部に表示される現在再生している曲のプログレスバー(再生地点)が細いと感じました。

マウスでクリックする時に見にくいです。そこで、CSSを使って太くしてみます。自分で設定できるので、好きな太さ具合にできます。
誰にも迷惑をかけません。いつでもオンオフできます。自身の環境上だけです。他の人には影響されません。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
YouTube Musicのプログレスバーを任意の太さにする手順
「YouTube Music」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。言語を日本語にしている方限定です。
/*プログレスバーのサイズ、角丸具合*/
tp-yt-paper-slider[aria-label="移動スライダー"] div#progressContainer {
height: 12px !important;
border-radius: 13px !important;
}
/*プログレスバーの再生地点(丸)の位置*/
tp-yt-paper-slider[aria-label="移動スライダー"] .slider-knob-inner.tp-yt-paper-slider {
margin: 14px !important;
}
「height
」が高さです。もっと太くしたい場合は、上記の「12px
」の数字を大きくしてみてください。「border-radius
」は角丸具合です。書かなくてもOKです。
「プログレスバーの再生地点(丸)の位置
」の「margin
」が、現在再生している地点(丸)の位置です。ちょっとずれた場合は、数字を調整してみてください。

書き込めたら、右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:music.youtube.com
)がオンになっていることを確認します。オンになっている間は有効になっているということです。
ここで一度ページをリロードします。リロードしないと、正常に反映されない場合があります。リロードして、曲を再生すると、下部にプログレスバーが表示されます。指定した太さになります。見やすいです。

一時的に無効化したい場合は、Stylebot→「music.youtube.com
」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、「YouTube Music(ユーチューブ・ミュージック)」のプログレスバー(再生具合)を、任意の太さに変更するCSSでした。
もし、丸の大きさを変えたい場合は、上記で紹介した「プログレスバーの再生地点(丸)の位置
」の代わりに、以下のCSSを利用してみてください。
/*プログレスバーの再生地点(丸)の位置と大きさ*/
tp-yt-paper-slider[aria-label="移動スライダー"] .slider-knob-inner.tp-yt-paper-slider {
margin: 14px !important;
transform: scale(3);
}
「transform
」の「scale
」が大きさを指しています。上記CSSだと、3倍の大きさにするという意味です。「scale(2);
」なら2倍、「scale(1.5);
」なら1.5倍の大きさにします。
