【データ配布あり】Discord Streamkit Overlayのcssカスタム用テストデータを作った

タイトルが長い!!!

実況配信などではお馴染み、Discordの通話状態を表示してくれるDiscord Streamkit Overlay
サンプルcssとかAmong Usのクルーがぴょこぴょこするジェネレータとかが既にあるわけですが、元Web系SEアカツキユウ、cssは自分でカスタムしたいわけですよ。

しかし、いざcssをカスタムしようにも、ボイスチャットに自分だけ入ってカスタム…なんて

1人分しかカスタム出来ねぇ!!!

ってキレ散らかした訳ですね。
もっと言うと「このパーツにはどういうプロパティが入ってるんじゃ反応せんぞ!!!」ともキレ散らかしておりまして。

取り乱しました。

ともかく、そこで「Discord Streamkit Overlayが表示しているhtml」と「公式が適用しているcss」と同じデータがローカルにあれば、カスタムが捗るじゃないの、と思って作りました。
もう既にあったらすみません。今回はいつもみたいに本気出して検索しなかった。
ついでに自分で書いたcssをサンプルとして2つほど置いておきます。

自前でcss書こうとしてる方の助けになればいいなーと思います。

配布データ

先に、実際に作ったテスト用データを置いておきます。
ダウンロードボタンからどうぞ。
使い方は後述。

Download dso.zip

zipの中身

  • /ico/ … テストで使ってるアイコン一式
  • /sample/ … サンプルcss
  • default.css … 公式が適用しているcss抜粋
  • style.css … カスタム用のcss
  • index.html … テスト用のHTML

デフォルト表示イメージ

配信画面への取り込み方

OBSなどの配信画面に取り込んで表示確認が出来ます。
「ブラウザソース」から読み込みます。

表示してるのはローカルファイルですが、ローカルファイルのチェックは入れずに、htmlファイルをダブクリするなどでブラウザで表示してる時にアドレスバーに出てるパスをそのまま「URL」欄に入れるだけでOKです。
表示を更新したいときは、「現在のページを再読み込み」のボタンを押せば更新されます。

また、各cssにブラウザソースのサイズを書いています。
これは、↑この読み込み画面の「幅」と「高さ」に入力します。
OBSのデフォルト値は幅800、高さ600ですが、そのままでははみ出してしまう場合がありますので、必ず記載してある通りに幅と高さを設定して使って下さい。

ファイルの説明

default.css

Discord Streamkitで生成されているHTML内に記載されているcssの中身から、ボイスチャットに関する部分を抜き出して、さらに読みやすく編集しました。
デフォルトcssとして、次のstyle.cssより先にHTMLから呼び出しています。
HTML内に記述されている元のURLは /overlay/3ca453aad1ff12db27e3.css

このcssは編集せずに使います。
プロパティを上書きする必要がある場合はこの中身を読むといいと思います。

style.css

HTMLから呼び出しているcssです。default.cssより後に呼び出しています(=上書き用)。
配布状態ではdefault.cssに書いてあるクラスだけ記述してあります。
プロパティは何も書いてませんので、プロパティを追記しないクラスは削除して良いと思います。

ちなみにHTMLにもベタ書きでstyle指定されてるので、!importantは多用することになるかも。
css書いても反応しねぇ! と思ったらベタ書き側を疑ってみてください。
私ちょっとそこで詰まりかけた。

ていうか何でベタ書きしてあるんだよォォォ

index.html

Discord Streamkit Overlayが生成するhtmlをコピーして作ったテスト用HTMLです。
元々Among Usの画面を作るために作ったので、ひとまず10人分入れてあります。
10人以上が必要な場合は人数分コピペで足す。要らない場合は人数分削る。
IDがかぶってても単純に足せばとりあえずテストは出来ます。
(ID指定で非表示にするやり方は後述)

また、OBSで書き換えられるのはcssのみなので、構造が変わるように書き換えちゃダメです。
これ↓が1人分のセットです

<li class="voice-state" data-reactid=".0.0.0.$000000000000000000/=1$000000000000000000">
	<img class="avatar" src="./ico/player0.png" data-reactid=".0.0.0.$000000000000000000/=1$000000000000000000.$=10">
	<div class="user" data-reactid=".0.0.0.$000000000000000000/=1$000000000000000000.$/=11">
		<span class=" name" style="color:#ffffff;font-size:14px;background-color:rgba(30, 33, 36, 0.95);" data-reactid=".0.0.0.$000000000000000000/=1$000000000000000000.$/=11.0">ぷれいやー0</span>
	</div>
</li>

Copy

アイコン一式

表示確認用にアイコンを入れてあります。
再配布可能なアイコンを同梱しました。配布元はこちらです。

Default Icon
全653種、商用利用無料、再配布可能な太っ腹のフリーアイコン -Default Icon | コリス

サンプルcss一式

下に掲載しているサンプルcssと同じものを同梱しています。
よく変更しそうな箇所にコメントを足してあるので、自分でカスタムしたい人は、下のコードをコピーするよりcssファイルを読んでもらった方がいいです。

カスタムcssおぼえがき

ひとまず自分がやってみたこととかを備忘録も兼ねて。

ユーザーIDの取得

ユーザーごとに設定するような項目がある場合、ユーザーIDを取得する必要があります。
下で紹介しているユーザーを個別に非表示する時や、Among Us用サンプルを使う時などに使います。
下の説明はDiscordクライアント版の画面ですが、ブラウザ版でも同じ手順で出来ると思います。

開発者モードにする

1度開発者モードにすれば、元に戻すまでそのままなので、この手順は1回でいいです。

①画像の矢印のところにある歯車アイコンをクリックする。
設定画面が開きます。

②詳細設定メニューをクリックして開く。

③「開発者モード」のスイッチをONに。(画像はONの状態)

ユーザーの上で右クリック

あとは、DMやサーバーのチャットなどのところで、アイコンの上で右クリックすると1番下に「IDをコピー」という項目が出ますので、それをクリックすればIDをコピー出来ます。
自分も、他の人でも、フレンドになっているかどうかやサーバーに参加しているか等は関係なくコピー出来ると思います。
このIDを使ってカスタムするものは色々あるので、コピーの仕方は覚えておくと便利です。

アイコンのサイズ

css上では50pxになっているのですが、画像ファイル自体は128pxのようです。
Discordくん、500px×500px以上を推奨してなかったっけ…。
まぁ500pxとかで表示されてもデカすぎるからこれでいいと思う(適当)

フォントの変更

Google Fontsの@importが有効なのを確認しました。
最近Google Fontsは日本語フォントが増えて来てカワイイフォントとかも使えますよ~!
見本は「Delta Gothic One」です。
あとDiscord Streamkit Overlayのデフォルトのフォントは「Whitney」というフォントなんですが、これ欧文フォントなので、そういう意味でも差し替えた方がいいんじゃないかな~と思いますね。
Noto SansとかM Plusとかは太い字もあって文字サイズ小さくしても視認しやすく出来ると思う。

画像について

サーバーのテキストチャンネルに投下した画像のリンクURLから貼れるのを確認しました。
テキストチャンネルがプライベート状態でも読み込めました

テスト上とOBS上のズレ

各要素をposition:relativeで動かした場合、テストhtml上の表示とOBS上の表示で若干のズレがあるっぽい。
私が調整したときは5px以上ズレてた。
なので、ざっくりtestでcssを作った後、OBS上で調整するといいかも。

SLOBSはGoogle Chromeと同じエンジンっぽいです。Chromeだとズレなかった。
表示確認はChromeでやるといいかもです。

日本語で名前の差し替えをしたい場合

content:に日本語を書くと文字化けします。アルファベットなどであればそのまま入力しても出ます。
日本語を使う場合はユニコード番号で指定してやる必要があります。
たとえば、「ユウ」なら「\30E6\30A6」という具合です。

変換サイトを使いましょう。私はここ使った。
beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

ID指定でユーザーをまるごと非表示

何らかの理由でユーザーを非表示にする必要がある場合、cssで非表示に出来ます。

.voice-container .voice-states .voice-state[data-reactid*="*書き換える*"] {
    display:none;
}

Copy

その他ハマりそうだったこと

imgタグには:beforeと:after使えない(置換要素には使えないそうで)
使いたかったんや…

サンプルcss

zipの中にも入ってますが、サンプルっていうか実際に私が適用しているcssです。
良かったら使ってください。

Among Us 10人用(縦並び)

/* 値を利用しやすくしてる定義エリア */
:root {
	--aured:url('*書き換える*');
	--aublue:url('*書き換える*');
	--augreen:url('*書き換える*');
	--aupink:url('*書き換える*');
	--auorange:url('*書き換える*');
	--auyellow:url('*書き換える*');
	--aublack:url('*書き換える*');
	--auwhite:url('*書き換える*');
	--aupurple:url('*書き換える*');
	--aubrown:url('*書き換える*');
	--aucyan:url('*書き換える*');
	--aulime:url('*書き換える*');
	--aumaroon:url('*書き換える*');
	--aurose:url('*書き換える*');
	--aubanana:url('*書き換える*');
	--augray:url('*書き換える*');
	--autan:url('*書き換える*');
	--aucoral:url('*書き換える*');

	--discord-avatarsize:80px;
	--crewmate-iconsize:55px;
}

@keyframes pyonpyon {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, -0.5em); }
	100% { transform: translate(0, 0); }
}

body {
	margin: 0px;
	overflow: hidden;
	background:transparent;
}

.voice-container {
	margin:0;
	padding:1em 0 0 0;
}

.voice-container .voice-states {
	padding-left:0;
	padding:0;
	margin:0;
	transform:translateX(45px);
}

.voice-container .voice-states .voice-state {
	height:var(--discord-avatarsize);
    margin-bottom: 5px;
	list-style-type: none;
	min-width:var(--discord-avatarsize);
	max-width:var(--discord-avatarsize);
}

.voice-container .voice-states .voice-state .avatar {
	height: var(--discord-avatarsize);
    width: var(--discord-avatarsize);
    border:0 solid transparent;
    border-radius: 0;
    float: none;
    margin-right: 0px;
	margin:0;
}

.avatar {
	margin:0;
	filter: brightness(60%);
}


.voice-container .voice-states .voice-state .avatar.speaking {
	border-color:transparent !important;
}

.speaking {
	filter: brightness(100%) !important;
	animation: pyonpyon 0.5s infinite ease;
	border:0;
	box-shadow: 0 0 10px yellow;
}

.voice-container .voice-states .voice-state .user {
	padding-top:0;

	position:relative;
	top:-23px;
	display:inline-block;
	text-align:center;
	z-index:2;
	min-width: var(--discord-avatarsize);
	max-width: var(--discord-avatarsize);
	overflow:hidden;
	white-space:nowrap;
	font-size:8pt !important;
	background-color:rgba(33, 31, 30, 0.6) !important;
}

.voice-container .voice-states .voice-state .user .name {
	font-size:8pt !important;
	border:0;
	margin:0;
	background-color:transparent !important;
}

.voice-state .user:before {
	margin:0;
	margin-right:0;
	color: #ffffff;
}

/* クルーメイトアイコン設定部 */
.voice-state:after {
	display: inline-block;
    width: var(--crewmate-iconsize);
    height: var(--crewmate-iconsize);
	position:relative;
	bottom:85px;
	left:-45px;
	z-index:5;
	background-size: contain;
	vertical-align: middle;
	content: '';	/*何も入れない*/
}

/* クルーメイトアイコン(人数分コピペする) */
.voice-state[data-reactid*="*書き換える*"]:after {
    background-image:var(--aured);
}

Copy

ブラウザソースの設定値

幅:150以上
高さ:1080
※高さが足りないと、表示範囲からはみ出した人は画面に出ません

雑にポイント
  • 実況者が良く使ってる、画面右端に縦一列に表示するアレ
  • Discordのアイコン左にクルーのアイコンを表示(プレイ状況との連動はしてない)
  • ※クルーメイトアイコンは同梱してません※
  • 名前はアイコンにかぶるようにしてある
  • 喋ってない人はアイコンが暗い
  • 喋ってる人はアイコンが明るくなり縁取りがついてぴょんぴょんする
ユーザーIDを使います

上の「カスタムcssおぼえがき」のところに書いたユーザーIDのコピーを使います。
.voice-state[data-reactid*=”*書き換える*”]:after {
の*書き換える*のところをユーザーIDの数字に置き換えてください。

アイコンのURL

先に、自鯖にアイコン素材を上げるか、Discordに貼った画像を取り込むなどをします。
そのアイコンのURLは、cssの1番上にある、–auredとか–aublueとか書いてあるところにURLを書き込みます。
Discordに貼った場合は、貼ったアイコン画像のところで右クリックして、リンクをコピーすればURLが取得できます。

各プレイヤーにアイコンを設定する

/* クルーメイトアイコン(人数分コピペする) */と書いてあるところの設定をコピーして使います。
background-image:var(–aured);–auredのところが色を設定するところです。ここを変更します。
色の名前はcssの先頭にある、–auredとか–aublueとかがいっぱい書いてあるところを確認してください。
たとえば、紫にしたい場合は、–aured–aupurpleに書き換えます。

なお、色の名前はAmong Us Wikiに書いてある名前に準拠しています。

クルーアイコンを右にしたいとき
  • .voice-container .voice-statestransform:translateX(45px);削除
  • .voice-state:afterleft:-45px;left:75px;

雀魂-じゃんたま-用

.voice-container {
	padding:30px;
}
.voice-container .voice-states {
	padding-left:0;
}

.voice-container .voice-states .voice-state {
	display:inline-block;
	text-align: center;
	height:auto;
	margin-bottom:0;
	margin-right:15px;
}

.voice-container .voice-states .voice-state .avatar {
	box-sizing: border-box;
	display:block;
	height:128px;
	width:128px;
	border:10px solid transparent;
	float:none;
	margin-right:0;
}

.avatar {
	margin:0;
	filter: brightness(60%);
}


.voice-container .voice-states .voice-state .avatar.speaking {
	border-color:#E87A90;
	transform:translateY(-15px);
	filter: brightness(100%) !important;
}

.voice-container .voice-states .voice-state .user {
	padding-top:7px;
}

Copy

ブラウザソースの設定値

幅:1920
高さ:260以上

雑にポイント
  • アイコンを大きくして横並びにしてある
  • 喋ってない人はアイコンが暗い
  • 喋ってる人はアイコンが明るくなり縁取りがついて上に飛び出す

Among Usの画面と違ってぴょんぴょんせず、ニョキッと飛び出すだけの簡単仕様です。
じゃんたまで使ってるから「じゃんたま用」って書いてますが、汎用的に使えると思います。
画面内に入れようとしたけど、どこに入れても微妙だったのでゲーム画面の下に並べてる。

ゲーム画面自体はChromeで開いて、上72pxトリミングして表示してます。

アイコンを画面中央に寄せる

.voice-container .voice-statestext-align:center;を追加する。

おわりに

わたくし10年くらい前にゲーム実況してたことがあるんですが、当時と今とでは環境がガラッと変わってて浦島太郎状態でした。
いい環境になったなぁ…すげぇなぁ…と思いながらcssをぽちぽち書き換え作業してました。
このサイトはcssを自分で書いてるので、そういうの活かせて良かったなって思いました。

なお、css書いてると時間が溶けます。(迫真)

お読みいただき有難うございました!
テスト用データ、是非活用してください!

参考になる記事

備忘録をかねる。

よろしければ

今後ともまとめを作っていきたいと思います。
マシュマロへ応援メッセージや、Donationのリンクからお茶奢っていただけたりすると励みになります~よろしくお願いします!

更新履歴

  • 2021.07.17:ユーザーID取得について追記
  • 2021.07.13
    • ブラウザソースの設定値についての記述を追加
    • カスタムcssおぼえがきにユーザーを非表示にする方法を追加
    • 「Among Us用」を「Among Us10人用(縦並び)」に変更。cssを更新。カスタムについての記述を追加
    • じゃんたま用にセンタリングカスタムの記述を追加
  • 2021.06.23:初版