配信画面に表示するDiscordのオーバレイをカスタムしていきます。
この記事の方法で、アイコンの形を変えたり、ぴょこぴょこ跳ねるようなアニメーションをつけたりできます。
Discord StreamKit で生成したオーバレイに、カスタムCSSを適用させましょう。
この記事の内容をYouTubeでも解説しています。動画のほうが見やすい方は下記のリンクからご覧ください。
【完成形】DiscordのオーバレイをOBS上に表示する
この記事の手順が完了すると、上の動画のようなデザインでDiscordのオーバレイを表示できます。
横並びで、丸や四角のアイコン。名前部分の色変更などのカスタマイズはお好みで可能です。
「はいしんツールキット」を使用します
Discordオーバーレイのカスタマイズには、当サイトの運営する「はいしんツールキット」を使用します。
「はいしんツールキット」は配信活動者に向けた便利なツールを提供しているサイトです。
- 配信画面に表示するデジタル時計
- YouTube・Twitchのコメント欄用のカスタムCSS
- Discordオーバーレイ用のカスタムCSS
今回使うのはDiscord用のツールですが、ほかにも便利な機能がたくさんあります。
随時更新中なので、ぜひブックマークしてお使いください。
では、実際にオーバレイをカスタマイズしてきましょう。
STEP1：ボイスチャンネルのリンクを取得
まずは、OBSにボイスチャットのオーバレイを表示したいので、「Discord StreamKit」を使ってDiscordのボイスチャンネルのリンクを取得します。
StreamKitにアクセスし、「Install for OBS」をクリックすると下記のような画面になります。
英語なので分かりづらいかもしれませんが、ボイスチャットの項目を順番に選択していきます。
- 「VOICE WIDGET」を選択
- 「Server」「Voice Channel」は任意のものを選択
- 右下のリンクを控えておく
特に「VOICE WIDGET」を選択できているか注意してください。
ほかの項目でも画面全体の見た目が似ているので間違いがちです。
控えたリンクは後ほどOBSに表示するのに使います。
STEP2：お好みのデザインにカスタマイズ
「はいしんツールキットのDiscordカスタムツール」を使ってカスタマイズするためのコードを生成します。
配信ツールキット|DiscordカスタムCSS
ふたつのデザインがあるので、お好みのものを選択してください。
「きゅーと」は丸・丸っぽい四角のアイコンや、ポップなアニメーションが特徴のデザインです。
「くらしっく」は控えめなアニメーションで、どんな配信にも合わせやすい特徴があります。
カスタムページを開くともろもろの設定を変更できます。
- アイコンの大きさ
- アイコンの形
- ユーザ名部分の形
- アニメーション
- ユーザ名部分のカラー
デザインをそれぞれ選択していきます。
最後の「コピペ用CSS」の欄にあるコードはSTEP3で使います。
STEP3：OBS上にオーバレイを表示する
ここからはOBSの設定です。
ソースの「ブラウザ」を追加します。
「URL」にはSTEP1で用意したリンクを入力。「カスタムCSS」にはSTEP2で用意したコードを入力します。
すべて入力したらOKボタンを押せば、先ほど設定したデザインでDiscordのオーバレイの表示が完了します。
アイコンの縦並びや改行させるときのTips
「はいしんツールキット」でのカスタマイズは横並びがデフォルトですが、縦並びや改行にも対応しています。
ブラウザソースの「幅」を小さくすれば、きれいに改行するような仕様です。
この設定を応用して、3人ごとに改行するなど、配信画面上の表示位置を調整できるので、覚えておくと便利です。
はいしんツールキットは便利なツールがたくさん
当サイトが提供している「はいしんツールキット」では、discordオーバレイのカスタマイズのほかに、おしゃれな時計表示やYouTubeコメント欄のデザインカスタマイズなど、オリジナルのツールを用意しています。
無料で使えるのでぜひ使ってみてくださいね！
また、「こんなデザインが欲しい！」「こんなツールが欲しい！」「ここをもっと使いやすくしてほしい！」などのご意見もぜひお待ちしております。
使用上の不明点や要望がある際は、サポート用のDiscordを用意しています。お気軽にご連絡ください。
コメント
コメント一覧 （34件）
初めまして。
とても便利で助かっています。
名前を非表示にしたいのですが、CSSのどの部分をいじればよいのか分からず困っています。
どうすればよいでしょうか。。
こちらのCSSとてもありがたく使用させてもらっております。
一点質問させていただきたいのですが、特定のユーザーのアイコンを非表示にする方法はありますでしょうか。
もしありましたら方法をご教示いただけるととても助かります。
cssで特定ユーザを非表示にする方法はわかりません。
OBSに表示する際にトリミングするのはどうでしょうか？
discordの表示順は名前で決まります。
「数字→アルファベット→日本語」で昇順に表示されるので、消したいユーザを先頭か最後尾に表示してトリミングするのが一番簡単な方法かと思います。
素敵なオーバーレイありがとうございます！
相談なのですが、アイコン横の名前がめちゃめちゃ小さく、上側に寄ってしまうのですが解決策はありませんか？
使っていただきありがとうございます！
おそらく縦並びでサイズを大きくした状態で使っているかと思います。
この点は改善すべきと考えつつ手のまわっていない部分でして…
下記をカスタムcssに追記することで調整をお願いできますか？
[class*=”Voice_name__”] {
margin-top:24px;
}
数字でどれだけ下げるかを調整できます。
よろしくお願いします～
迅速な対応ありがとうございます！
返信ありがとうございます。透明度を確認しましたが、バーの一番右の状態になっていました。また、しゃべった時の光の色も白の状態に固定されています。
また、光る状態とアイコンが上下するものを併用したい場合にはどうすればよいでしょうか。長文での質問失礼いたしました。
なるほど…光るということはcssが適用されていないようなので、一度ソースを作り直して、再度カスタムcssを生成して貼り付けてみてください！
また、光るのと上下のアニメーションを併用するには、お好きなアニメーションを選択して、カスタムcssの「–trans:transparent;」を削除です！
下のほうにあります。
ソースを再度作り直したところうまくいきました！ありがとうございます！
上下と光るものを併用する際光の色は白固定になってしまいますか？
変更できるようでしたら教えていただけるとありがたいです！
何度も質問重ねてしまって申し訳ありません…
無理やり変更するとしたら、「–trans:transparent;」にカラーコードを入力すると変更できます。
例えば、「–trans:#30BC76FF;」みたいな感じです！
ありがとうございました！おかげで満足のいくオーバーレイに出会えました！
質問失礼いたします、ネームタグのカラー設定ができず、名前のみ白で表示されてしまい、背景のカラー反映されません。対処法がございましたら教えていただけると幸いです。
おそらくですが、透明度を変更した状態になっているのだと思います。
カラーピッカーの2列バーがあるうち、下のバーを一番右に移動させるとちゃんと色が選択できます。
可愛くて素敵なものばかりで、いつもありがたく使わせていただいております。
質問なのですが、
①縦並びのとき、アイコンの下部に名前を表示するようにしたい場合（横並びと同様のレイアウトにしたい）はCSSをどう編集すればよいでしょうか？
②以前のコメントと少し重複しますが、サイズを「でっかい」にしても名前が5文字ほどで途切れてしまいます。もう少し長い名前の方（7～8文字くらい）も省略せずに入れたい場合はどうすればよいでしょうか？自分で考えてみて、文字のフォントサイズをもう少し小さくする、もしくはサイズ自体を「でっかい」よりもう一段階大きくする、を思いついたのですがいじり方がよく分からず…
長々とすみません。よろしくお願いいたします。
無理矢理な方法で恐縮ですがコードを共有します！
「縦並び」+「でっかい」でコードを生成し、下記を追記します。
(当サイトのfontの関係で””を手入力しないと動作しないかもです..)
「top, left」で名前の位置を無理やり調整。font-sizeも必要であれば変更してください。
[class*=”Voice_name__”] {
/*名前の配置 */
top: 85px;
position: relative;
left: -107px;
font-size: 12px!important;
text-overflow: clip;
}
[class*=”Voice_voiceState__”] {
/* アイコンの配置 */
padding-top:36px;
}
早速試してみました。とっても助かりました。本当にありがとうございます！
これは返信不要ですが、半透明の時計を表示するやつが画面の邪魔にもならずおしゃれで可愛くて愛用させていただいております。いつもありがとうございます。
8人以上だとアイコン表示が途切れます。解決策ありますか？
OBSに表示する際、ブラウザの幅を広げることで解決しませんか？
幅のデフォルトが800かと思うので1200に変更するなどです。
今こちらの環境で試せないので、あくまで想像ですがやってみてください！
あと質問ですがこれは横から来るコメントに対して透明の四角形を右向きに流しているのかコメント自体を途切れるようにしているのでしょうか。前者であれば無くして画面端から端まで行けるようにしたいと思ってます
cssについては「チャンネル名を消す」「アニメーションの動作と完了までの秒数」を記述しているだけです。
なので変えるとしたら、流すスピードくらいでしょうか。
[class*=”Chat_message__”]{
animation: nico 20s linear;
}
のようにカスタムCSSに追記で上書きできます。（10s→20sに変更する例です）
背景・テキストを変更したいときは、StreamKit上で変更します。
追加質問の意図が違ったら申し訳ないのですが、コメントはアニメーションで動かしています。
画面サイズに合わせるには、OBS内でサイズ調整をして、streamkitでテキスト編集です。
何度も丁寧な返信ありがとうございました！愛用させて頂きます。
こちらではオーバーレイに対してのCSS紹介でしたがテキストへのカスタムCSSの質問は可能でしょうか。可能でしたら以下にお答え頂けるととてもありがたいです。使うソフトはOBS、discord streamkit overlayです。特定のテキストチャンネルに打ち込まれたテキストをOBSに表示させるのですが画面右から左へ流れるようにするCSSはありますでしょうか。いわゆるニコニコ風です。よろしくお願いします
簡単にですが作ってみました。
streamkitのChatwidgetでデザインの変更（フォント関係や背景の透過など）をし、URLを取得。
OBSのブラウザソースにURLをコピペ後、カスタムCSSに下記の一行を追記します。
@import url(“https://ruri.info/tool/css/discordChatNico.css”);
ニコニコみたいにランダムな位置からきれいに表示するアイデアが思いつかなかったので、それっぽく流れるようにしています（確認お願いします）
これ以上本格的なものにしたければ、discordのbotを使ってするとかになるかもです。
そちらは私の知識不足なので、調べてください！！
早くに返信ありがとうございます。テストしてみたのですが反映されず手こずっております。URL取得はテキストチャンネルが反映されているので問題無いと思います。カスタムCSSも@import〜css”);まで打ち込みました。OBSのバージョンも最新です。わざわざ作って頂いたのに申し訳ございません。是非使いたいのですが。。。何かしら考えられる原因はありますでしょうか。
確認しました。
当サイトのフォントの影響で、URLを囲んでいるダブルクオーテーションの表示が不具合の原因のようです。
「”」←ふたつあるこれを直打ちしてもらえますか？
返信ありがとうございました。”の直打ちの際メールコピーするとURL部分が自動的に色を青色になるのが原因で§22が語尾にいるのも確認が取れました。それを取り除き再度試して見た所成功しました！本当にありがとうございます。数値の変更をしたいのですが御手数ですがCSS中の簡単な解説をお願い出来るでしょうか。調べれば分かると言うものであれば私が調べますので大丈夫です！本当にありがとうございます
質問ですーー！！
テンプ通りのCSSを入力したのですが
名前が改行されます・・・
自分の名前はぼぉちゃんなのですが
「ぼぉちゃ
ん」
のようになっています全部一括りはできないでしょうか？
長い名前の方とか・・
そうですね・・・解決策としては、
・サイズの「でっかい」を使う
・縦並びを使う
・下記のCSSを追記し、はみだし分を省略する
[class*=”Voice_name__”] {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
以上のいずれかでどうでしょうか？
返信ありがとうございます！
CSSの場合だとどの部分に入力すればいいですかね？
よくわからなくてごめんなさい
OBSのカスタムCSS欄に追記で大丈夫ですよ～！
はいしんツールキットでコピペしたものと、お送りしたコードを両方はりつけてください
ありがとうございます！！
助かりますです(__)
質問です。
縦並びの際に、表示全体を右寄せ、名前をアイコンの左側に表示させたい場合
CSSはどのように編集すればよろしいでしょうか。
よろしくお願いいたします。
Streamkitのデフォルトでは、「アイコン→名前」と表示されるところを「名前→アイコン」にしたいということでしょうか？
それでしたら、以下のcssを追加してください。
.voice-state{
display: flex;
flex-direction: row-reverse;
}
返信ありがとうございます。
うまくいきました、ありがとうございました！