discordでしゃべってる時に光ってるアイコンをOBS上で調整する方法！

みなさんこんにちは！
Youtubeでスプラトゥーンのガチマッチ配信、解説動画をアップしている「のらまに」と申します！

先日、ゲスト（ダズさんとLdarkさん）をお呼びして行ったコラボ配信で、
誰がしゃべっているのかわかるように、
しゃべっている人のdiscordアイコンが光ってぴょこぴょこ動くような画面を作成したところ、
わりと好評をいただいたので、今回はその方法を紹介したいと思います。

実際の画面は、下記の動画アーカイブからご覧ください。

基本の設定

さて、
と、まぁ、
紹介する
と言っても、
実は大部分は下記の記事

OBS StudioにDiscordで通話中のメンバーを横並びに表示して、ぴょこぴょこ動かす方法｜T.T｜note

を参考にさせていただいておりましたので、
基本的には上記の記事を参照してもらえればと思います。

上記記事の通りにOBSで設定を行うと、
AmongUs配信者さんが良くやっているような、
間隔(スペース)なく横並びにアイコンが並んだ表示になります。

スプラトゥーンの配信は複数人でやる場合も、おそらく4人くらいまででやることが多いので、これだとちょっと、
ぎゅーぎゅーすぎるかなという印象だったので、
アイコンごとにスペースを空けたいな
というのが一点

もう一点は、
表示が小さすぎるので大きくしたいな
というところがあり、これを調整したいと思って、
実際に調整に成功しましたので、説明したいと思います。

調整方法

OBS上の表示はカスタムCSSで行われますので、

CSSの知識がある方であれば自由に調整可能だと思いますが、知識が無いとなかなか難しいと思います。

下に軽く説明を書きますが、よーわからんという人は「調整したカスタムCSS」まで進んでもらって、細かい値を調整したい時に戻ってきても大丈夫です！

（１）表示が小さすぎるので大きくする

（１－１）.avatar の height、width の値を調整（両方100px）
（１－２）span.name に font-size を追加（21px）
（１－３）span.name の width、height、line-height の値を調整（91px、25px、21px）
（１－４）li.voice-state の width、height の値を調整（100px、120px）

まずは（１－１）でアイコンの大きさを決めて、それに合わせて以降調整するのが良さそうです。
上記の設定ではdiscord名が4文字くらいまでは問題なく表示できました。

追加部分がわかりづらいと思うので、記載すると

span.name{
display: inline-block;
position: relative;
width: 55px;
height: 17px;
line-height: 17px !important;
white-space: nowrap;
text-overflow: clip;
text-align: center;
background-color: rgba(0,0,0,0) !important;
padding: 0 !important;
overflow: hidden;
}

この部分はこんな感じになります。

span.name{
display: inline-block;
position: relative;
width: 91px;
height: 25px;
line-height: 21px !important;
font-size: 21px !important;
white-space: nowrap;
text-overflow: clip;
text-align: center;
background-color: rgba(0,0,0,0) !important;
padding: 0 !important;
overflow: hidden;
}

この部分以外は値を変えるだけです！

（２）アイコンごとにスペースを空ける

li.voice-state に margin を追加します。
具体的には
margin: 0px 10px 0px;
という記述。

追加場所はこの部分です。

/* アバター及びネームタグ表示位置調整だよ*/
li.voice-state{
width: 100px;
height: 120px;
position: static;
display: inline-block;
}

ここに

/* アバター及びネームタグ表示位置調整だよ*/
li.voice-state{
width: 100px;
height: 120px;
margin: 0px 10px 0px;
position: static;
display: inline-block;
}

こんな感じで追加します。

3つの値を設定しているのは、上・右・下の間隔になります。
なので、左右の間隔を開けたい場合は、
この2番目の「10px」の部分の値を大きくしてもらえればOKです。

（３）しゃべってない時のアイコンをもう少し暗くする

上では書かなかったのですが、
しゃべってない時のアイコンと、しゃべってる時のアイコンは、
明度の差が、よりあったほうがわかりやすく感じると思ったので、
しゃべっていない時のアイコンをもう少し暗くしておきます。

これは
・.avatar の filter: brightness の値を調整します（50%）
70%になっている部分を50%に変更するだけなので、簡単ですね！

調整したカスタムCSS

調整した結果のカスタムCSSは下記のような感じになりました。

ここまでの説明はすっ飛ばして、下記のCSSを、カスタムCSS欄に貼り付ければ、最初に示した感じの表示はできるということになります！

/*＊＊＊＊＊カスタムCSS＊＊＊＊＊*/
/*アバターの大きさと明るさを決めるよ　あと線を消してるよ*/
.avatar {
height:100px !important;
width:100px !important;
border-radius:10px !important;
filter: brightness(50%);
}
/*しゃべったときの状態の設定してるよ*/
.speaking {
border-color:rgba(0,255,0,0.7) !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{
width: 100px;
height: 120px;
margin: 0px 10px 0px;
position: static;
display: inline-block;
}
.user{
background: rgba(0,0,0,.7);
padding: 4px 5px 0px !important;
border-radius: 4px;
display: inline-block;
}
span.name{
display: inline-block;
position: relative;
width: 91px;
height: 25px;
line-height: 21px !important;
font-size: 21px !important;
white-space: nowrap;
text-overflow: clip;
text-align: center;
background-color: rgba(0,0,0,0) !important;
padding: 0 !important;
overflow: hidden;
}
body {
background-color: rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
overflow: hidden;
}
/*＊＊＊＊＊カスタムCSS終わり＊＊＊＊＊*/

まとめ

ということで、「discordでしゃべってる時に光ってるアイコンをOBS上で調整する方法！」について記事を書いてみましたがいかがでしたでしょうか。
不明な点とかがあれば、TwitterのDMや、Youtubeのコメントで聞いてくれれば、もしかしたら答えが返ってくるかもしれません。
参考になったよ、という方がいれば、ぜひ拡散もお願いします！