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

2021年12月26日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; /*非透明にする*/
}

そもそもチャット欄を消すCSS

「ホバー時とか関係なしに、ずっと非表示にしておきたい!」という方は、以下のCSSになります。

/*YouTubeチャット欄非表示*/
ytd-live-chat-frame#chat {
  display: none !important;
}

チャット欄の項目が非表示になり、関連動画が上に配置されます。

YouTubeのチャット欄をCSSで非表示にした画像

感想

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

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

Posted by ナポリタン寿司