Discord

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日時点) 手順 Discord Streamkit Overlay にアクセスし、通常通りVoice WidgetのURLを取得します。 OBSを開き、通常通り、ブラウザソースとしてVoice WidgetのURLを追加します。 追加したブラウザソースのプロパティを開き、カスタムCSS欄に以下のコードを貼り付けます。 Discord の設定を開き、「詳細設定」から、「開発者モード」を有効にします。 Discordウインドウの左下にある自身のアイコンをクリックして、「ユーザーIDをコピー」を選択し、自分のユーザーID（数値）をクリップボードにコピーします。 Discord の設定を開き、「詳細設定」から、「開発者モード」を無効に戻します。 カスタムCSSのうち、YOUR_USER_ID_HERE の部分を、手順5でコピーした自分のユーザーIDに置き換えます。 複数のボイスチャンネルで利用したい場合は、同じ手順を繰り返して、各ブラウザソースにカスタム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="YOUR_USER_ID_HERE"])) { opacity: 0; } /* ここまで */ 設定例 /* 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のアップデートなどにより、うまく動作しなくなる場合があります。 ...