Discordで喋ってる人を分かり易くするカスタムCSS（2023年最新）

Posted on by 順風満帆丸

1.はじめに

2022年12月頃、Discordのアイコンをストリームソフトへ表示するStreamKitのDOMが変更され、元々作っていた当サイトのツールが稼働しなくなりました。ツール側は既に修正済みであり、本記事はその修正版になります。

Discord StreamKit：立ち絵変換
Discordで喋ってる人を分かり易くするカスタムCSS

2.変更内容

旧版記事で紹介していた際のCSSは以下になります。公式StreamKit側で<li>、<img>周りの構造が変更されており、<li>のクラス、他属性を指定するセレクタが利かなくなってしまいました。

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  position:relative;
  animation-name: speak-now;
  animation-duration: 1s;
  animation-fill-mode:forwards;
}

@keyframes speak-now {
  0% { bottom:0px;  }
  15% { bottom:10px;  }
  30% { bottom:0px;  }
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

本当は:has()を使ってまとめて処理をしたい個所があったのですが、コードに不備があるのかOBSのブラウザでは上手く動かないのか動作せず、回りくどい書き方になってしまったかもしれません。

2-1.指定のユーザ以外のアイコン・ネームタグを非表示にする

前回と同様、<li>に画像を差し込みたかったのですが、ユーザIDが<img>のsrc属性でしか指定出来なかったため画像を差し替える形になっています。

/* 選択したユーザ以外の画像を非表示にする */
img:not([src*="ユーザID"]){ display:none; }
img:not([src*="ユーザID"])+div{ display:none; }
li{ position:fixed;top:15px;width:100%; }

/* アイコンを立ち絵画像に差し替える */
img[class*="Voice_avatar_"]{
  content:url("画像URL");
  height:auto !important;
  width:100% !important;
  border-radius:0 !important;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

2-2.発話時のアニメーション

元々「.speaking」クラスの指定で何とかなっていた個所ですが、2023年1月現在は「.Voice_avatarSpeaking__lE+4m」というクラス名になっています。おそらく変わることのないであろう「.Voice_avatarSpeaking」の部分で部分一致するようセレクタを変更しています。

/* 発話状態の設定 */
img[class*="Voice_avatarSpeaking"]{
  border-color:rgba(0,0,0,0) !important;
  position:relative;
}

3.新機能

元々、最上位の<li>に跳ねる・明滅するなどのアニメーションを設定していたところ、今回の更新で<li>内の<img>に発話時のアニメーションを指定するという形になりました。

（当時の筆者のCSS習熟度の都合もあり）変更前の構造の時に出来たのかはもうわかりませんが、今回から<li>にもアニメーションを指定することで非発話時でも再生される待機モーションという要素を追加しました。

第一弾として「浮遊アニメーション」を実装しています。これは差し替えた画像が常にふわふわと上下にゆっくり動き続けるというものです。多くの場合立ち絵に差し替えられるので、喋っている時以外静止しているよりは動きのある配信画面が出来るのではと思われます。

複数アニメーションは普通にできるらしい（「,」区切りで指定）ので当時の僕は勉強不足でしたね……。

4.さいごに

まず最初に、今回の仕様変更から修正までの間にツールを使えない状態に陥ってしまった方々、申しわけありませんでした。そしていつも使ってくださりありがとうございます。修正するまでの間、多くの方が代替案の作成や情報の拡散を行ってくださりとても助かりました。

また、以前作ったものと比較して「この書き方変だな」というところも見えてきましたので、機能に影響が出ない程度にスリムでカッコいいコードになるようサイレント修正入るかもしれません。バグなど出ないよう注意します。

引き続き本ツールをより良いものに出来るよう努めていきますので、今後も何卒宜しくお願いします。

以上

Posted in カスタムCSS