Discord Streamkit Overlay の Voice Widget を、自分が対象のボイスチャンネルに接続（参加）しているときだけ表示するように、OBSのブラウザソースにカスタムCSSを設定します。

Among Usの生存者VCと霊界VCの自動切り替えや、メンバー入れ替えありの複数卓VCの行き来などで便利です。

すでに他のカスタムCSSを使用している場合は、コードの統合が必要で複雑なため、この記事では対象としません。 利用しているカスタムCSSのジェネレーターなどがあれば、対応する設定がないか確認してください。

環境

  • Windows 11
  • OBS Studio 32
  • Discord Streamkit Overlay Voice Widget (2026年1月26日時点)

手順

  1. Discord Streamkit Overlay にアクセスし、通常通りVoice WidgetのURLを取得します。

  2. OBSを開き、通常通り、ブラウザソースとしてVoice WidgetのURLを追加します。

  3. 追加したブラウザソースのプロパティを開き、カスタムCSS欄に以下のコードを追加する形で貼り付けます。

    /* ここから */
/* うまく動作しなくなったら、以下を削除してください */
/* 自分がボイスチャンネルに接続していないときに、ボイスウィジェットを非表示にするカスタムCSS */
body {
  opacity: 1;
  transition: opacity 150ms linear;
}
body:not(:has([data-userid="YOUR_USER_ID_HERE"])) {
  opacity: 0;
}
/* ここまで */

  4. Discord（デスクトップアプリケーション）の設定を開き、「詳細設定」から、「開発者モード」を有効にします。

  5. Discordウインドウの左下にある自身のアイコンをクリックして、「ユーザーIDをコピー」を選択し、自分のユーザーID（数値）をクリップボードにコピーします。

  6. Discord の設定を開き、「詳細設定」から、「開発者モード」を無効に戻します。

  7. カスタムCSSのうち、YOUR_USER_ID_HERE の部分を、手順5でコピーした自分のユーザーIDに置き換えます。

  8. 複数のボイスチャンネルで利用したい場合は、同じ手順を繰り返して、各ブラウザソースにカスタムCSSを設定します。

設定例

/* OBSのデフォルトカスタムCSS */
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

/* ここから */
/* うまく動作しなくなったら、以下を削除してください */
/* 自分がボイスチャンネルに接続していないときに、ボイスウィジェットを非表示にするカスタムCSS */
body {
  opacity: 1;
  transition: opacity 150ms linear;
}
body:not(:has([data-userid="1234567890"])) {
  opacity: 0;
}
/* ここまで */

トラブル時の対処

Discord Streamkit Overlayの仕様変更やOBSのアップデートなどにより、うまく動作しなくなる場合があります。

その場合は、上記のカスタムCSSのうち、/* ここから */ と /* ここまで */ の間のコードを削除して、デフォルトのカスタムCSSに戻してください。

/* OBSのデフォルトカスタムCSS */
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }