【OBS】何にでも使えるシンプルなコメント枠「SIMPLE CHAT BOX」【コメント欄/配信画面素材】
- フリー版Digital0 JPY
- 支援版Digital500 JPY
配信画面を作る時にコメント欄を使いたいと思ったけれど、作ったりした画面のサイズにあったコメント欄がなかった時ってありませんか？ そんな時に便利なコメント欄を作りました！ コメント欄のサイズ、色、テキスト、文字サイズ、角の丸み、全てをカスタマイズ出来るコメント欄です！
設置方法
設置方法は簡単です。解凍して出来た、[ ktx_cb01.html ]をOBSへドラッグ＆ドロップして読み込みするか、OBSの追加>ブラウザからHTMLファイルを読み込んでください。 読み込みサイズは配信画面に合わせて変更してください。 例：横幅200px高さ500pxなど
カスタマイズ方法
カスタマイズ方法は、カスタムCSSに下記の下記のCSSをカスタムCSSに入力してカスタマイズします。 :root { --main_color:#333; --text_color:#fff; --round:10px; --font_size:clamp(16px, 6vw, 30px); --h1_text:"COMMENTS"; }
枠の色を変更する
枠の色を変子したい場合は[ --main_color: ]以降の[ #333 ]を変更してください。 :root { --main_color:#333; }
文字の色を変更する
文字の色を変更したい場合は[ --text_color: ]以降の[ #fff ]を変更してください。 :root { --text_color:#fff; }
文字サイズを変更する
文字の色を変更したい場合は[ --font_size: ]以降の[ clamp(16px, 6vw, 30px) ]を変更してください。 :root { --font_size:clamp(16px, 6vw, 30px); } 横長のチャットボックスを設置する時に便利です。 例： :root { --font_size:14px; }
角の丸みを変更する
角の丸みを変更したい場合は[ --round: ]以降の[ 10px ]を変更してください。 :root { --round:10px; }
テキストを変更する
テキストを変更したい場合は[ --h1_text: ]以降の[ COMMENTS ]を変更してください。 :root { --h1_text:"COMMENTS"; } 注意：前後にある"は削除しないでください。