Discordでウォッチパーティー風の画面を作成する

Chrome系ブラウザで使用できる拡張機能「Stylus」を使用して、アマプラのウォッチパーティー画面を再現します。

https://scrapbox.io/files/662e1a9ce88a1c0026cee7b3.png

Stylusのダウンロードおよびインストールはこちらから

インストール後、ブラウザの拡張機能ボタンにStylusが追加されたのを確認したら

3　「/* ここにコードを挿入... */」というテキストがあるので、その直下に

.wrapper__216eb{visibility: hidden; position: absolute;}

.sidebar_e031be{visibility: hidden; position: absolute;}

を挿入して、左上の「保存」をクリックし保存する

スタイル名はご自由に変更どうぞ

あとはブラウザの画面分割機能で左側に映像鑑賞ページ、右側にStylus適用したDiscordページを並べましょう。

非表示にした部分を再度表示したいときは、Stylusのチェックを外してください。

☆おまけ : コメント入力欄の各種ボタンを非表示にする

上記「3」にあるコードの直下に

.buttons__7ecff{visibility: hidden; position: absolute;}

を追記すると[* コメント入力欄にある各種ボタン（絵文字など）が非表示になります。

自身の使用頻度と照らし合わせてご利用ください。

ありがとうございます！

※2024/08/04 追記

Discordページの名称がいつからか変更されていたらしく、上記のコードでは非表示にできなくなりました。

今自分が使っているコードは

.wrapper_fea3ef.guilds_a4d4d9{visibility: hidden; position: absolute;}

.header_fd6364{visibility: hidden; position: absolute;}

.channelNotice_f013f3{visibility: hidden; position: absolute;}

.sidebar_a4d4d9{visibility: hidden; position: absolute;}

.scroller_c43953{visibility: hidden; position: absolute;}

.panels_a4d4d9{visibility: hidden; position: absolute;}

.title_a7d72e{visibility: hidden; position: absolute;}

.contents_dd4f85.button_cecf00.button_d0696b{visibility: hidden; position: absolute;}

.expression-picker-chat-input-button.buttonContainer_d0696b{visibility: hidden; position: absolute;}}

こちらとなります。スタンプボタン等も全部消えるので、必要なものがある場合は調整してみてください。

※2025/02/01 追記

再び名称変更のためコードの値を変更しました。

.wrapper_ef3116.guilds_c48ade{visibility: hidden; position: absolute;}

.header_f37cb1{visibility: hidden; position: absolute;}

.container__2637a{visibility: hidden; position: absolute;}

.container__37e49{visibility: hidden; position: absolute;}

.sidebar_c48ade{visibility: hidden; position: absolute;}

.title_f75fb0.container__9293f.themed__9293f{visibility: hidden; position: absolute;}

※2025/04/07 追記

web版のデザイン変更があったため、上記コードに以下のものを追加で記入してください。

.sidebarList_c48ade.sidebarListRounded_c48ade{visibility: hidden; position: absolute;}

※2025/11/02

名称変更のためコードの値を変更しました。

.wrapper_ef3116.guilds_c48ade{visibility: hidden; position: absolute;}

.header_f37cb1{visibility: hidden; position: absolute;}

.container__2637a{visibility: hidden; position: absolute;}

.container__37e49{visibility: hidden; position: absolute;}

.sidebar__5e434.theme-light.images-light{visibility: hidden; position: absolute;}

.title_f75fb0.container__9293f.themed__9293f{visibility: hidden; position: absolute;}

.trailing_c38106{visibility: hidden; position: absolute;}

.button_e6e74f.button__201d5.lookBlank__201d5.colorBrand__201d5.grow__201d5{visibility: hidden; position: absolute;}

.buttons__74017{visibility: hidden; position: absolute;}

.contents__201d5.button__24af7.button__74017{visibility: hidden; position: absolute;}

.sidebarList_c48ade.sidebarListRounded_c48ade{visibility: hidden; position: absolute;}}

※2025/12/23

名称変更のためコードの値を変更しました。

div.c38106a3f0c3ca76-trailing{visibility: hidden; position: absolute;}

div._740174f3d6a2c8fe-buttons{visibility: hidden; position: absolute;}

div.f75fb00fb7356cbe-subtitleContainer{visibility: hidden; position: absolute;}

div._5e434347c823b592-sidebar.theme-light.images-light{visibility: hidden; position: absolute;}}

※2026/01/27

再び変更です。以前のコードは全て削除してください。

div.sidebar__5e434.theme-light.images-light{visibility: hidden; position: absolute;}

div.subtitleContainer_f75fb0{visibility: hidden; position: absolute;}

div.buttons__74017{visibility: hidden; position: absolute;}}

※諸注意※

・アプリやサイドバー表示ではStylusが適用されません。ブラウザで開くようにしてください。