【試験公開】配信画面に載せるチャットの絵文字を動くアイコンに置き換えるカスタムCSS「CAeMoji」

YouTubeで活動しているVTuber/配信者の皆さまにおかれましては、日頃から配信画面にチャットウィンドウを載せている方も多いと思われます。カスタムCSSでレイアウトを調整し、リッチな表示にこだわりを持っている方もいることでしょう。

そんなチャット欄がより楽しい雰囲気をまとえたら、もちろん嬉しいよなあ。

というわけで作ってみました。【配信画面に載せるチャットの絵文字を動くアイコンに置き換えるカスタムCSS「CAeMoji」】〜〜〜〜。

𝙄𝙢𝙖 𝙏𝙨𝙪𝙠𝙪𝙩𝙩𝙚𝙧𝙪 𝙈𝙤𝙣𝙤... pic.twitter.com/ieaRUnYKvA

— Kahlua (@nekosogi) June 7, 2022

こちらの動画ではクレヨン(🖍)の絵文字を、動くペンライトのアイコンに置換して表示しています。歌枠等で「ペンライトの代わりに何らかの絵文字を打って」とリスナーに呼びかけている方々。このCSSを使えば、絵文字を打つと実際にペンライトが配信画面上で振られるようになります。まあなんて豪華。

導入方法

まずは下記のCSSをまるごとコピー。OBS上で配置しているYouTubeチャットのBrowser Sourceのプロパティを開いて、「カスタムCSS」の欄にペーストしてください。既に他のカスタムCSSを利用している場合は、末尾に追加してください。

See the Pen CAeMoji - penlightRed by Kahlua (@nekosogi) on CodePen.

続いて、↓の中からお好みのSVG画像のアドレスをコピーしてください。Chromeなら右クリックから選択できます。

CSSの2行目、【画像のアドレス】部分をコピーしたアドレスに書き換えてください。

これでおそらく動くはず。

お気付きの方もいると思いますが、1行目の「alt="🖍"」のとこを任意の絵文字に変えてやればソイツがペンライトになります。

試験公開にあたって

配信画面上のチャットウィンドウは十中八九、自作やジェネレーター等なんらかの方法で作成されたカスタムCSSを既に使用していると思われるため、それぞれと組み合わせた際のテストが一人では到底できないという事情があります。なので貴チャンネルの環境でうまく動くかの保証は正直できない。すまぬ。

それでも試しに使ってやろうと言っていただける場合は、もしよかったらその後の感想・不具合報告等を送っていただけますと幸いです。

方法は

等々、よきにはからってください。

もちろん要望も歓迎だよ。「ペンライト、◯◯色が欲しい〜〜」って言ってもらえたら優先的に増やすかもね。

ちなみになんだけど、これ多分絵文字だけじゃなくてメンバーシップスタンプでもできそうなんだよね。オリジナルの動くスタンプ……有償での制作という話になってしまいますが、やってみたいという方はちょっくらご相談ください。

ご利用にあたって

諸々はこちらの内容に沿ってご活用ください。