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

​​YouTube

「YouTube Music」のアイコン

この記事では、「YouTube Music（PC版）」で曲を再生している時に表示されるプログレスバーを見やすいように太くするCSSを紹介します。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。PC版限定です。スマホではできません。

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

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

「YouTube Music」にあるプログレスバーのスクリーンショット

マウスでクリックする時に見にくいです。そこで、CSSを使って太くしてみます。自分で設定できるので、好きな太さ具合にできます。

誰にも迷惑をかけません。いつでもオンオフできます。自身の環境上だけです。他の人には影響されません。

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

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

Stylebot - Chrome ウェブストア

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

YouTube Musicのプログレスバーを任意の太さにする手順

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

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

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

/*プログレスバーのサイズ、角丸具合*/
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」が、現在再生している地点（丸）の位置です。ちょっとずれた場合は、数字を調整してみてください。

「YouTube Music」のプログレスバーの丸の位置を調整した画像

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

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

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

ここで一度ページをリロードします。リロードしないと、正常に反映されない場合があります。リロードして、曲を再生すると、下部にプログレスバーが表示されます。指定した太さになります。見やすいです。

「YouTube Music」のプログレスバーを好きな大きさに変更した画像

一時的に無効化したい場合は、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倍の大きさにします。

プログレスバーの丸の大きさを変更した画像

​​YouTube