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

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

[Ad]

目次 [目次を閉じる]

概要

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

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

【カスタムCSS】横並びCSS＋AmongUsクルーメイト表示
このページでは、Discord Streamkit Overlay用のカスタムCSSの配布と使い方、追加カスタムの方法について説明しています。 …
https://albalunaweb.net/assets/stream/customcss-yoko

2023.3.5 注意書き

カスタムcssをimportする際、Discordが許可しているドメインからでないと正しくimport出来ない仕様になったようです。
教えていただいたリプライ
この仕様変更に伴い、githubのURL⇒DiscordのURLに変更しました。
AmongUsのクルーメイトアイコンもgithubからではなくDiscordに素材をアップして読み込ませるように変更しています

正しく動作しない場合、githubに上げているソースをそのままカスタムcss欄にコピペして使用して動作するかどうかを確認してみてください。
GitHub

表示サンプル

元々は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

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

特徴

各タイプ共通の特徴
  • アイコンはマルではなくシカクになる
  • アイコンは縦並びになる
  • 名前がアイコンの上に乗る（乗る位置はそれぞれ異なる）
  • 喋っていない人のアイコンは暗く、喋っている時に明るくなり、ぴょんぴょん動く
  • デフォルトの「喋っている間に緑枠がつく」仕様は無くなる（色をつけたり色を変更することは可能）
  • AmongUsクルーメイト部分はCSSで表示するので、サイズや位置を自分で調整する必要がない
  • どちらも11人以下推奨（12人以上の場合は横並びCSSをおすすめします）
タイプ別の特徴

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

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

アイコンサイズ固定（人数指定可能）タイプ

クルーメイトなし
@import url('https://cdn.discordapp.com/attachments/1081832346610839562/1081841511529975828/tate-fix.css');

Copy

クルーメイトあり

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

@import url('https://cdn.discordapp.com/attachments/1081832346610839562/1081841511529975828/tate-fix.css');
@import url('https://cdn.discordapp.com/attachments/1081832346610839562/1081841804275613736/tate-fix-amongus.css');

Copy

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

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

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

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

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

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

クルーメイトなし
@import url('https://cdn.discordapp.com/attachments/1081832346610839562/1081841568060821514/tate-flex.css');

Copy

クルーメイトあり

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

@import url('https://cdn.discordapp.com/attachments/1081832346610839562/1081841568060821514/tate-flex.css');
@import url('https://cdn.discordapp.com/attachments/1081832346610839562/1081842010111102986/tate-flex-amongus.css');

Copy

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

クルーメイトの色の指定方法は「ユーザーIDで指定するタイプ」と「表示順で指定するタイプ」の２種あります。
それぞれ色の指定方法の説明をお読みください。

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

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

色の名前

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

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

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

:root {
	--name:var(--color);
}
li[class*="_voiceState_"] img[src*="USERID"] + div[class*="_user_"]:after { background-image:var(--name); }

Copy

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

:root {
	--test01:var(--red);
	--test02:var(--blue);
	--test03:var(--green);
	--test04:var(--pink);
}
li[class*="_voiceState_"] img[src*="player1"] + div[class*="_user_"]:after { background-image:var(--test01); }
li[class*="_voiceState_"] img[src*="player2"] + div[class*="_user_"]:after { background-image:var(--test02); }
li[class*="_voiceState_"] img[src*="player3"] + div[class*="_user_"]:after { background-image:var(--test03); }
li[class*="_voiceState_"] img[src*="player4"] + div[class*="_user_"]:after { background-image:var(--test04); }

Copy

プレイヤーを増やす時に書くこと
  1. name
    ２箇所あるので注意してください。この２箇所は必ず同じ文字列にしてください。
    任意の半角文字列を記述します。プレイヤー名と合わせるのが分かりやすいでしょう。
  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://cdn.discordapp.com/attachments/1081832346610839562/1081845639610109952/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の方で順番を見てください。

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

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

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

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

追加カスタム

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

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

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

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

img[class*="_avatar_"] {
	border-radius:15px;
}

Copy

喋っている人を枠で囲む
img[class*="_avatarSpeaking_"] { box-shadow: 0 0 0 5px yellow; }

Copy

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

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

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

:root { --marginnum:7px; }

Copy

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

アイコンサイズ固定（人数指定可能）タイプ用
ul[class*="_voiceStates_"] {
	top:50%;
	transform:translateY(50%);
}

Copy

人数に応じてアイコンサイズが自動変化するタイプ用
ul[class*="_voiceStates_"] {
	justify-content:center;
}

Copy

アイコン表示位置を画面の右側にする
アイコンサイズ固定（人数指定可能）タイプ用

クルーメイトなし用

img[class*="_avatar_"],
div[class*="_user_"] {
	left:unset;
	right:0;
}

Copy

クルーメイトあり用

img[class*="_avatar_"],
div[class*="_user_"] {
	left:unset;
	right:0;
}

li[class*="_voiceState_"] img + div[class*="_user_"]:after {
	left:unset;
	right:calc(var(--avatarsize) * 0.9);

	transform-origin: bottom left;
transform:rotateY(180deg) translateX(110%);
}

Copy

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

クルーメイトなし用

@keyframes pyonpyon {
	0% { transform: translate(0, 0) rotate(-90deg); }
	50% { transform: translate(0, -0.6em) rotate(-90deg); }
	100% { transform: translate(0, 0) rotate(-90deg); }
}
ul[class*="_voiceStates_"] {
	left:unset;
	right:0.5vh;
}
img[class*="_avatar_"], div[class*="_user_"], span[class*="_name_"] {
	bottom:unset;
	top:0;
}

Copy

クルーメイトあり用

@keyframes pyonpyon {
	0% { transform: translate(0, 0) rotate(-90deg); }
	50% { transform: translate(0, -0.6em) rotate(-90deg); }
	100% { transform: translate(0, 0) rotate(-90deg); }
}
ul[class*="_voiceStates_"] {
	left:unset;
	right:0.5vh;
}
img[class*="_avatar_"], div[class*="_user_"], span[class*="_name_"] {
	bottom:unset;
	top:0;
}
li[class*="_voiceState_"] img + div[class*="_user_"]:after {
	bottom:unset;
	top:0;
	transform:scale(0.85) translate(0,100%) rotateZ(-90deg) rotateY(180deg);
}

Copy

喋っている間のアニメーションをOFFに
img[class*="_avatarSpeaking_"] { animation:none; }

Copy

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

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

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

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

li[class*="_voiceState_"]:nth-child(1) img + div[class*="_user_"]:after { background-image:var(--color); }

Copy

実装上の問題

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

前Verのように縦書きにすることも可能だったが、実装上長くなりそうだったので縦書きにしなかった。

「人数に応じてアイコンサイズが自動変化するタイプ」のアニメーション方向

v2022.12.18から横方向になった。
これは実装上、横並び版を縦並びに見せかけているため、縦にアニメーションするとアイコンが切れてしまうから。
かといって、切れないようにすると今度は名前が長い場合にはみ出して表示される恐れがあったため、今Verでは横アニメーションの実装にした。

CSSが冗長です

ごめんなさい。

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

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

カスタムCSSTips

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

【2022年12月更新対応版】Discord Streamkit Overlayテスト用HTML＆カスタムCSSを作りました
やっぱりタイトルが長い！！！ 2022年12月に更新しました！ この記事ではDiscord Streamkit Overlayのテスト用HTML…
https://albalunaweb.net/note/10296.html#memo

困ったら

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

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

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

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

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

謝辞

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

GitHub - automuteus/automuteus: Discord Bot to automute Among Us players…
Discord Bot to automute Among Us players at round transitions, in conjun…
https://github.com/automuteus/automuteus

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

更新履歴

  • 2023.03.05：
    @importが効かない問題の対応

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