Discordで立ち絵を跳ねさせる方法

By deruz3, 2021年2月25日

Discordを起動しよう

左したのウィンドウより、歯車を選びます。

次に”テーマ→開発モード”をONにします。

 

Discordで光らせる人のURLを取得する

Discord StreamKit Overlayにアクセスします。
Install for OBSをクリックしましょう

１、VOICE WIDGETを選択します。
２、配信等で使用するServerを選択します。
３、サーバー内で使用するルーム（通話）チャンネルを選択しましょう。

オプションで上から、Show Speaking Users Onlyは話してる時のみ表示
少しちいさく表示するSmall Avatars
アイコンを残したまま、名前部分を消す、Hide Namesがあります。
お好みに合わせて設定しましょう。

設定が終わったら画面右下にあるアドレスをコピーしておきます。
これは後で使うので、メモしておきましょう。

OBSに取得したURLを追加する

OBSを起動します。
ソースから＋ボタンを押します。

ブラウザを追加します。

ソース作成で、新規作成を選び、名前は自分の好きな名前を入れましょう。
ここではDiscord 立ち絵光るになってますが、自分の分かりやすい名前を入れましょう。

URL部分に先程Discord StreamKit Overlayで作ったURLを貼り付けます。

カスタムCSSの設定を追加する

光らせたい人のDiscord IDを取得します。
“IDをコピー”を選択します。
ここで使用する番号（ID）とさきほどDiscord StreamKit Overlayで取得したURLを使います。

カスタムCSSを追加する
“ディスコードのID”　部分を”383922260000000000″など、光らせたい人のIDを入れます。
“立ち絵のリンク”にはディスコードに”立ち絵”などの固定リンクページを用意します。
そこのURLを”立ち絵のリンク”に入れます。

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
li.voice-state:not([data-reactid*="ディスコードのID"]) { display:none; }
.avatar {
  content:url("立ち絵のリンク");
  height:auto !important;
  width:95% !important;
  border-radius:0 !important;
  filter: brightness(50%);
}
.speaking {
  border-color:rgba(0,0,0,0) !important;
  position:relative;
  animation-name: speak-now;
  animation-duration: 300ms;
  animation-fill-mode:forwards;
  filter: brightness(100%) ;
}

@keyframes speak-now {
  0% { bottom:0px; }
  50% { bottom:10px; }
  100% { bottom:0px; }
}
li.voice-state{ position: static; text-align: center;}
div.user{ display: none; }
body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }

これで通話中にアイコンが光る様になります。