Help us understand the problem. What is going on with this article?

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

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

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

元の記事

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

経緯

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

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

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

なので
カスタムCSSの内容を変えて見やすくできる他の方法がないか考えてみます

まず目標を定めます

1 上のカスタムCSSみたいに光ってぴょこぴょこはそのまま
2 ID登録とかちょっと今回はやらないようにする
3 いつもの小さい縦じゃなくて大きく横に並べるようにする
4 名前もできれば表示

1ぴょこぴょこはそのまま

ぴょこぴょことかは前回買い換えたものがあるのでそれをそのままコピペします
どういう動きをするかというと
 しゃべると光る(正確には暗かったものが普通になる)しゃべると5秒間ぴょこぴょこ動く

2ID登録とか今回はやらない

今回は個人を特定することはしないのでユーザーID(#と数字のタグとは別)と画像を登録しないのでごっそり省きます

3大きく横に並べる

今回はアイコンを200×200で表示しますのでavatarの縦と横を変えます
線とか明るさは変えないです
そして!ここ重要!
リストの li.voice-state のCSSに display:inline-block; を追加します
これは簡単に言うと 「リストを縦から横に変える」 ってことです
やったよ・・・これで横に並ぶよ・・・

4名前を表示する

普通に表示させるとなんかごちゃごちゃしちゃいます
もう、大変だった
ずっとコレジャナイあれじゃないトライ&エラーです
分かったと思ったら違って違うと思ったら近づいて・・・目がしょぼしょぼするよ
面倒ですので結論と専門的なのは簡潔にだけ

できました

display: inline-block;で横に並べて
position: relativeで移動させて・・・出来た

つまり何がいいたいかというと
一日かけて恐ろしく大変で疲れた!!!!
その結晶をここに乗せます
もし名前を消したいときは
span.nameの{}の中身を
{display:none;}
に変えてくださいね
none;で消すって意味です

使い方

1 DiscordSTREAMKITOverlayのURLをOBSのブラウザに入れる
2 ここの下のカスタムCSSをOBSのブラウザのカスタムCSS の欄にコピー&ペーストで入れる
3 ブラウザの大きさは縦を200に設定する。横はどこまでもOK
4 参加者はアイコンをグリーンバックされているバストアップの立ち絵に変えてもらう
5 ブラウザのフィルタに緑のクロマキーを追加する
これで、通話参加者は名前付きでぴょこぴょこできるよ!

というわけで完成したカスタム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となる数字の羅列をコピーできます
(技術者さんは当たり前にわかるかもですが 私の場合、技術者さん以外も見る可能性がありますのでご容赦ください)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away