配信でぴょこぴょこ跳ねるかむろりん【カスタムCSS】
こんちわ！かむろりんです！※ブログ初心者のため、分かりにくい箇所あるかもしれませんが、気になった箇所は都度修正の予定です( ˇωˇ人 )★このブログの位置づけDiscord、DiscordStreamKit、OBSを活用して、発話状態に合わせて、画像をぴょこぴょこ跳ねてもらうカスタムCSS例を張りまくります！★2022/12/20頃に発生していた仕様変更に伴い下記カスタムCSSは修正対応しました＼(°ω°)／動作確認済みなので、参考にしてください★前置きカスタムCSSより前を詳しく教えてほしい方はこちらのブログを参考にしてください。OBSで立ち絵をピョンピョン上下に動かす｜よーへん(バーチャル学芸員・バーチャルライブコーダ)｜noteこちらも忘れそうなのでメモです。 OBSのCSS記述機能を使って、キャラクターの立ち絵を動かす方法です。 立ち絵を準備する 1.立ち絵を作成し、Discordの配信で使いたいサーバのチャンネル(例えば「立ち絵置き場」とか)にアップロードする 2.Discordの歯車アイコンの「ユーザ設定」をクリックし、「詳細設定」をクリックする 3.「開発者モー…note.com★自動で作成してくれるサイトもあるリンクは下記よりDiscordStreamKit 立ち絵変換Discordで利用できる発話者アイコンを任意の立ち絵に変換し、発話時にいくつかのアクションを実行させるカスタムCSSを生成します。manten-do.net★かむろりんがデフォルトに使用しているアレンジ1大まかなアレンジ点は2つ①喋っていない時の明るさを少し明るめにした②飛び跳ねる値を大きくした---------------------------------------------------- /* 選択したユーザ以外の画像を非表示にする */ img:not([src*="ユーザーIDを置き換え"]){ display:none; } img:not([src*="ユーザーIDを置き換え"])+div{ display:none; } /* アイコンを立ち絵画像に差し替える */ img[class*="Voice_avatar_"]{ content:url("画像URLを置き換え"); height:auto !important; width:95% !important; border-radius:0 !important; filter: brightness(75%); } /* 発話状態の設定 */ img[class*="Voice_avatarSpeaking"]{ border-color:rgba(0,0,0,0) !important; position:relative; animation-name: speak-now; animation-duration: 300ms; animation-fill-mode:forwards; filter: brightness(100%) drop-shadow(0px 0px 5px rgba(243,152,0,1)); } @keyframes speak-now { 0% { bottom:0px; } 50% { bottom:50px; } 100% { bottom:0px; } } /* ネームタグ表示位置調整 */ div[class*='Voice_user']{ display: none; } /* 色々消すヤツ */ body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }----------------------------------------------------イメージはこんな感じ★2回くらいぴょんぴょんさせたいこの方のブログの下の方に書いてあります！動きのイメージはこんな感じで、ドロップシャドウなどが追加してあるのが面白いです。ちなみに自分はドロップシャドウをRGBAで指定しているので、こんな感じ /* ドロップシャドウ追加 */ filter: brightness(75%) drop-shadow(10px 10px 5px rgba(243,152,0,1));・ブログのリンクはこちらーOBSとdiscordを連携させて、配信画面に通話参加者のアバターを表示する - ツチニンの使い方がわからない執筆：ptrstチャンネル主のすのーさんに捧げる第二回4thGS座談会！(ゲスト：stoic、ptrst、ふぉんでゅ。、ビーン)次回以降の4thGS座談会に向けた技術面メモですこんな感じの画面を作ります。・任意の画像をアバターとして設定する ・喋っていないときはアバターが暗くなる ・喋っている人のアバターはぴょんぴょんはねてかわいいOBSのインストール、初期…bo-man.hatenablog.com★もっとじたばたさせたい！かむろりんもそう思っていたあああああ！(ﾟ∀ﾟ)人(ﾟ∀ﾟ)ﾅｶｰﾏ別ブログを参考に、発話のパーセンテージと飛び跳ね幅を調整したところ狂気が生まれた＼(°ω°)／・使用したCSSはこちら /* 選択したユーザ以外の画像を非表示にする */ img:not([src*="ユーザーIDを置き換え"]){ display:none; } img:not([src*="ユーザーIDを置き換え"])+div{ display:none; } /* アイコンを立ち絵画像に差し替える */ img[class*="Voice_avatar_"]{ content:url("画像URLを置き換え"); height:auto !important; width:95% !important; border-radius:0 !important; filter: brightness(75%); } /* 発話状態の設定 */ img[class*="Voice_avatarSpeaking"]{ border-color:rgba(0,0,0,0) !important; position:relative; animation-name: speak-now; animation-duration: 300ms; animation-fill-mode:forwards; filter: brightness(100%) drop-shadow(0px 0px 5px rgba(243,152,0,1)); } @keyframes speak-now { 0% { bottom:0px; } 5% { bottom:50px; } 20% { bottom:0px; } 35% { bottom:50px; } 50% { bottom:0px; } 65% { bottom:50px; } 80% { bottom:0px; } 95% { bottom:50px; } 100% { bottom:0px; } } /* ネームタグ表示位置調整 */ div[class*='Voice_user']{ display: none; } /* 色々消すヤツ */ body { background-color: rgba(0, 0, 0, 0); overflow: hidden; } ・アレンジ元のブログはこちら！一人ずつぴょこぴょこする立ち絵のカスタムCSS｜三日月望｜pixivFANBOXはいよ～三日月望です 書いてると思ってたら書いてなかった 一人ずつ光ってぴょうんぴょんはねる立ち絵のカスタムCSSを紹介します 元になったのは順風満帆丸さんの萬巓堂本店の 「DISCORDで喋ってる人を分かり易くするカスタムCSS」 http://manten-do.net/contents/dsk01 です 追記3/20 実際に動くとどうなるか短い動画..…n-mikaduki-fb.fanbox.cc★複数人出したい場合は？A.人数分の「ブラウザ」ソースを用意一番上のCSSを書き換えれば一気にできそうな気もしますが、かむろりんはそこまで詳しくない＆パッと調べても分からなかったので、今後の課題…ということで笑っていうことで、よき配信者らいふを！！！
