OBS StudioにDiscord Streamkit Overlayを組み合わせると、配信画面にDiscordの通話アイコンを表示できる。この通話アイコンの外観をカスタマイズする方法のひとつに、カスタムCSSを使用する方法がある。
カスタムCSSを使えば、アイコンを横並びにしたり、アイコンを四角形にしたり、喋っている人のアイコンをぴょこぴょこ動かしたりできる。オリジナルのカスタムCSSを用意するにはOBSのDiscordアイコン外観変更ジェネレーターという神サイトを使用するのが非常にオススメだ。
さて、外観の変更については前述の神サイトだけでほとんど用が足りるが、それ以外にも次のようなカスタマイズをしたい場合がある。
- 特定のユーザーを非表示にしたい。配信用のサブ垢や読み上げBotなど。
- 特定のユーザーの名前を変更したい。名前を変えて遊んでいるユーザーをSNS上の名前に修正したり、長すぎる名前を縮めたりなど。
この記事では、上記のカスタマイズを行う方法について解説する。
※前提として、特定のユーザーのユーザーID(18~19桁の数字)を知っておく必要がある。ユーザーIDを知るためには、Discordのユーザー設定>詳細設定>開発者モードを有効にしておき、Discord上でユーザーのアイコンを右クリックして「ユーザーIDをコピー」を選択すればよい。
特定のユーザーを非表示にする
特定のユーザーを非表示にしたい場合、下記のようなコードをカスタムCSSに追加すればよい。なお「7232…1119」の部分はただのサンプルなので、ここは実際に非表示にしたいユーザーのIDで置き換えること。
1 2 3 |
[data-userid="723180823842521119"] { display: none !important; } |
上記のコードを、非表示にしたいユーザーの数だけ追加していく。
特定のユーザーの名前を変更する
特定のユーザーの名前を変更したい場合、はじめに、下記のコードをカスタムCSSに追加する。これはユーザーごとに追加する必要はなく、適当な場所にひとつだけ書けばよい。
1 2 3 4 5 6 7 |
.voice_state .voice_username:before { color: #ffffff; font-size: 14px; background-color: rgba(30, 33, 36, 0.95); border-radius: 3px; padding: 4px 6px; } |
これが何かについて、順を追って説明する。まず「特定のユーザーの名前を変更する」と銘打ったものの、厳密には「元の名前を非表示にして」「新しい名前を追加する」という処理を行う。この際、新しく追加された名前のテキストは、そのままでは元の名前のテキストとは異なるスタイル(文字色や背景色)で表示されてしまう。それでは困るため、元の名前のテキストにスタイルを合わせにいっている。それが上記のコードの意味だ。(したがって、名前のテキストのデザインをデフォルトから変更している場合は上記のコードではうまくいかない可能性がある)
上記のコードを追加したら、次はユーザーの名前を変更するために下記のようなコードを追加する。やはり同様に「7231…1119」と「ガンジー改」の部分はただのサンプルなので、ここは実際のユーザーIDと変更後の名前で置き換えること。
1 2 3 4 5 6 |
[data-userid="723180823842521119"] .voice_username span { display: none !important; } [data-userid="723180823842521119"] .voice_username:before { content: 'ガンジー改'; } |
上記のコードを、名前を変更したいユーザーの数だけ追加していく。
コメント