OBSのDiscord通話相手立ち絵表示ジェネレーター

Discordで通話中のメンバーをOBS Studioに表示するときに、立ち絵で表示するためのカスタムCSSをつくるジェネレーター

アイコンの見た目に変えたいときはこちら / テキストチャンネルの見た目を変えたいときはこちら

立ち絵変更ユーザ

ひとりだけ表示
DiscordユーザID *
メモ書き
※ なくてもOK
画像URL *
Discordに貼った画像のURL
口パク画像URL
※ なくてもOK

話すときの動き
動きの速さ
枠・後光の色
名前を隠す
静かな人を暗くする

高度なオプション

画像の大きさを制限

立ち絵未設定の人を表示

ユーザ（クリックで切替え）

:root {
  /* 画像のみ変更したいときはここのURLを書き換える */
  /* 000000000000000000  */
  --img-stand-url-000000000000000000: url("/assets/trance_alfe-3kJfmZCo.png");
  --img-mouth-url-000000000000000000: url("");
}

/* ここから下は見た目の変更用CSS */
body, #root {
  overflow: hidden !important;
}
[class*="Voice_voiceStates__"] {
  display: flex; 
  align-items: flex-end; 
  padding: 16px;
} 
[class*="Voice_voiceState__"] {
  height: auto; 
  margin-bottom: 0px;
} 
[class*="Voice_avatar__"] {
  filter: brightness(70%);
} 
[class*="Voice_avatarSpeaking__"] {
  position: relative; 
  filter: brightness(100%); 
  animation: 750ms infinite alternate ease-in-out speak-light,750ms infinite alternate ease-in-out speak-jump; 
  animation-duration: 750ms;
}  
[class*="Voice_name__"] {
  display: none;
}

img {
  display: none;
}

img[src*="avatars/000000000000000000"] {
  content: var(--img-stand-url-000000000000000000);
  display: block;
  width: auto;
  height: auto;
  max-width: 400px;
  border-radius: 0;
  border: none;
}
img:not([src*="avatars/000000000000000000"]), img:not([src*="avatars/000000000000000000"]) + [class*="Voice_user__"] {
  display: none;
}
@keyframes speak-jump {
  0% {
    bottom: 0px;
  }
  50% {
    bottom: 10px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes speak-light {
  0% {
    filter: drop-shadow(0 0 2px #FFFFFF);
  }
  50% {
    filter: drop-shadow(0 0 8px #FFFFFF);
  }
  100% {
    filter: drop-shadow(0 0 2px #FFFFFF);
  }
}