大人数の時使うオーバーレイのカスタムCSS
大規模コラボ用のカスタムCSSを作ってみました
手っ取り早くほしい人は一番下の方の使い方まで飛んでくださいね
元のCSSがあるのでURL貼りますね
順風満帆丸さんの萬巓堂本店の
「DISCORDで喋ってる人を分かり易くするカスタムCSS」http://manten-do.net/contents/dsk01
をヒントに作りました
Discord STREAMKIT Overlayを使ってカスタムCSSで変更を加えているんですね
なのでCSSを変えれば色々変えれるんです
実は 100人記念コラボしたときに自分含めて5人でお話ししたときに思ったのは
「IDと立ち絵登録面倒・・・」
凸に入る時に
「まって、今登録してるから」っていって待ってもらわなきゃいけなかったのでテンポが悪かったです
オーバレイの内容をCSSで変えて見やすくできる他の方法がないか考えてみます
まず目標を定めます
１ 上のカスタムCSSみたいに光ってぴょこぴょこはそのまま
２ ID登録とかちょっと今回はやらないようにする
３ いつもの小さい縦じゃなくて大きく横に並べるようにする
４ 名前もできれば表示
１ぴょこぴょこはそのまま
ぴょこぴょことかは前回買い換えたものがあるのでそれをそのままコピペします
どういう動きをするかというと
しゃべると光る（正確には暗かったものが普通になる）しゃべると5秒間ぴょこぴょこ動く
２ID登録とか今回はやらない
今回は個人を特定することはしないのでユーザーID（#と数字のタグとは別）と画像を登録しないのでごっそり省きます
３大きく横に並べる
今回はアイコンを200×200で表示しますのでavatarの縦と横を変えます
線とか明るさは変えないです
そして！ここ重要！
リストの li.voice-state のCSSに display:inline-block; を追加します
これは簡単に言うと 「リストを縦から横に変える」 ってことです
やったよ・・・これで横に並ぶよ・・・
４名前を表示する
普通に表示させるとなんかごちゃごちゃしちゃいます
もう、大変だった
ずっとコレジャナイあれじゃないトライ＆エラーです
分かったと思ったら違って違うと思ったら近づいて・・・目がしょぼしょぼするよ
面倒ですので結論と専門的なのは簡潔にだけ
できました
display: inline-block;で横に並べて
position: relativeで移動させて・・・出来た
つまり何がいいたいかというと
一日かけて恐ろしく大変で疲れた！！！！
その結晶をここに乗せます
もし名前を消したいときは
span.nameの{}の中身を
{display:none;}
に変えてくださいね
none;で消すって意味です
使い方
１ DiscordSTREAMKITOverlayのURLをOBSのブラウザに入れる
２ ここの下のカスタムCSSをOBSのブラウザのカスタムCSS の欄にコピー＆ペーストで入れる
３ ブラウザの大きさは縦を200に設定する。横はどこまでもOK
４ 参加者はアイコンを透過されているバストアップの立ち絵に変えてもらう
５ 通話参加者は名前付きでぴょこぴょこできるよ！
というわけで完成したカスタムCSSです
大人数の雑談コラボや 大規模コラボゲーム配信などでどうぞ
/*アバターの大きさと明るさを決めるよ あと線を消してるよ*/
.avatar {
height:200px !important;
width:200px !important;
border-radius:0 !important;
filter: brightness(70%);
}
/*しゃべったときの状態の設定してるよ*/
.speaking {
border-color:rgba(0,0,0,0) !important;
position:relative;
animation-name: speak-now;
animation-duration: 5000ms;
animation-fill-mode:forwards;
filter: brightness(100%) ;
}
/*しゃべってるときのアニメーションの設定だよ*/
@keyframes speak-now {
0% { bottom:0px; }
5% { bottom:10px; }
10% { bottom:0px; }
15% { bottom:10px; }
20% { bottom:0px; }
25% { bottom:10px; }
30% { bottom:0px; }
35% { bottom:10px; }
40% { bottom:0px; }
45% { bottom:10px; }
50% { bottom:0px; }
55% { bottom:10px; }
60% { bottom:0px; }
65% { bottom:10px; }
70% { bottom:0px; }
75% { bottom:10px; }
80% { bottom:0px; }
85% { bottom:10px; }
90% { bottom:0px; }
95% { bottom:10px; }
100% { bottom:0px; }
}
/* アバター及びネームタグ表示位置調整だよ*/
li.voice-state{
position: static;
display: inline-block;
width: 200px;
height: 200px;
}
.user{
display: inline-block;
}
span.name{
display: inline-block;
position: relative;
bottom: 70px;
}
/* 色々消すヤツ */
body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }
/*＊＊＊＊＊カスタムCSS終わり＊＊＊＊＊*/```