配信画面に表示するDicordのオーバレイをカスタムしていきます。
Discord StreamKit で生成したオーバレイに、カスタムCSSを適用させましょう。
- Discord のオーバレイを自分好みにカスタマイズしたい
- 横並び・四角形・かわいいアニメーションを追加したい
- よく配信者さんがやってるDiscordのオーバレイ表示をやりたい
YouTubeでも解説中！
この記事の内容をYouTubeでも解説しています。動画のほうが見やすい方は下記のリンクからご覧ください。
【完成形】DiscordのオーバレイをOBS上に表示する
当サイトで配布している素材を使って、上記のようにDiscordのオーバレイをカスタマイズしていきます。
横並びで、丸っこい四角、名前は水色の背景にしています。
当サイトの運営する「はいしんツールキット」では、配信活動に役立つツールを提供しています。
- デジタル時計
- YouTube・Twitchのコメント欄カスタムCSS
- DiscordカスタムCSS
随時ツールは追加中です。
Discordをカスタマイズできるツールもあるので、そちらを使っていきましょう。
- 縦並び・横並び
- アイコンの大きさ：３段階
- アイコンの形：丸・角まる・四角
- アニメーション：２種類
- 名前部分の背景色変更
デザインをお好みでカスタマイズが可能です。
それぞれ設定を変更すると、自動的にカスタムCSSが生成されます。
あとはOBSにコピペするだけ！
詳しい使い方をここから紹介していきますね。
STEP1 ボイスチャンネルのリンクを取得
まずは「Discord StreamKit」を使って、Discordのボイスチャンネルのリンクを取得します。
StreamKitにアクセスしたら「Install for OBS」をクリック。
「VOICE WIDGET」を選択→「Server」「Voice Channel」は任意のものを選択→右下のリンクを控えておく。
リンクは後ほど使用します。
STEP2 お好みのデザインにカスタマイズ
「はいしんツールキット」を使ってデザインをカスタマイズしていきます。
配信ツールキット|DiscordカスタムCSS
ここからはお好みの設定でOKです。
- 並び方
- アイコンの大きさ
- アイコンの形
- アニメーション
- 名前のカラー
デザインをそれぞれ選択していきます。
最後の「コピペ用CSS」の欄にあるコードはSTEP3で使います。
STEP3 OBS上に表示する
ここからはOBSの設定です。
ソースの「ブラウザ」を追加。
「URL」にはSTEP1で用意したリンクを入力。「カスタムCSS」にはSTEP2で用意したコードを入力します。
すべて入力したらOKボタンを押せば作業完了です。
はいしんツールキットは便利なツールがたくさん
当サイトが提供している「はいしんツールキット」では、discordオーバレイのカスタマイズのほかに、おしゃれな時計表示やYouTubeコメント欄のデザインカスタマイズなど、オリジナルのツールを用意しています。
【OBS】コメント欄をかわいい吹き出しにするCSS配布中【YouTube･Twitch対応】
【配信者向け】かわいくておしゃれな配信用時計ジェネレータ【OBS】
無料で使えるのでぜひ使ってみてくださいね！
また、「こんなデザインが欲しい！」「こんなツールが欲しい！」「ここをもっと使いやすくしてほしい！」などのご意見もぜひお待ちしております。
スポンサードリンク
こちらの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;
}
返信ありがとうございます。
うまくいきました、ありがとうございました！