SHOWROOMの視聴中の「アバター」を消す/非表示について解説!

視聴中のSHOWROOMで画面から邪魔なアバターを消す・非表示にする方法をご存知でしょうか?通常の機能では消すこと・非表示に出来ない、SHOWROOMのアバターをPCから消す・非表示にする方法を紹介するので、アバターが目障りな方はぜひ参考にしてください。

SHOWROOMの視聴中の「アバター」を消す/非表示について解説!のイメージ

目次

  1. 1SHOWROOM視聴中の「アバター」を消す/非表示とは
  2. SHOWROOMのユーザーアイコンを画面から見えなくする方法
  3. 2SHOWROOMの視聴中の「アバター」を消す/非表示にする方法~html5操作~
  4. html5操作の手順
  5. 3SHOWROOMの視聴中の「アバター」を消す/非表示にする方法~Stylish操作~
  6. Stylish操作の手順
  7. 再編集手順
  8. 上級者向け操作設定
  9. 4SHOWROOM視聴中の「アバター」を消す/非表示の注意点
  10. スマホからはできない
  11. 各方法は自己責任
  12. すべてのPC機器に有効とは限らない
  13. 合わせて読みたい!アプリに関する記事一覧

SHOWROOM視聴中の「アバター」を消す/非表示とは

SHOWROOM

動画の視聴中・配信中に表示されて消すことが出来ないSHOWROOMのアバターを消す方法をご存知でしょうか?SHOWROOMの目障りなアバターを配信中の画面から消す方法を紹介します。

SHOWROOMのユーザーアイコンを画面から見えなくする方法

SHOWROOMは配信中の画面に視聴中の視聴者のアバターが表示されて目障りです。このユーザーアバターを配信中の画面から見えなくする方法を紹介します。

配信中は仮想ライブ空間を演出

SHOWROOMは配信者と視聴者で成り立っているコンテンツです。また、本記事で紹介する方法では自分の見ている画面のみからアバターが見えなくなるだけなのでSHOWROOM側に影響はありません

コメント/ギフト効果も見えなくなる可能性

本記事で紹介する内容を行うと、ルーム内のコメントやギフト効果も見えなくなってしまう可能性があります。

ThumbSHOWROOMライブ配信を録画する方法
SHOWROOMのライブ配信を録画してみたいと思ったことはありませんか?Mac・Window...
Thumb「SHOWROOM」でアバター変更/もらう方法を解説!
皆さんはSHOWROOMという動画配信サービスをご存知ですか?利用している方は動画配信だけで...

SHOWROOMの視聴中の「アバター」を消す/非表示にする方法~html5操作~

SHOWROOMの視聴中の「アバター」をSHOWROOMのソースコードを編集して消す/非表示にする方法を紹介します。ソースコードの編集はPC版のみ行なえます。スマホではできないので注意してください。

html5操作の手順

SHOWROOMはhtml5と呼ばれる言語で出来ています。詳しいことは省略しますがhtml5で出来ているSHOWROOMのソースコードを弄ることでアバターを消すことが出来ます。ただし恒久的なものではなく更新やルームの外にでると元に戻ります。

また、アバターだけでなくコメントなどの要素もまとめて見えないようにするので注意してください。作業してうまく行かない場合は一度ルームを抜けて入り直すか、更新を行ってください。作業前の状態に戻ります。

Google ChromeでPC版SHOWROOMへアクセス

Google ChromeでPC版SHOWROOMへアクセスします。他のブラウザでも構いませんがソースコードをいじりやすいのでChromeがおすすめです。

配信中ルームでF12キー押す

配信中ルームでF12キー押す

配信中ルームでF12キー押します。すると上記のような画面が表示されるのでメニューからElementタブを選択してください。

Ctrlキー+Fキーを同時押し

Ctrlキー+Fキーを同時押し

Ctrlキー+Fキーを同時押しします。

検索欄にcanvas入力

検索欄にcanvas入力

検索欄に「canvas」を入力します。

canvas部が黄色くなり右クリックを押す

canvas部が黄色くなり右クリック

ソースコード内のcanvas部が黄色くなるので、その部分を右クリックします。

表示メニューのDelete elementをクリック

表示メニューのDelete elementをクリック

表示メニューのDelete elementをクリックします。これでアバターは消えます。

再度F12キーを押す

再度F12キーを押すとソースコードのエディタは消えます。

SHOWROOM側に影響がない理由

この方法ではSHOWROOM側には影響はありません。SHOWROOMは配信時にアバターが見える状態のWebページをユーザーのブラウザに送信しています。今回の方法では自身のブラウザに送信されたHTMLファイル編集しているだけです。

ThumbSHOWROOMでアバターを入手する方法まとめ【簡単】
SHOWROOMを始めたばかりだとアバターも良いものが選べません。SHOWROOMでアバター...

SHOWROOMの視聴中の「アバター」を消す/非表示にする方法~Stylish操作~

Stylishを利用してSHOWROOMの視聴中の「アバター」を消す/非表示にする方法を紹介します。

Stylish操作の手順

Stylish操作の手順を紹介します。この方法はアバターを消すのではなく下に下げる操作になります。

ストアアプリをダウンロード
Stylish - Custom themes for any website – Firefox (ja) 向け拡張機能を入手

スタイルシート作成

スタイルシート作成

スタイルシート作成を行います。まずはアプリストアからStylishを入手してください。

Google ChromeでPC版SHOWROOMへアクセス

Google ChromeでPC版SHOWROOMへアクセスします。スマホではできないので注意が必要です。スマホでChromeを使ってもできないのでPCで行いましょう。

色が入ったStylishアイコンクリック

色が入ったStylishアイコンをクリックします。

縦3つアイコンクリック

縦3つのメニューアイコンをクリックします。

スタイルを作るクリック

スタイルを作るをクリックします。

セレクションコード1欄にスタイルシート入力

セレクションコード1欄に実際のCSSのコードを入力します。下記のコードを入力してください。

#js-room-video { z-index: 10000; }
#telop { top: 62px; }                     
#js-avatar { bottom: -20px; }         

保存クリック

最後に保存をクリックして保存します。

再編集手順

再編集手順を紹介します。

Stylishアイコンクリック

Stylishアイコンをクリックします。

インストールされたスタイルから鉛筆アイコンクリック

インストールされたスタイルから鉛筆アイコンクリックして編集画面を表示させます。

上級者向け操作設定

上級者向け操作設定を紹介します。ボックス等が見えなくなる可能性や重要な情報を見逃すこともあるので注意が必要です。

各要素のz-index値(規定値)作成

各要素のz-index値(規定値)を作成します。各値は下記のとおりです。

  • テロップ:1
  • ユーザーアバター:5
  • ギフト効果:5
  • ギフトエリア(ギフティングボックス):10
  • アラートダイアログ:300
  • ボーナスゲット表示:1000

スタイルシート作成

スタイルシートのCSSコードは下記のようにしてください。

#telop { z-index: 10001; }   
#js-avatar { display: none; }

Import用Mozilla Formatコード作成

Import用Mozilla Formatコードは下記のようにしてください。

@-moz-document domain("www.showroom-live.com")  {
    #js-room-video { z-index: 10000; }                          
    #telop { top: 65px; }                                              
    #js-avatar { bottom: -30px; }                                  
}                                                                              

SHOWROOM視聴中の「アバター」を消す/非表示の注意点

SHOWROOM視聴中の「アバター」を消す/非表示の注意点です。

スマホからはできない

スマホからは仕様が異なるので操作ができないので注意が必要です。

各方法は自己責任

アカウント停止や公式側の仕様変更でバグる可能性があるので自己責任で行ってください。

すべてのPC機器に有効とは限らない

各メーカーPCで有効という保証はないのでこちらも自己責任で行ってください。

合わせて読みたい!アプリに関する記事一覧

Thumb【Amazon Music HD】「排他モード」をPCアプリに対応!
「Amazon Music HD」のPC用アプリにて「本来の音質で再現する」という「排他モー...
Thumb【iPhone SE(第2世代)】ポートレートモードが人物以外をアプリで撮影可能に!
iPhone SE(第2世代)のポートレートモードは人物のみに対応していましたが、人物以外を...
Thumb「Facebook」のゲーム専用アプリを前倒し!巣ごもり需要高まりで公開!
人気のSNSサイト「Facebook」のゲーム専用アプリを前倒しで公開すると発表をしました。...
Thumb「偽Zoom」のアプリを使った詐欺!ダウンロードページなど解説!
ビデオ会議ツール「Zoom」について独立行政法人「情報処理推進機構(IPA)」は、「Zoom...

関連するまとめ

Original
この記事のライター
suncat
インステ