【YouTube】再生回数・公開日の文字を大きくするCSS

2022年9月24日YouTube

YouTubeのアイコン

この記事では、2022年9月からデザインが変わったYouTubeの再生回数と公開日の文字を大きくするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

YouTubeの再生回数と公開日を大きくする前と後の比較画像

本記事で紹介するCSSを使えば、YouTubeの動画プレーヤー下にある再生回数と公開日の文字を大きくしたり、色を変えたりできます。文字サイズ、色は自由に調整できます。

2022年9月頃から、YouTubeの動画プレーヤー下のデザインが変わりました。

ダークモードの場合、各種ボタンや概要欄が、灰色の角丸背景で囲まれて、柔らかい感じになりました。何を隠そう、僕の好みです。ライトテーマも同様に、全体の背景とは別で、各種ボタンが別の色で囲まれています。

2022年9月頃からデザインが変更されたYouTubeの動画プレーヤー下画像

まるで、僕が以前書いたこちらの記事みたいですね。ついに、YouTube君も分かってきたか(誰だお前)

しかし、以前と違って、概要欄のところに、再生回数と公開日が一緒に表示されるようになりました。文字色や文字サイズが概要欄と一緒なので、ちょっと見にくいです。以前は、タイトル下に灰色の文字色で表示されていたので、概要欄よりも目立っていました。

2022年9月以前のYouTube画像

以前のように目立たせたいと思い、本記事の内容が思いつきました。僕は、初心者なので、タイトル下に再生回数と公開日だけ移動させるといったことはできません。色と大きさを変えるくらいです。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

再生回数と公開日の文字を大きくするCSS

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

Stylebotのポップアップメニュー画像

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

/*YouTubeの再生回数と公開日を大きくする*/
div#info-container {
  font-size: 30px; /*フォントサイズ*/
  overflow: visible !important; /*見切れる問題を解決するのに必要コード*/
  margin-bottom: 2%; /*再生回数・公開日と概要欄の余白*/
}

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

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

再生回数と公開日が大きく表示されます。概要欄は、そのままなので目立ちます。いい感じです。

概要欄内にある再生回数と公開日の文字サイズを大きくした画像1

コード内の「font-size: 30px;」で大きさを調整できます。「30」がちょっと大きいなぁという場合は、「25」といったように、数字を小さくしてみてください。

「margin-bottom」で、概要欄との間の余白を調整できます。

概要欄内にある再生回数と公開日の文字サイズを大きくした画像2

一時的に無効化したい場合は、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を使うことで、元通りの一色にできます。

YouTubeの再生ページにある概要欄と各種ボタンの背景色を変更してみた比較画像

2022年9月24日YouTube