【YouTube】ライブチャット内のハート（リアクション）非表示CSS

2023年10月22日2024年1月7日YouTube

この記事では、PCウェブサイト版「YouTube」のライブ配信のチャット欄右下に表示されているハートマークを消すCSSを書きます。

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

PCブラウザで「YouTube」のライブチャットを見ている時、右下にハートマークが表示されます。もしかしたら配信者さんの設定によっては表示されないのかもしれません。僕が見ている配信者さんのライブチャットには表示されています。

マウスを乗せると、びよーんと絵文字が表示されます。クリックでリアクションを送れる機能のようです。僕は使っていません。使っていないのに、ずっとハートマークが表示されていて、ちょっとチャット欄の邪魔です。

CSSを使うことで、自身の環境上で消せます。いつでもオンオフできます。本記事は、CSSを適用できるPCブラウザ向け、かつ視聴者向けです。

配信者さんが自身の配信動画上から消したい…とかいう記事ではありません。そもそも配信者側で表示の有無を切り替えられるのかすら僕には分かりません。

インストール方法

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

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

Stylebot

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

「YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*チャット欄のリアクション（♡）非表示*/
div#fab-container {
    display: none !important;
}

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

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

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

現在進行形でライブ配信されている動画を開きます。既に開いている場合は、一度ページをリロードします。YouTubeのチャット周辺は、その場でCSSを書き込んでも、すぐには反映されず、一度ページをリロードする必要がある時が多いです。

右下のハートマークが消えていると思います。そもそも押せるハートがなくなるので、マウスホバーしたらびよーんと展開される絵文字欄も表示されません。

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

「YouTube Heart Chat Remover」というChrome拡張機能を使うことでも、ハートマークを非表示にできます。詳しくは、下記記事を参考にしてみてください。

【YouTube Heart Chat Remover】ライブチャット内のハートを消す拡張機能

この記事では、PCウェブサイト版「YouTube」のライブ配信のチャット欄右下に表示されるハートマークを ...

https://www.naporitansushi.com/youtube-heart-chat-remover/

YouTubeのライブチャットに関する他のCSS記事も書いています。気になった方は参考にしてみてください。僕は見る専なので、チャットの入力欄を消しています。

以上、PCウェブサイト版「YouTube」のライブ配信のチャット欄右下に表示されているハートマーク（リアクション）を消すCSSでした。

2023年10月22日2024年1月7日YouTube