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

Stylebot&Stylus

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の再生回数と公開日を大きくする*/
#info.ytd-watch-metadata {
  font-size: 30px;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット

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

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

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

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

一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

文字色も変えたい場合

上記コードは、文字サイズだけを変更します。文字色も変えたい場合は、「color」プロパティを利用します。下記コードになります。

/*YouTubeの再生回数と公開日を大きくする*/
#info.ytd-watch-metadata {
  font-size: 30px;
  color: #7e8084;
}

「#7e8084」の値を変更することで、好きな文字色にできます。HTMLカラーコードは、こちらのサイトで調べられます。上記コードをそのままコピペすると、灰色っぽくなります。

概要欄内にある再生回数と公開日の文字色を灰色にした画像(ダークテーマ)

ライトテーマでも同様に反映されます。逆に、「font-size: 〇px;」の行を書かなければ、文字サイズを変えずに、色だけ変えられます。

概要欄内にある再生回数と公開日の文字色を灰色にした画像(ライトテーマ)

感想

以上、YouTubeの再生回数と公開日の文字サイズ・色を変更するCSSでした。

最近、当サイトもデザインを変えたので、YouTubeとお仲間ですね。わっはは。

Posted by ナポリタン寿司