大人数の配信時使うDiscordStreamKitOverlayのカスタムCSS

大人数の時使うオーバーレイのカスタムCSS

大規模コラボ用のカスタムCSSを作ってみました
手っ取り早くほしい人は一番下の方の使い方まで飛んでくださいね

元の記事

あるCSSがあってそれを使っていました 順風満帆丸さんの萬巓堂本店の 「DISCORDで喋ってる人を分かり易くするカスタムCSS」 http://manten-do.net/contents/dsk01 です。 Discord STREAMKIT Overlayを使ってカスタムCSSで変更を加えているんですね なのでCSSを変えれば色々変えれるんです

経緯

実は、自分のチャンネルで100人記念で配信した時に自分含めて5人でお話しする機会がありました。その時に思ったのは 「IDと立ち絵登録面倒・・・」 凸に入る時に 「まって、今登録してるから」っていって待ってもらわなきゃいけなかったのでテンポが悪かったです

上のCSSは
・出演者が決まっている
・画面のいろんなところに配置する必要がある
・立ち絵全部見せたい
時に真価を発揮するものだと思うのです

なので今回の雑談みたいに
・通話チャンネルに出たり入ったりする
・別にバラバラじゃなくて横並びでいい
・顔だけ出しておけばいい
っていうときは使い勝手が悪いわけです

なので
カスタム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終わり＊＊＊＊＊*/

19/12/11追記
「配信の時自分はFacerigとかで動いてるからオーバーレイに自分が居たら困る・・・」
と言われたのです
ID使うから最初のコンセプトとは外れますが
もし自分のことを消したい方は

/* 選択したユーザの画像を非表示にする */
li.voice-state[data-reactid$="ここにじぶんのID"] {
 display:none;
}

を先頭に追加してください
そして「ここにじぶんのID」のところをDiscrdの自分のIDにしてください

ちなみに
IDの出し方は
歯車マークの「ユーザー設定」→「テーマ」→「詳細設定」にある「開発者モード」をオンにしてIDを取得したいユーザーを右クリック
「IDをコピー」でIDとなる数字の羅列をコピーできます
（技術者さんは当たり前にわかるかもですが　私の場合、技術者さん以外も見る可能性がありますのでご容赦ください）