【YouTube】再生回数・公開日の文字を大きくするCSS
この記事では、2022年9月からデザインが変わったYouTubeの再生回数と公開日の文字を大きくするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、YouTubeの動画プレーヤー下にある再生回数と公開日の文字を大きくしたり、色を変えたりできます。文字サイズ、色は自由に調整できます。
2022年9月頃から、YouTubeの動画プレーヤー下のデザインが変わりました。
ダークモードの場合、各種ボタンや概要欄が、灰色の角丸背景で囲まれて、柔らかい感じになりました。何を隠そう、僕の好みです。ライトテーマも同様に、全体の背景とは別で、各種ボタンが別の色で囲まれています。
まるで、僕が以前書いたこちらの記事みたいですね。ついに、YouTube君も分かってきたか（誰だお前）
https://www.naporitansushi.com/youtube-header-customize-css/しかし、以前と違って、概要欄のところに、再生回数と公開日が一緒に表示されるようになりました。文字色や文字サイズが概要欄と一緒なので、ちょっと見にくいです。以前は、タイトル下に灰色の文字色で表示されていたので、概要欄よりも目立っていました。
以前のように目立たせたいと思い、本記事の内容が思いつきました。僕は、初心者なので、タイトル下に再生回数と公開日だけ移動させるといったことはできません。色と大きさを変えるくらいです。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
概要欄、各種ボタンの背景を透明にして、同化させたい場合は、下記記事を参考にしてみてください。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
再生回数と公開日の文字を大きくするCSS
「YouTube」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*YouTubeの再生回数と公開日を大きくする*/
div#info-container {
font-size: 30px; /*フォントサイズ*/
overflow: visible !important; /*見切れる問題を解決するのに必要コード*/
margin-bottom: 2%; /*再生回数・公開日と概要欄の余白*/
}書き込めたら、右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
再生回数と公開日が大きく表示されます。概要欄は、そのままなので目立ちます。いい感じです。
コード内の「font-size: 30px;」で大きさを調整できます。「30」がちょっと大きいなぁという場合は、「25」といったように、数字を小さくしてみてください。
「margin-bottom」で、概要欄との間の余白を調整できます。
一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
文字色も変えたい場合
上記コードは、文字サイズだけを変更します。文字色も変えたい場合は、「color」プロパティを利用します。
下記コードになります。最後の1行が新しく加わっただけで、それ以外は上記CSSと一緒です。上記のCSSを書き込んでいる場合は、わざわざ全部コピペする必要はありません。「color: #7e8084;」の部分だけパクって、既存のコードに書き加えてください。
/*YouTubeの再生回数と公開日を大きくする*/
div#info-container {
font-size: 30px; /*フォントサイズ*/
overflow: visible !important; /*見切れる問題を解決するのに必要コード*/
margin-bottom: 2%; /*再生回数・公開日と概要欄の余白*/
color: #7e8084; /*文字色*/
}「#7e8084」の値を変更することで、好きな文字色にできます。HTMLカラーコードは、こちらのサイトで調べられます。上記コードをそのままコピペすると、灰色っぽくなります。
ライトテーマでも同様に反映されます。逆に、「font-size: 〇px;」の行を書かなければ、文字サイズを変えずに、色だけ変えられます。
感想
以上、YouTubeの再生回数と公開日の文字サイズ・色を変更するCSSでした。
最近、当サイトもデザインを変えたので、YouTubeとお仲間ですね。
新しいYouTubeのUIでは、概要欄や各種ボタンに、背景とは別の色がつくようになりました。これが不要な場合、CSSを使うことで、元通りの一色にできます。
