【YouTube Music】プログレスバーを太くするCSS
この記事では、「YouTube Music（PC版）」で曲を再生している時に表示されるプログレスバーを見やすいように太くするCSSを紹介します。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。PC版限定です。スマホではできません。
2022年8月に購入した「Google Pixel 6a
」についてきた特典で、「YouTube Music（YouTube Premium）」に加入していました。音楽が聴き放題でとても便利なんですが、下部に表示される現在再生している曲のプログレスバー（再生地点）が細いと感じました。
マウスでクリックする時に見にくいです。そこで、CSSを使って太くしてみます。自分で設定できるので、好きな太さ具合にできます。
誰にも迷惑をかけません。いつでもオンオフできます。自身の環境上だけです。他の人には影響されません。本記事は、Chrome拡張機能をインストールできるPCブラウザ向けです。スマホのアプリ版ではできません。
インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕は、メインでは「Stylus」を使っています。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/「YouTube Music」のプログレスバーを任意の太さにする手順
「YouTube Music」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。
以下のコードを書き込みます。「YouTube Music」の言語を日本語にしている方限定です。
/*プログレスバーのサイズ、角丸具合*/
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」が、現在再生している地点（丸）の位置です。ちょっとずれた場合は、数字を調整してみてください。
本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
書き込めたら、右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：music.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
ここで一度ページをリロードします。リロードしないと、正常に反映されない場合があります。リロードして、曲を再生すると、下部にプログレスバーが表示されます。指定した太さになります。見やすいです。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「music.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
【余談】再生・前へ次へなどのボタンを中央に配置する
僕は、「Amazonプライムミュージック」からの移行勢です。「Amazonプライムミュージック」だと、メディアコントロールバー内の再生・一時停止、前へ・次へボタンが、中央下部に配置されていました。
一方「YouTube Music」では、左下にあって、マウスをもっていくのが少々めんどくさいです。僕は、CSSを使ってバー内のボタン配置を変えています。中央下部に配置するの良きです。
【余談】低評価と高評価ボタンを非表示にする
メディアコントロールバー内の高評価（
）、低評価（
）ボタンを非表示にするCSS記事も書いています。
感想
以上、「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倍の大きさにします。
