【カスタムCSS】縦並びCSS+AmongUsクルーメイト表示

このページでは、Discord Streamkit Overlay用のカスタムCSSの配布と使い方、追加カスタムの方法について説明しています。

[Ad]

目次 [目次を閉じる]

概要

Discord Streamkit Overlayの表示を変更するためのカスタムCSSです。
このページで配布しているCSSは「アイコンを縦並びにする」タイプです。
AmongUs用にクルーメイトアイコンを表示するカスタムもご紹介しています。

横並びタイプはこちら↓をどうぞ。

表示サンプル

元々はAmongUs実況で有名なこの方とかこの方とかの画面をCSSで再現するために書き始めたものです。
かなり便利だと思うので、たくさんの人に使って欲しいです。

CSSの使い方

下で紹介しているソースをコピペするだけで簡単に使えます。プラスアルファのカスタム用CSSもコピペで利用可能です。
オンラインにあるCSSを呼び出して使っているため、不具合があった場合でも自分で直す必要はありません
つまり自分で書く必要はほとんどなく、CSSが分からない人でも使いやすいと思います。

カスタムCSSを使うときは

このページのURLを必ずクレジット表示してください。
利用自体は無料です。収益化の有無は問いません。
YouTubeなどの動画・ライブ配信の概要欄に、このページのURLを記載してください。

記載例)
カスタムCSS⇒ALBA LUNA https://albalunaweb.net/assets/stream/customcss-tate

Copy

ブラウザサイズの設定について(全CSS共通)

基本的に幅1920×高さ1080で使います。
(配信画面が1280×720である場合は、この数字にする)

「Vの身体があるので幅を変えたい」「ロゴを置きたいので高さを変えたい」などの要望がある場合は、「ブラウザソースの設定」の幅・高さの数字を変更してください。
エディタ上にてマウス操作で拡大縮小すると、意図しない表示になる可能性があります。

下はブラウザの高さを変更し、アイコンの下にロゴを置いた見本です。

基本のカスタムCSS

「アイコンサイズ固定(人数指定可能)タイプ」「人数に応じてアイコンサイズが自動変化するタイプ」の2種あります。
それぞれに「AmongUsのクルーメイトを追加するcss」を用意しました。「ユーザーIDを使わずに指定する方法」もあります。

特徴

タイプ間共通の特徴
  • アイコンはマルではなくシカクになる
  • アイコンサイズは画面の縦サイズに応じて調整される
  • アイコンは縦並びになる
  • 名前がアイコンの上に乗る(乗る位置はそれぞれ異なる)
  • 喋っていない人のアイコンは暗く、喋っている時に明るくなり、ぴょんぴょん動く
  • デフォルトの「喋っている間に緑枠がつく」仕様は無くなる(色をつけたり色を変更することは可能)
  • AmongUsクルーメイト部分はCSSで表示するので、サイズや位置を自分で調整する必要がない
タイプ別の特徴

画面の作り方のスタイルに合わせて使いやすい方をお使いください。

  • アイコンサイズ固定(人数指定可能)タイプ
    • 毎回ほぼ同じ人数ならこちらがおすすめ
    • 人数が変わってもアイコンの大きさが変わって欲しくない人向け
    • 人数を変える時もちょっと足すだけ
  • 人数に応じてアイコンサイズが自動変化するタイプ
    • 少人数~大人数まで、広い範囲で人数が変化する人におすすめ
    • cssをなるべく触りたくない人向け

アイコンサイズ固定(人数指定可能)タイプ

クルーメイトなし
@import url('https://akatsuki-yu.github.io/discordso-tester/css/tate-fix.css');

Copy

クルーメイトあり

後述の「AmongUsクルーメイト色の指定方法」とセットで使います。

@import url('https://akatsuki-yu.github.io/discordso-tester/css/tate-fix.css');
@import url('https://akatsuki-yu.github.io/discordso-tester/css/tate-fix-amongus.css');

Copy

アイコンサイズを変更する

上のいずれかの後に、:root { --usernum:※; }

コードの※の部分に半角数字を書きます。たとえば15人用サイズなら --usernum:15;にします。
人数変化に応じて毎回書き換えるのではなく「基準の人数」を指定するイメージで使ってください。
書き換える場合は11以上を指定してください。
小さい数を指定すると、アイコンが著しく大きくなり、見映えを損ないます。

サンプル画像)左:usernum:10で7人表示、右:usernum:15で12人表示。

人数に応じてアイコンサイズが自動変化するタイプ

こちらは自分で基準サイズを決める必要はありませんが、アイコンサイズは最大100pxに設定しています。

クルーメイトなし
@import url('https://akatsuki-yu.github.io/discordso-tester/css/tate-flex.css');

Copy

クルーメイトあり

後述の「AmongUsクルーメイト色の指定方法」とセットで使います

@import url('https://akatsuki-yu.github.io/discordso-tester/css/tate-flex.css');
@import url('https://akatsuki-yu.github.io/discordso-tester/css/tate-flex-amongus.css');

Copy

AmongUsクルーメイト色の指定方法

クルーメイトの色の指定方法はユーザーIDで指定するタイプ表示順で指定するタイプの2種あります。
それぞれ色の指定方法の説明をお読みください。
ユーザーID指定タイプを使いつつ、一部分のみ表示順指定タイプを併用する場合は「追加カスタム」の項をご覧ください。

それぞれのメリットとデメリット

  • ユーザーIDで指定するタイプ
    • 一度設定を書けば色変更時以外直す必要がない(色変更自体は楽に出来る)
    • メンバーが入れ替わっても色変更以外書き直す必要がない
    • 同じアカウントの人なら別サーバーでも同じ設定を使いまわせる
    • 人が増えるほどソースが長くなる。最初だけ面倒かも
    • 配信者など、固定メンバーがいる、クルーの色がほぼ決まっている人向け
  • 表示順で指定するタイプ
    • ユーザーIDを取得する必要がなく、非常に楽
    • ソースは増えない
    • 配信途中でメンバーが変更になった場合、並び順に合わせてほぼ全員分指定し直す必要がある。
    • 固定のメンバーがおらず、しょっちゅうメンバー(の色)が変わる人向け
    • ユーザーIDのことが良く分からない人向け

色の名前

色の名前は「ユーザーIDで指定するタイプ」「表示順で指定するタイプ」共通です。
カラー名はAmongUsのカラー名に準拠しています。(下の画像)

ユーザーIDで指定するタイプ

上の「基本のカスタムCSS」の「クルーメイトあり」のソースの後に、以下のソースを追記します。
書き換えるべき箇所には色をつけています。

:root {
	--name:var(--color);
}
.voice-state[data-reactid*="USERID"]:after { background-image:var(--name); }

Copy

人数分の指定が必要です。たとえば、4人分だと以下のようになります。

:root {
	--test01:var(--red);
	--test02:var(--blue);
	--test03:var(--green);
	--test04:var(--pink);
}
.voice-state[data-reactid*="000000000000000000"]:after { background-image:var(--test01); }
.voice-state[data-reactid*="111111111111111111"]:after { background-image:var(--test02); }
.voice-state[data-reactid*="222222222222222222"]:after { background-image:var(--test03); }
.voice-state[data-reactid*="333333333333333333"]:after { background-image:var(--test04); }

Copy

プレイヤーを増やす時に書くこと
  1. name
    2箇所あるので注意してください。この2箇所は必ず同じ文字列にしてください。
    任意の半角文字列を記述します。プレイヤー名と合わせるのが分かりやすいでしょう。
  2. color
    色名を入れます。色を変える時はここを書き換えます。
    厳密にはrootの指定は本来要らないのですが、人数が増えてくると人を探すのが困難になるので、定義を入れています
  3. USERID
    DiscordのユーザーID(18ケタの数字)を入れるところです。
    ユーザーIDの取得方法はこちらからご覧ください。
色を変えたい時

上の「プレイヤーを増やす時に書くこと」を既にやった人の色を変えたい時は、:rootの中のcolorだけを書き換えます。

例)test03の色をcoralに変更したい場合

--test03:var(--green); ⇒ --test03:var(--coral);

また、クルーメイトを非表示にする場合は削除します。

--test06:var(--yellow); ⇒ --test06:var(--);

Tips

OBS・SLOBSの「ブラウザソースの設定」欄に書くと超長くなるので、このID指定を書いたcssを保存し、オンラインに設置して呼び出す方法をおすすめします。
色変更をする時だけ、上の「色を変えたい時」のソースをブラウザ設定欄に記述すればOKです。
たとえば下記リンク先記事のような方法があります。
呼び出す場合は基本cssのimportより下に記述します。
参考:PLUMBAGO 雑記: Google Driveに保存したJavascript・CSSファイルをHTML上で呼び出す方法(2021/4 JSファイル不可)

表示順で指定するタイプ

上の「基本のカスタムCSS」の「クルーメイトあり」のソースの後に、以下のソースを追記します。
書き換えるべき箇所には色をつけています。

@import url('https://akatsuki-yu.github.io/discordso-tester/css/amongus-idnouse.css');

:root {
	 --crew01:var(--red);
	 --crew02:var(--blue);
	 --crew03:var(--green);
	 --crew04:var(--pink);
	 --crew05:var(--orange);
	 --crew06:var(--yellow);
	 --crew07:var(--black);
	 --crew08:var(--white);
	 --crew09:var(--purple);
	 --crew10:var(--brown);
	 --crew11:var(--cyan);
	 --crew12:var(--lime);
	 --crew13:var(--maroon);
	 --crew14:var(--rose);
	 --crew15:var(--banana);
}

Copy

青い部分以外は書き換えないでください。
通し番号は画面表示の上から順です。Discordのボイスチャンネルでの順番とDiscord Streamkit Overlayが表示する順番は少し異なるようなので、Overlayの方で順番を見てください。

例)上から6番目の人をcoralに変更したい場合

--crew06:var(--yellow); ⇒ --crew06:var(--coral);

また、クルーメイトを非表示にする場合は削除します。

--crew06:var(--yellow); ⇒ --crew06:var(--);

追加カスタム

@importより下に追記して下さい。
特に記載がない場合、@importより下ならどこでも構いません。

アイコン・名前部分カスタム

アイコンを角丸四角形にする

名前部分は連動で角丸にならないので、使用しているcssに合わせて個別に直してやる必要があります。

.voice-container .voice-states .voice-state .avatar {
	border-radius:15px;
}

Copy

喋っている人を枠で囲む
.speaking { box-shadow: 0 0 0 5px yellow; }

Copy

3番目の0のところを適当(5pxなど)な値に変えると、ぼかしになります。
4番目の5pxのところを適当(10px)な値に変えると、縁取りが大きくなります。
yellowのところは色指定です。好きな色名・カラーコードに変更してください。

アイコン同士の隙間を変更する

コードの7pxの部分に大きさを指定します。下の例では7pxに変更しています。
「人数に応じてアイコンサイズが自動変化するタイプ」での変更はあまりおすすめしません。

:root { --marginnum:7px; } 

Copy

アイコンを上下中央に寄せる

アイコンサイズ固定(人数指定可能)タイプ用
.voice-container .voice-states {
	top:50%;
	transform:translateY(50%);
}

Copy

人数に応じてアイコンサイズが自動変化するタイプ用
.voice-container .voice-states {
	justify-content:center;
}

Copy

アイコン表示位置を画面の右側にする

クルーメイトなし用です。

アイコンサイズ固定(人数指定可能)タイプ用
.voice-container .voice-states {
	left:auto;
	right:5px;
}

Copy

人数に応じてアイコンサイズが自動変化するタイプ用
.voice-container .voice-states {
	flex-flow: row-reverse;
}
.voice-container .voice-states .voice-state .user {
	transform: translateX(1.5em);
}

Copy

喋っている間のアニメーションをOFFに
.speaking { animation:none; }

Copy

クルーメイト部分カスタム

クルーメイトを左向きにする


クルーメイトを左向きにします。
横位置調整はtranslateX(120%)の部分を変更します(数字を大きくすると右へ、小さくすると左へ)。
「人数に応じてアイコンサイズが自動変化するタイプ」で使う場合は、50%くらいにします。

.voice-state:after {
	transform-origin:bottom right;
	transform:scale(-1,1) translateX(120%);
}

Copy

クルーメイトを小さくして名前の後ろに入れる


ポケットに入ってるみたいでカワイイ! クルーメイト・アイコン・名前を重ねます。
サイズの変更はscale(0.6)の中の数値を小数で変更します。
位置はtranslateX(120%)の中の数値を変更します(数字を大きくすると右へ、小さくすると左へ)。
位置を調整すれば、アイコンの右側にクルーを置くことも出来ます。

.voice-container .voice-states .voice-state .user {
	z-index:10;
}

.voice-state:after {
	transform:scale(0.6) translateX(120%);
	transform-origin:bottom right;
}

Copy

ユーザーID使用型と不使用型を併用する

ユーザーIDを使用してクルー色を指定しつつ、急なメンバー変更があった場合に使うCSSです。
たとえば、ユーザーID指定を入れていない人が急遽参戦した時などに使えます。

このcssは全CSSの最後に追記します。
上の「表示順で指定するタイプ」のcssは使わず、このcssだけ追加します。
1のところは上から何番目に表示されているかを書きます(1,2,3…)
colorのところは指定する色を書きます。たとえばcoralに変更する場合、background-image:var(--coral);のようになります。

.voice-state:nth-child(1)::after { background-image:var(--color); }

Copy

既知の問題

「人数に応じてアイコンサイズが自動変化するタイプ」の名前部分

cssのみでvoice-state(avatar)のheightを取得することが不可能なため、heightの固定が出来ない。
よって、avatarと同じheightでoverflow:hiddenを有効化することが出来ないため、はみ出して見える。
(一応iconsizeでhiddenする)

カスタムCSSについての情報

Githubで公開しています。
ダウンロードして使いたい場合はプロジェクトページからダウンロードしてください。
このカスタムCSSはMITライセンスです(Githubのプロジェクトに設定しています)
参考:たくさんあるオープンソースライセンスのそれぞれの特徴のまとめ | コリス

カスタムCSSTips

名前のフォントサイズを小さくしたり、ユーザーを非表示にするなど、どのカスタムCSSを使う場合でも共通の指定方法については、こちらのページに記載しています。

困ったら

cssに不具合がある場合のご連絡やご相談はTwitterDMにどうぞ。

CSS・素材の呼び出しについて

CSSはgithub-pagesから呼び出しています。(更新後5分程度で最新のcssを使えるようになっています)
CSSが利用している素材(クルーメイトアイコンなど)は、CDN(jsDelivr)経由で取得しています。

更新されたCSSを再読み込みする時

最新版に直らない時は、importのurlの最後に「?1」と付けてやると最新版が読み込めると思います。
(このやり方はcssがブラウザなどにキャッシュされてしまっている場合の対処法です)

謝辞

AmongUsクルーメイトアイコンプラスcssで呼び出しているクルーメイトの画像は、AutoMuteUsのGithubプロジェクト内にあるデータを使用しています。
AutoMuteUsという素晴らしいツールの公開に感謝します。

AutoMuteUsの使い方を紹介した記事もどうぞ。

更新履歴

  • 2022.04.10:
    「人数に応じてアイコンサイズが自動変化するタイプ」使用時に正しく表示出来ていなかった問題を修正
    jsDelivr経由だとファイル更新時に約24時間更新されないので、github-pagesから持ってくるようにこのページのソースを変更(元のソースもタイムラグがありますが使えます)
    サイズ自動変化タイプの名前がはみ出す問題について「既知の問題」の項に記述
    追加カスタムに「アイコンを角丸四角形にする」と「喋っている間のアニメーションをOFFに」を追加
  • 2022.03.10:
    クルーメイト追加カスタム/ユーザーID指定型と表示順指定型を併用する場合について追記
    ユーザーID指定型で外部cssにして設置する方法について追記
    上下中央寄せCSSに誤りがあったので修正・追記
  • 2022.03.05:初版(テストHTML記事から分離)