【Stylebot】YouTubeのチャット欄をホバー時だけ表示させるCSS

Stylebot&Stylus

Stylebot のアイコン

この記事では、YouTube でマウスを乗せた時だけチャット欄を表示するCSS について書きます。

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

YouTubeチャット欄をホバー時だけ表示するようにする

YouTube のチャット欄を、マウスを乗せた時だけ表示させるCSS です。

普段は非表示にして、マウスを乗せた時だけ表示されるので、気分によって切り替えできます。

純粋にライブ配信を楽しみたい時でも、右側にチャット欄が表示されて少し不便を感じてました。見たくない情報も入ってきて困るんですよね。

「チャットのリプレイを非表示」をクリックすれば、非表示にはなるんですが、毎回クリックするのもめんどくさいです。ということで、見たい時だけ見れるようにしてみました。

前提

この記事は、既にStylebot をインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSS を適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

CSS

書き込むコードは以下になっています。

/*ライブ配信のチャット非表示*/
div#chat-messages {
  opacity: 0; /*透明にする*/
  transition-duration: 0.3s; /*アニメーション変移時間*/
}

/*ライブ配信のチャットホバー時に表示*/
div#chat-messages:hover {
  opacity: 1; /*非透明にする*/
}

通常時は非表示、マウスをチャット欄の上に乗せた時だけ表示されるようになります。

ホバーでチャット欄の表示切り替えの様子

「transition-duration: 0.3s;」の数字で表示・非表示のアニメーション時間を調整できます。

例えば、ゆっくり表示したい場合は、以下のCSS になります。1秒かけてゆっくり表示切り替えします。

/*ライブ配信のチャット非表示*/
div#chat-messages {
  opacity: 0; /*透明にする*/
  transition-duration: 1s; /*アニメーション変移時間:1秒*/
}

/*ライブ配信のチャットホバー時に表示*/
div#chat-messages:hover {
  opacity: 1; /*非透明にする*/
}

瞬時に切り替えてほしい場合は、アニメーションそのものを削除しましょう。

/*ライブ配信のチャット非表示*/
div#chat-messages {
  opacity: 0; /*透明にする*/
}

/*ライブ配信のチャットホバー時に表示*/
div#chat-messages:hover {
  opacity: 1; /*非透明にする*/
}

まとめ

以上、YouTube のライブ配信の時に表示されるチャット欄を、ホバーで切り替えるCSS についてでした。

余計な情報が入らないので、気分を害することなく楽しめます。

Posted by ナポリタン寿司