Discordで喋ってる人を分かり易くするカスタムCSS

（2019/09/01追記）本記事の内容はこちらにてツール化してます。画像URL・DiscordのユーザID取得、配信ツールへの設定方法が理解できた方はツールの方をブックマークした方が楽になるかもしれません。

（2023/01/28追記）StreamKit側の仕様変更に伴い、最新版に合わせた仕様に変更しています。変更内容については下記記事に掲載していますので、改変などされる場合はこちら参考にしてみてください。

DISCORDで喋ってる人を分かり易くするカスタムCSS（2023年最新）

Discordのストリームキットで配信ツール上に表示される発言者を分かり易くするという手法はメジャーなものかと思いますが、それをさらにカスタムCSSで「アイコン」から「立ち絵」に改造できたのでご紹介。

以下の右側（発言毎に跳ねる魔理沙ちゃん）のような動きをするカスタムCSSを例に設定手順を掲載します。

Discordのボイスウィジェットの画像を任意の立ち絵に変えて、発話状態に応じてアニメーション付けたり明度を変える奴。

ストリームキットとOBSのカスタムCSSだけで完結するし案外楽ですね。 pic.twitter.com/claRvmZTL0
— 順風まんぱん丸⛵ (@junpoo_mangpang) July 3, 2019

（2019/11/11追記）IDのコピーはDiscordで「開発者モード」を有効にしていないと実行できません。開発者モードは[ユーザー設定]＞[アプリの設定]＞[テーマ]で有効にできます。
教えてくれた鎌足さん（ @kamatari_san ）、ありがとうございます！

カスタムCSS作成

⑦ 以下のソースを編集（[⑥で控えたID]、[⑤で控えた画像URL]の二か所修正）

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  position:relative;
  animation-name: speak-now;
  animation-duration: 1s;
  animation-fill-mode:forwards;
}

@keyframes speak-now {
  0% { bottom:0px;  }
  15% { bottom:10px;  }
  30% { bottom:0px;  }
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

配信ツールへ取り込み（OBSの場合）

⑧ ソースから[ブラウザソース]選択（ソース名は任意）

⑨ URLに「③」で控えたURLを指定

⑩ カスタムCSSに「⑦」で編集したソースを貼り付け

手順は以上。

対象のユーザがDiscord通話に参加していれば動く立ち絵が表示されるはずです。
ちょっと手間ですがコラボなんかの際は上記手順を人数分実施します。

因みに最初に紹介した動画の左側（発言毎に明るくなる霊夢ちゃん）のような挙動をさせる場合は⑦で編集するCSSを以下に差し替えればできます。

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
  filter: brightness(50%);
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  filter: brightness(100%);
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

明るさ変わる方が分かり易そうだけど、雑音とか拾って発話状態繰り返したら画面チカチカしないか心配。。。

なんとなく想像つくかもしれませんが、「.avatar」が通常時の立ち絵に関する設定で「.speaking」がしゃべってる最中の表示に関する設定です。

細かい解説は本記事では省きますが、弄る場所さえ分かっていればあとは使えるCSSを増やすだけ。
もっと上手な書き方ある気がしますが、取り合えずこれで動作するのでヨシとします。

演出のバリエーションが増えたら使いやすい形で配布とか生成ツールの作成をしたいと考えてます故、気長にお待ちくださいまし。

是非お試しいただき、配信活動にお役立てください。

それでは、以上。

Discordで喋ってる人を分かり易くするカスタムCSS

目次

ボイスウィジェット取得

立ち絵・ユーザ情報取得

カスタムCSS作成

配信ツールへ取り込み（OBSの場合）