【YouTube Music】Primeミュージックと同じ操作バーにする方法

この記事では、「YouTube Music(PC版)」で曲を再生している時、下部に表示されるメディア操作バーの並びを左から曲情報、中央に再生・一時停止といった並びに変更する方法について書きます。
本記事で紹介するCSSを使えば、「YouTube Music」のメディア操作バーを「Amazonプライムミュージック」と同じ中央に一時停止ボタンといった配置にできます。
「Google Pixel 6a」を購入した時についてきた「Google One」の特典で「YouTube Music」を3か月無料で利用できることを知りました。早速加入したんですが1点気になることがありました。メディア操作バーの配置です。
左側に「前/一時停止/次」、中央に「曲情報」、右側に「音量調節/ループ/シャッフル」となっていました。僕は元々「Amazon Music Prime」を利用していてそちらでは中央に再生・一時停止ボタンがありました。「YouTube Music」とは逆の配置です。

「Amazon Music Prime」に慣れていた僕からしたら結構気になってしまいました。個人的には中央下に再生・一時停止ボタンがあるほうが好きです。
理由はマウスの移動距離が短くてすむからです。基本的にマウスを画面中央らへんに置いているので「Amazon Music Prime」で曲を操作したい時すっと下のほうに持っていけば操作できていました。
一方で「YouTube Music」だとマウスをわざわざ左下にもっていかないと操作できません。慣れるまで大変だし距離も伸びて困ります。CSSを使って並びを変えることにしました。
だれにも迷惑をかけませんしいつでもオンオフできます。自身の環境上だけです。他の人には影響されません。
「プライムミュージックからYouTubeに移行したけど操作バーが慣れない!中央下に操作ボタンがあると嬉しい!」という方参考にしてみてください。
インストール方法
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。
「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は以下の記事を参考にしてみてください。
YouTube Musicのメディア操作バーを並び替えるCSS
スタイルシートを開く
「YouTube Music」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。
もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
以下のコードを書き込みます。
/*下部のメディア操作バーをflexにする(2025年02月16日作成)*/
ytmusic-player-bar.ytmusic-app {
display: flex !important;
}
/*【メディア操作バー】タイトル(2025年02月16日修正)*/
.middle-controls.ytmusic-player-bar {
order: 1 !important;
flex: 1 0 45% !important;
justify-content: flex-start !important;
}
/*【メディア操作バー】再生、次、前などのメディアキー(2025年02月16日修正)*/
.left-controls.ytmusic-player-bar {
order: 2 !important;
width: unset !important;
flex: 1 0 30% !important;
}
/*【メディア操作バー】音量、ループ、シャッフルなどのメディアキー(2025年02月16日修正)*/
.right-controls.ytmusic-player-bar {
order: 3 !important;
width: unset !important;
flex: 1 0 10% !important;
justify-content: flex-end !important;
}
2025年2月以前は「display: grid;
」の方法を使っていましたが、2月以降「display: flex
」方式にしてみました。
「【メディア操作バー】タイトル
」にある「flex
」の「45%
」って数字でタイトルの長さを調整できます。長くすれば曲名が長い場合でも見切れにくくなりますが、その分再生・一時停止ボタンなどが右に寄ってしまいます。
ひとまず上記をそのままコピペして後からご自身でお好みに調整するといいかなと思います。
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
書き込めたら右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:music.youtube.com
)がオンになっていることを確認します。オンになっている間は有効になっているということです。
変わったか確認する
一度ページをリロードします。リロードしないと正常に反映されない場合があります。リロードして曲を再生すると下部にメディア操作バーが表示されます。
CSS導入後は中央に「前へ、一時停止、次へ」のボタンが配置されてタイトル(曲名)が左に移動します。比較画像を貼っておきます。

「Amazonプライムミュージック」と同じです。これで曲を操作したい時、中央下にマウスをもっていけば操作できます。いつもの慣れ親しんだ動きになったので快適です。

配置のカスタマイズ
右端にある音量、ループ、シャッフルなどのメディアキーをもっと左に寄せたい!って方は上記CSSの「justify-content: flex-end !important;
」って部分を「justify-content: flex-start !important;
」に書き換えてください。
さらに「【メディア操作バー】音量、ループ、シャッフルなどのメディアキー
」CSSの「flex: 1 0 10% !important;
」のパーセント数値を調整します。20%とか30%にするとその分左に寄ってくれると思います。

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「music.youtube.com
」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
感想
以上、「YouTube Music」のメディア操作バーを「Amazonプライムミュージック」と同じ配置にするCSSでした。
本記事を最初に公開した2022年11月頃、「Amazonプライムミュージック」が基本シャッフル再生のみという改悪アップデートしたんですよね。シャッフル再生したくなかったら「Amazon Music Unlimited
」に加入してねっていう戦略です。
2023年11月に再びアップデートで改善はされたみたいですが、僕はPixelスマホ購入特典で数か月「YouTube Music」を利用して使い勝手がいいなと判断したのでそれ以降も自腹で「YouTube Premium」に加入して楽しんでいます。
音楽はYouTube、買い物や映画(Amazonプライムビデオ)を楽しむならAmazon…というように使い分けています。