いまからVTuberを目指す方へ『VTuberの教科書』

【Discord】オーバレイを横並び・四角・跳ねるように!カスタムCSS配布中【OBS】

配信画面に表示するDiscordのオーバレイをカスタムしていきます。
この記事の方法で、アイコンの形を変えたり、ぴょこぴょこ跳ねるようなアニメーションになります。

Discord StreamKit で生成したオーバレイに、カスタムCSSを適用させましょう。

YouTubeでも解説中!

この記事の内容をYouTubeでも解説しています。動画のほうが見やすい方は下記のリンクからご覧ください。

【完成形】DiscordのオーバレイをOBS上に表示する

当サイトで配布している素材を使って、上記のようにDiscordのオーバレイをカスタマイズしていきます。

横並びで、丸っこい四角、名前は水色の背景にしています。

今回は当サイトが運営する「はいしんツールキット」を使用します。

当サイトの運営する「はいしんツールキット」では、配信活動に役立つツールを提供しています。

  • デジタル時計
  • YouTube・Twitchのコメント欄カスタムCSS
  • DiscordカスタムCSS

今回使うのはDiscord用のツールですが、ほかにも便利な機能がたくさんあります。
随時更新中なので、ぜひブックマークしてお使いください。

では、実際にオーバレイをカスタマイズしてきましょう。

STEP1 ボイスチャンネルのリンクを取得

まずは、OBSにボイスチャットのオーバレイを表示したいので、「Discord StreamKit」を使ってDiscordのボイスチャンネルのリンクを取得します。

StreamKitにアクセスし、「Install for OBS」をクリックすると下記のような画面になります。

Discord StreamKit
Discord StreamKit

英語なので分かりづらいかもしれませんが、ボイスチャットの項目を順番に選択していきます。

  1. 「VOICE WIDGET」を選択
  2. 「Server」「Voice Channel」は任意のものを選択
  3. 右下のリンクを控えておく

特に「VOICE WIDGET」を選択できているか注意してください。
ほかの項目でも画面全体の見た目が似ているので間違いがちです。

控えたリンクはのちほどOBSに表示するのに使います。

STEP2 お好みのデザインにカスタマイズ

はいしんツールキット」を使ってカスタマイズするためのコードを生成します。
「DiscordカスタムCSS」のページを開いて、デザインを選んでいきましょう。


配信ツールキット|DiscordカスタムCSS

ここからはお好みの設定でOKです。

  • 並び方
  • アイコンの大きさ
  • アイコンの形
  • アニメーション
  • 名前のカラー

デザインをそれぞれ選択していきます。

最後の「コピペ用CSS」の欄にあるコードはSTEP3で使います。

STEP3 OBS上に表示する

ここからはOBSの設定です。

obsの設定

ソースの「ブラウザ」を追加。

「URL」にはSTEP1で用意したリンクを入力。「カスタムCSS」にはSTEP2で用意したコードを入力します。

すべて入力したらOKボタンを押せば作業完了です。

新デザインが追加されました(2024/02~)

厚めの影が魅力の新デザインを追加しました。
同じく「はいしんツールキット」のDIscordカスタムCSSのページから使えます。

旧デザインより落ち着いたデザインで、アイコンが見えやすいように。話している時とそうでないときの明るさの差が小さくなるようにしています。

また、アニメーションが最低限なため、配信画面内がごちゃごちゃにならず、ほかの要素を邪魔しません。

こちらのデザインもぜひ使ってくださいね。

縦並びにするときのTips

すべての横並びデザインで共通の設定で、縦並びに変換したいときのTipsを紹介します。

横並びのデザインであっても、ブラウザソースの「幅」を小さくすれば、きれいに改行するようになっています。

縦並びとの違いは、名前の位置です。アイコンの下に名前を表示させたいときはこの設定をしてみてください。

もしも、名前を横に表示したい・名前をトリミングしたいときは縦並びの設定でもOKです。

この設定を応用して、3人ごとに改行するなど、配信画面上の表示位置を調整できるので、覚えておくと便利です。

はいしんツールキットは便利なツールがたくさん

当サイトが提供している「はいしんツールキット」では、discordオーバレイのカスタマイズのほかに、おしゃれな時計表示やYouTubeコメント欄のデザインカスタマイズなど、オリジナルのツールを用意しています。

【OBS】コメント欄をかわいい吹き出しにするCSS配布中【YouTube・Twitch対応】 【配信者向け】かわいくておしゃれな配信用時計ジェネレータ【OBS】

無料で使えるのでぜひ使ってみてくださいね!

また、「こんなデザインが欲しい!」「こんなツールが欲しい!」「ここをもっと使いやすくしてほしい!」などのご意見もぜひお待ちしております。

使用上の不明点や要望がある際は、サポート用のDiscordを用意しています。

そちらでお気軽にご連絡ください。

Discord

34 COMMENTS

rin

初めまして。
とても便利で助かっています。
名前を非表示にしたいのですが、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;
}

返信する
めむ

早速試してみました。とっても助かりました。本当にありがとうございます!
これは返信不要ですが、半透明の時計を表示するやつが画面の邪魔にもならずおしゃれで可愛くて愛用させていただいております。いつもありがとうございます。

返信する
アバター画像 運営

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;
}

返信する
やまもと

返信ありがとうございます。

うまくいきました、ありがとうございました!

返信する

運営 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です