めも

メモ.

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