シナリオ執筆の為、更新停滞気味です

OBS配信や動画で立ち絵を光らせる、動かすカスタムCSSの実装させ方。Discord Reactive Imagesの使い方(配信やココフォリアセッション動画を作成する時用、Among Us配信、ディスコード、OBS、オーバーレイについて、立ち絵光らせることが出来ない人用)

目次

初めに

誰が話しているか分かる動画が作りたい!!!

…と思ったのですが、とっても苦戦したので、

(やり方が分かる記事を)

作りました。

やり方は、

萬巓堂本店
Discordで喋ってる人を分かり易くするカスタムCSS | 萬巓堂本店 配信ツール上でDiscordのオーバーレイ(発話者アイコン)を立ち絵に変えるカスタムCSSです。

此方のサイト様に載っております。

今回はそれでも苦戦してしまった未来の私の為の記事で御座います。

CSSが分からなくてもOKです。
全てクリックとコピーペーストで終わります

はじめに(ダウンロードするもの)

  • ディスコード Discord
    • (配信中に通話機能を使うソフトです。
    • スマホでも、PCでもダウンロードできます)
  • OBS
    • Open Broadcaster Software略して、「OBS」
    • 動画で「枠」を作る時のソフトです。
    • PCからダウンロードできます。

やり方(立ち絵変換様を使用したやり方)

Among Us配信さんは、此方のツールの方が使い易いです。

①ディスコードその1編

ディスコードを立ち上げて、設定をクリックしてください

その後に、「ユーザー設定」の一覧が出てくるので、下の方にある「詳細設定」をクリックしてください

すると、詳細設定の画面が出るので、開発者モードをオンにします。

(これをしないと後程行うIDを得ることが出来ないので、先に行っておきました)

そして、配信を行う時に使うボイスチャンネルに事前に入っておいてください

それと、立ち絵チャンネルなどを作り、自分の表示したい画像を貼りましょう。

これでひとまず、ディスコード内での準備は完了です。

②streamkit.discord編

ディスコードは話すと、緑色に光るのですが、

この光っている画像を、OBSに取り込むことができます。

その際に使うサイトが、streamkit.discordです

まず、Install for OBSを選択してください。

その後に、許可をしますか?という文言が英語で聞かれますので「はい」の様なものを押してください。

(一回許可すると画面が出なくて…申し訳ないです…)

その後は、①VOICE WIDGETをクリックするとタブが変わります。

②は先程確認したサーバーになっているかどうか、③は配信をするボイスチャンネルになっているかを確認し、

④の画面に自分の名前とアイコンが載っているかを確認します。

載っていない場合、ディスコードに入っていない、もしくは設定が間違っているという事になります。

確認出来たら、⑤のURLをコピーしてください。

③OBS編とディスコード編

OBSを開きます。

OBSの画面が出てきたら+ボタンをクリックし、ブラウザを選択します。

名前を入力する画面が出ますが、名前は好きなものをいれてOKをクリックします。

すると、このような画面が出てきますが、エラーではないです。

そして、このローカルファイルの下「URL」の部分に、

streamkit.discordでコピーしたURLを入れて下さい。(まだOKは押さないで下さい)

今からカスタムCSSの部分を作ります。

↓こちらをクリックして下さい

萬巓堂本店
DiscordStreamKit 立ち絵変換 Discordで利用できる発話者アイコンを任意の立ち絵に変換し、発話時にいくつかのアクションを実行させるカスタムCSSを生成します。

此方の一発変換様がとても便利なので、お借りさせていただきました。

まず、ディスコードを開き、立ち絵チャンネルに行きます。

そして、これを立ち絵変換サイトの「画像URL」の部分へ貼り付けます。

そして、ディスコードのIDもディスコードからコピーします。※フレンドコードではない為、注意です。

(初めに開発者モードにしていないと、入手できないURLの為、出来ない方は開発者モードになっているかを再度確認してください)

また、立ち絵変換サイトに戻って、貼り付けをします。

DiscordユーザIDの部分です。

その後の設定はお好きな感じでカスタマイズして頂き、生成を押し、出来た文字列をコピーします。

(この部分がCSSというプログラミングコードですが、難しいことは気にしないで大丈夫です)

OKを押すと、

少し暗い状態になっています。

そこで、「あー」と言ってみます。

光りました。

……光りました…!

終わりに

手順さえ踏めば、カスタムCSSで画像を光らせたり、動かしたりすることが出来ました。

此方の2点のサイト様も素敵で参考になりましたので、載せさせて頂きます。

なとりゲームブログさま

https://gamer-natori.com/broadcast-001-discord-obs/

三日月望様

https://n-mikaduki-fb.fanbox.cc/posts/902468

OBSのDiscordアイコン外観変更ジェネレーターの使い方(別の方法①)

Among Us配信者などの横並び表示がしたい!方へ

立ち絵でなく、
ディスコードの
アイコンで十分だー!

という方用の内容です。

OBSとディスコード編(途中まで先程と手順は一緒)

OBSを開きます。

OBSの画面が出てきたら+ボタンをクリックし、ブラウザを選択します。

名前を入力する画面が出ますが、名前は好きなものをいれてOKをクリックします。

すると、このような画面が出てきますが、エラーではないです。

そして、このローカルファイルの下「URL」の部分に、

streamkit.discordでコピーしたURLを入れて下さい。(まだOKは押さないで下さい)

今からカスタムCSSの部分を作ります。

OBSのDiscordアイコン外観変更ジェネレーターを開いてカスタムCSSを作る

ジェネレータを開き、お好きなようにカスタマイズします。

ぴょこぴょこや、点滅、縁取りの変更、丸アイコンの変更、縦並び、横並びも自在です。

カスタマイズ出来たら、これで「カスタムCSS」は完成です。

OBSに戻ってカスタムCSSを貼り付ければ完成!

~完~

iscord Reactive Imagesを使う方法( 別の方法②)

ディスコードで話す場合、
話したらぴかぴかするプラグインです

此方の動画様を参考に作っております

↑をクリックしてください

認証ボタンを押すと、この画面に行きます。
アイコンはディスコードのアイコンが表示されます

一旦 この状態で
2番目のURLをOBSに貼り付けます

ソースからブラウザを選択

ブラウザを押すとプロパティが出て来るので
先程コピーしたURLを貼り付けます。

何も弄っていない Discord Reactive Imagesの実際の映像が此方

画像の変更などをする場合

左が話さないとき、右が話す時
Configの部分は跳ねさせたり、
話していないときも光ったままにしたりの設定です

ディスコードに入っているグループ全員でやる時

下ではなく、上のURLを使うことで
グループで光らせることが出来ます
※また今度誰かと試します…

変更設定した 実際の映像が此方

ヤギハタ様 ぴょんぴょんオーバーレイ

今井モノ@単眼宇宙人VTUBER様 複数人で配信するときに誰が話しているか分かりやすくする方法

ココフォリアでの配信、TRPGのリプレイ動画や配信画面の作り方

セッション中の声を良くしたい方やVtuberさん用記事

あわせて読みたい
Vtuberのインターフェース、マイク機材のおすすめや機材事情について。実際に何を使っているの?機材の... Vtuberになりたい!配信者になりたい!という方向けの記事になります。 USBマイクは、MIX師さんが非推奨していることから、ほぼ加えておりません。ご了承くださいませ V...

サムネイルの作成し方がわからない人用

立ち絵差分があれば、瞬きや笑顔などのかんたんなアニメーションが作れるやり方

000

多くの方に教えてくださると、喜びます!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

今はゲームシナリオを書いている者です。
アナログゲームを嗜む脚本家、小説家、人狼もマダミスも好き。

目次