「Discord StreamKit Overlay」ボイスチャットのアイコンを大きくしたり、配色を変更したりできるカスタムCSSと、その取扱説明書。
【2024/01/07 追記】Discordの仕様変更に対応しました
「Discord StreamKit Overlay」の仕様変更に合わせて、CSSの一部を書き換えました。
恐らく直っている……はず。
これなに？
OBSとDiscordのボイスチャットを併用して配信をする際、「Discord StreamKit Overlay」のボイスウィジェットを使うと便利だけど、デフォルトだとユーザーアイコンのサイズが小さすぎる！
だからと言って、ブラウザソースをドラッグ＆ドロップで拡大するとボヤけてしまう！
というわけで作りました、「ボイスチャットのアイコンを大きくできるカスタムCSS」です。
配信の目的によっては、これではサイズが足りない事がある。
使い方
1.下記のコードを全部選択してコピー！
/*注意！CSS内の「!important」という文字が消えると、正常に動作しなくなる可能性があります。*/
/*0.下準備のための記述（書き換える必要は無い）*/
body {
/*0-1.OBSにデフォルトで入力されているCSS*/
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
}
[class*="Voice_voiceStates"] {
/*0-2.ブラウザソース内の余白を消すための設定*/
margin: 0px; !important;
padding: 0px !important;
}
[class*="voice_container"] {
/*0-3.ユーザーネームの位置を調節しやすくする設定*/
line-height: normal !important;
}
/*↓↓↓ここからカスタマイズ用の記述↓↓↓*/
/*1.ユーザーアイコンの設定*/
[class*="voice_avatar"] {
/*1-1.アイコンの大きさの設定*/
width: 128px !important; /*アイコンの幅を入力*/
height: 128px !important; /*アイコンの高さを入力[※1]*/
margin-right: 20px !important; /*アイコンとユーザーネームの間隔を入力*/
/*1-2.喋っていない時のアイコンの設定*/
border-width: 6px !important; /*枠線の太さを入力[※2]*/
border-color: rgba(0,0,0,0) !important; /*枠線の色を入力*/
border-style: solid !important; /*枠線の形状を入力*/
border-radius: 50% !important; /*アイコンの角を丸さを指定。0~50%の間で入力。数値が小さいほど四角くなる*/
filter: brightness(100%); /*アイコンの明るさを入力*/
}
[class*="Voice_avatarSpeaking"] {
/*1-3.喋っている時のアイコンの設定*/
border-color: rgba(67,181,129,1) !important; /*枠線の色を入力*/
border-style: solid !important; /*枠線の形式を入力*/
border-radius: 50% !important; /*アイコンの角を丸さを%で指定*/
filter: brightness(100%); /*アイコンの明るさを入力*/
}
/*2.ユーザーごとの枠の設定*/
[class*="voice_state"] {
/*2-1.枠の大きさの設定*/
height: 140px !important; /*アイコンの高さ[※1]+(アイコンの枠線の太さ[※2]の２倍)の値を入力*/
padding: 0px 0px; /*枠の内側の余白を入力。縦・横の順*/
/*2-2.枠に背景色を付けたい時の設定*/
background-color: rgba(0,0,0,0); /*枠の背景色を入力*/
/*2-3.枠線を付けたい時の設定*/
border-width: 0px; /*枠線の太さを入力*/
border-color: rgba(0,0,0,0); /*枠線の色を入力*/
border-style: solid; /*枠線の形状を入力*/
border-radius: 0px; /*枠の角の丸さをピクセルで指定。数値が大きいほど丸くなる*/
/*2-4.ユーザーごとの枠の間隔を調整するための設定*/
margin-bottom: 6px !important; /*枠同士の間隔を入力*/
}
/*3.ユーザーネームの設定*/
[class*="Voice_name"] {
/*3-1.フォントの設定*/
font-family: Whitney !important; /*フォントを入力 初期は『Whitney』*/
font-size: 40px !important; /*フォントサイズを入力*/
color: rgba(255,255,255,1) !important; /*ユーザーネームの色を入力*/
/*3-2.枠の背景色と大きさの設定*/
background-color: rgba(30,33,36,1) !important; /*枠の背景色を入力*/
padding: 8px 12px 4px 12px !important; /*枠の内側の余白を入力 上・右・下・左の順*/
border-radius: 8px !important; /*枠の角の丸さをピクセルで指定 数値が大きいほど丸くなる*/
/*3-3.枠線を付けたい時の設定*/
border-width: 0px; /*枠線の太さを入力*/
border-color: rgba(0,0,0,0); /*枠線の色を入力*/
border-style: solid; /*枠線の形状を入力*/
}
[class*="voice_username"] {
/*3-4.ユーザーネームの位置の設定*/
padding-top: 44px !important; /*ユーザーネームの表示位置を指定 上側の余白を目分量で入力*/
}
/*↑↑↑設定はここまで↑↑↑*/
/*最後にブラウザソースのプロパティを、幅が長すぎたり、高さが足りず収まりきらなかったりしないよう、適切な数値に調節してください。*/
/*2024/01/07 Discordの仕様変更に合わせて改訂しました。*/2.OBSでブラウザソースのプロパティを開いて、カスタムCSSの欄にペースト！
「カスタムCSS」の欄に既に何か書かれているが、気にせず消してそのままペーストしよう。
以上！
ただ表示を大きくしたいだけであれば、これで終わりです。
元の見た目を維持しつつ、そのまま拡大したようなレイアウトになっています。あとはブラウザソースのプロパティにある幅・高さの数値を調節したり、ソースをドラッグ＆ドロップで縮小したりして、いい感じに配信画面に配置してください。
もっと詳しい使い方
実はこのCSS、多少ではありますが見た目を好きに変更できるようになっています。
配色を変えたい！とか、もっとアイコンを大きくしたい！という場合は、下記の説明に従ってCSSを書き換えてください。
設定前の基礎知識
設定を始める前に、押さえておいて欲しい点を3つご紹介します。
「!important」は消さないよう注意
このCSSの中には、「!important」という文字が多数記載されています。
これはボイスウィジェットにあらかじめ設定されているCSSを、強制的にカスタムCSSで上書きするためのものです。
誤って消してしまわないよう、ご注意ください。
RGBAによる色の指定方法
CSS内に「rgba(0,0,0,0)」という記述が複数あります。
これはRGBAを使用して色を指定するためのもので、数値は順番に「Red・Green・Blue・Alpha（透明度）」を表しています。
自分の設定したい色がRGBではどのような値になるか知りたい場合、Googleで「カラー選択ツール」と検索するとツールが出てきます。
好みの色を選択してから、左下の「RGB」の欄の数値をCSSに入力してください。
「色の編集」をクリックするとこんな感じの画面が出てくる。
Alphaには0から1の値を小数点以下で入力してください。
1（100%）が不透明、0（0%）が完全に透明な状態です。
0.6（60%）の透明度の赤色が表示される。
枠線のスタイル
アイコンなどの枠線には、様々なスタイルを指定する事ができます。
このCSSでは最初は「solid」を指定しています。お好みで変えてみてください。
0.下準備のための記述（書き換える必要は無い）
この欄を書き換える必要はありません。
「1.ユーザーアイコンの設定」まで読み飛ばして大丈夫です。
0-1.OBSにデフォルトで入力されているCSS
OBSの「カスタムCSS」の欄に、最初から入力されているCSSを書き写したものです。
0-2.ブラウザソース内の余白を消すための設定
ボイスウィジェットの上下と左辺には、デフォルトで約15ピクセルの余白が設定されています。
そのままのサイズで使うなら有ってもいいかもしれませんが、サイズを変更するにあたって邪魔になると判断したため、余白を消しています。
0-3.ユーザーネームの位置を調節しやすくする設定
最後にユーザーネームの位置調整を行うので、それをしやすくするための設定です。
1.ユーザーアイコンの設定
1-1.アイコンの大きさの設定
Discordのアイコンに使われている画像ファイルのサイズは128ピクセル×128ピクセルです。
このCSSでは最大サイズに合わせて調整していますが、もしより大きくしたい場合はここの数値を書き換えてください。
アイコンとユーザーネームの間隔もここで指定します。
1-2.喋っていない時のアイコンの設定
ボイスウィジェットのアイコンには、喋っていない時でも透明の枠線が設定されています。この枠線の太さ・色・スタイルを指定できます。
通常はこの枠は透明になっている。
アイコンの角の丸さを指定できます。値を0%から50%の間で変更してください。
数値が小さいほど四角に近くなる。
また、喋っていない時だけアイコンを暗くする事もできます。値を0%から100%の間で変更してください。
1-3.喋っている時のアイコンの設定
喋っている時のアイコンの設定です。
このCSSには、デフォルトの緑色と同じ色をRGBで入力しています。もし背景色との相性が悪く、枠線が見辛い時などは色を変更してみてください。
スタイル・角の丸さ・明るさも、喋っていない時の項目と同様に変更できます。
2.ユーザーごとの枠の設定
2-1.枠の大きさの設定
このCSSのちょっと厄介な所です。
アイコンの高さの値に、アイコンの枠線の太さを2倍した値を加算したものを入力してください。
このCSSに最初から入力されている値の場合は、128ピクセル+(6ピクセル×2倍)=140ピクセルです。
赤い部分の高さが140ピクセルになっている。
枠の内側の余白を変更できます。
縦・横の順で入力してください。
枠の内側に余白ができる。
2-2.枠に背景色を付けたい時の設定
枠の背景色を指定できます。RGBAで入力してください。
2-3.枠線を付けたい時の設定
枠線を付けることができます。
アイコンの枠線と同様に、太さ・色・スタイル・角の丸さを指定できます。
2-4.ユーザーごとの枠の間隔を調整するための設定
枠同士の間隔をこの箇所で指定します。
3.ユーザーネームの設定
3-1.フォントの設定
フォントを指定できます。お好みのフォントがある場合は変更してみてください。（ちなみにデフォルトで指定されているフォントは「Whitney」です。）
フォントのサイズと色もここに入力します。
3-2.枠の背景色と大きさの設定
枠の背景色・内側の余白・角の丸さを指定できます。
フォントによっては内側の余白が偏る事があるため、この箇所は4辺を個別に指定できるようにしています。上・右・下・左の順で入力してください。
3-3.枠線を付けたい時の設定
枠線の太さ・色・スタイルを指定する事ができます。
3-4.ユーザーネームの位置の設定
このCSSのちょっと厄介な所その2です。
ユーザーネームの上側の余白をいい感じに調節してください。
ユーザーネームが中心に配置された。
ここまででCSSの書き換えは終了です。
ブラウザソースのプロパティを調整
最後にOBSのブラウザソースのプロパティから、幅と高さを調節します。
幅の値が大きすぎると無駄に横幅を取ってしまいますし、高さの値が小さすぎるとボイスチャットの参加人数が増えた場合に表示しきれません。
必要以上に横に長い。
これで設定は終了です。おつかれさまでした。
おわりに
こちらのCSSですが、「自作発言はしない事、公序良俗に反する行為に使用しない事」を守っていただければ自由に利用していただいて大丈夫です。
今回のCSSを書き始めるにあたって、こちらのページを参考にさせていただきました。お礼申し上げます。
Discord StreamKit Overlay Sample
この記事が気に入ったらサポートをしてみませんか？