【OBS×ココフォリア】前景/背景を非表示にする

※独学/我流。2022年1月現在可能なものになっています。今後同じように使えるかどうかまではわかりませんので、予めご了承ください。
また、質問等も受け付けておりません。自己責任でお願いいたします。

(2022/05/09追記)背景削除に関しては紅坂柚月様がFANBOXにて更新されております。背景削除のみは こちら をご覧ください

01.経緯

CoCの画面をOBSで録画するときに、各キャラクターのHP等をnth……とかで一つずつ指定するのではなく、ステータス一覧をDEX順でまとめて表示したい＆前景/背景画像を非表示したい！と思い。
それらしい記事は見当たらなかったので書いてみました。

例：背景画像が移ってしまう

02.CSS

設定するCSSはこちらです↓

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
.MuiDrawer-papaer{display:none;}
.MuiDialog-paper{display:none;}
.MuiBackdrop-root{display:none;}
.sc-ZOtfp{display:none;}
.sc-bGaVxB{display:none;}

03.OBSへのブラウザ取り込み時のCSS設定

まず、事前準備として「Webページ」を表示させます。
ソース>追加>ブラウザ を選択し、

①"ブラウザ"選択

②"新規作成"を選択し、任意の名前をつけて[OK]をクリック

③URL部にココフォリアのURL、幅"1920"、高さ"1080"を設定
カスタムCSSに上に表記されているコードを貼り付け

④前景/背面ともに非表示となる

⑤Altを押しながら範囲を狭めることで、トリミングできます

4.CSSの説明

{display:none;}で非表示しているだけですが、具体的にどのコードで前景/背景を削除しているか。コメント追記したのがこちらです↓
ご参考まで！

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
.MuiDrawer-papaer{display:none;}
.MuiDialog-paper{display:none;}
.MuiBackdrop-root{display:none;} 
.sc-ZOtfp{display:none;} /*背景を非表示*/
.sc-bGaVxB{display:none;} /*前景やスクリーンパネルを非表示*/

最初に{display:none;}している3項目は参考URLにも記載しております、川犬様のYouTubeより学ばせていただきましたものです。
決まり文句として日々使うようにしております。気になる方は配信をご覧ください。

5.参考元URL

日々お世話になっています！勉強させていただいております！
・OBSでココフォリアを表示させる時のカスタムCSSについて | U7D05 BAR
（紅坂 柚月 様）

OBS設定配信、助かりました！
・【 #TRPG配信画面勉強会 】OBSのテクニックやCSSの作り方/使い方etcについて教えるよ【 VTuber 】
（川犬 様）