トップ/stream/discord_streamkit

stream/discord_streamkit

最終更新: 2026-07-14 (火) 20:27:09

VC参加者のアイコンを表示する#

  • Discord StreamKit Overlay を開き > Install for OBS をクリック
  • VOICE WIDGET タブを選択 > Server と Voice Channel を選択
  • 発行された browser source をコピーして OBSのソース追加 > ブラウザ でURLをペースト

参考 : OBSにDiscordをオーバーレイ表示する方法 | Raison Detre
参考 : Discordウィジェットを凸待ち用にしてくれるカスタムCSS

最近使ってるカスタムCSS#

いままでずっとDiscordアイコン表示のテキストがズレてたんですが、全体のサイズを 80x80 → 90x90 にしてOBS側で縮小したら多分いい感じになりました。

icon_before.png icon_after.png

ul[class*="States"] {
  display: flex;
} 
li[class*="State"] {
  display: flex; 
  flex-direction: column; 
  height: 90px;
} 
img[class*="avatar"] {
  filter: brightness(70%); 
  border-radius: 8px; 
  width: 90px; 
  height: 90px;

} 
img[class*="Speaking"] {
  position: relative; 
  animation: 300ms infinite alternate ease-in-out speak-light; 
  filter: brightness(100%); 
  border-color: rgba(255,255,255,.75); 
  animation-duration: 300ms;
} 
span[class*="name"] {
  max-width: 90px; 
  box-sizing: border-box; 
  text-overflow: clip; 
  white-space: nowrap; 
  overflow: hidden; 
  display: block; 
  text-align: center; 
  top: -10px; 
  left: 2px;
  position: relative;
  font-size: 40px;
}
@keyframes speak-light {
  0% {
    box-shadow: 0 0 4px blue;
  }
  50% {
    box-shadow: 0 0 16px blue;
  }
  100% {
    box-shadow: 0 0 4px blue;
  }
}
添付ファイル: icon_after.png 19件 [詳細] icon_before.png 21件 [詳細]
  • Bluesky
  • Hatena