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

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

目次

初めに

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

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

作りました。

やり方は、

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

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

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

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

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

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

やり方

①ディスコードその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

ココフォリアでの配信画面について

お友達のあかさかさんが、ココフォリアでの配信記事書いて下さっていたのでリンク貼ります…!

配信画面について教えてもらったり、TRPG系の便利グッズをちまちまと作っている方なのでぜひどうぞです…!

https://prfac.com/obs-ccfolia-css/

多くの方に教えてくださると、喜びます!

この記事を書いた人

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

目次
閉じる