歌枠用セットリスト表示「SIMPLE SONG LIST」

歌枠で歌った歌のリストを表示するHTMLです。

OBSにブラウザで読み込んで、入力画面から入力すると、リストに反映されるシンプルなヤーツです！！

見たとおりとってもシンプルでカスタマイズも出来るので、どんな画面にも合わせやすくて使いやすいと思いたい！！気軽に使ってね！

設置の仕方

設置の仕方は簡単！

OBSに2つのHTMLファイルをドラッグアンドドロップしてサイズとかをちょっと調整するだけ！！

■ input.html

・幅：350px～500px　高さ：440px

・カスタムCSSは削除

・ソースの一番後ろに置いて見えないように

■ view.html

・幅：700px　高さ：750px

・元々入っているカスタムCSSのbodyは削除しないでください。

使い方

画像の二枚目のように、input.htmlのブラウザソースをクリックすると、対話が表示されます。

そうすると、ブラウザを操作出来る画面が出てきますので、この画面にコピペやクリックして操作します。

基本的にCtrl + V で貼り付けが出来る想定ですが、バージョンによっては、Alt + Vになる場合もあります。

カスタム方法

view.htmlは、カラーを自由に設定する事ができます。

基本的なカスタマイズ方法は、

:root {

--title_color: #fff;

--title_gbc: #333;

}

こんな感じで、rootの中に入れます！！

■ タイトルの文字色を変えたい！

--title_color: #fff;

■ タイトルの背景色を変えたい！

--title_gbc: #333;

■ リストの文字色を変えたい！

--list_color: #333;

■ リストの背景色を変えたい！

--list_bgc: #fff;

■ ハーフサイズにしたい！

--area_size: 320px;

--title_area_size: 80%;

クレジット等

クレジット表記や使用報告は不要です。

気軽に使ってください。

気が向いたら、フォローなんかしてもらえたらめっちゃ嬉しいです！！

https://twitter.com/kentax

その他のおすすめ素材

VTuberさん向け雑談配信画面用素材セット「Calm chatter」BGM付

https://kentax.booth.pm/items/4449291

VTuberさん向けスティンガーセット「CYBER STINGER vol.01」シーン切替え映像

https://kentax.booth.pm/items/4545340

わんコメテンプレート14種セット「KTX-ONE vol.01」

https://kentax.booth.pm/items/4466252