【Twitch】ライブ配信の経過時間を大きく拡大するCSS

​​Twitch関連

Twitchのアイコン

この記事では、「Twitch（ツイッチ）」のライブ配信の経過時間を大きく見やすいようにするCSSについて書きます。

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

Twitchのライブ配信動画の経過時間を拡大した画像1

本記事で紹介するCSSを使えば、Twitchのライブ配信の経過時間をでかくできます。

「どのくらい経ったか確認できる時間が小さすぎる！もっと大きくしたい！」という方におすすめです。CSSで見た目上、非表示にしているだけなので、いつでも元に戻せます。誰にも迷惑をかけません。

本記事は、1ユーザーの話です。配信者の方がこれをやっても、読者の画面で大きくなるわけではありません。ただ自分の環境上だけです。また、PCウェブサイト版のみです。スマホではできません。

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

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

ライブの経過時間を大きくする手順

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

Stylebotのスクリーンショット1

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

/*ライブ配信時間の大きさ*/
span.live-time {
  font-size: 8em !important;
}

「font-size」の数字が大きさを指しています。数字を大きくすると、より時間が拡大されます。上記の「8em」だと相当大きいです。

右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

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

指定したフォントサイズになります。大きすぎる場合は、数字を小さくしましょう。

Twitchのライブ配信動画の経過時間を拡大した画像2

ライブ配信動画のみが対象です。アーカイブ動画は、経過時間がそもそも表示されないので関係ありません。

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

感想

以上、「Twitch」のライブ配信の経過時間を、好きなサイズに調整する方法でした。

Twitch関連は色々書いているので、気になった方は当サイトのカテゴリーやサイト内検索から探してみてください。

​​Twitch関連