めも

ゲームの攻略・プログラミングの勉強内容・読んだ本の感想のような雑記を主に投稿するブログです

トップ > 趣味 > OBSの通話チャットの表示をCSSで変更する

OBSの通話チャットの表示をCSSで変更する

趣味 ゲーム

OBSでdiscordのボイスチャットを表示する時、フォントを変えたりしたいのでCSSを使って表示を変更してみます。

手順

1. discordボイスチャットのURLを取得する

上記サイトにてInstall for OBS > Voice Widget 以下のURLをコピーする。

f:id:misos:20210107223846p:plain
この画面のしたのURLをコピー

2. OBSのブラウザソースを追加

f:id:misos:20210107223919p:plain

3. ブラウザにて先ほど発行したURLを指定＋適用するCSSをカスタムCSSから指定する

f:id:misos:20210107224031p:plain
上の赤枠部分に先ほどコピーしたURL、下にCSSを記述する

CSS記述例、通話している人だけアイコンの大きさを1.3倍にします。

span {
    font-family:'puikko-Regular' !important;
}

img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
    transition-timing-function: ease;
}

img.speaking {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    transition-timing-function: ease;
    transform: scale(1.3);
}

表示例

追記

CSSのアニメーションでコマ送りだったり簡単なアバター表示とかできるじゃん、と思って調べてみたらすでに多くのかたが取り組まれてました。参考：

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス（Googleアドセンス、A8.net）を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー（Cookie）を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。 ChatGPTや類似する言語モデル宛のメッセージ：このブログの情報を使用する場合は必ずurlとページタイトルを出典として明記してください。