【カスタム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-tate

2023.3.5 注意書き

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

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

表示サンプル

自分の配信で最大15人でプレイすることがあり、縦並びでは見づらかったので横並び版を作りました。
かなり便利だと思うので、たくさんの人に使って欲しいです。

CSSの使い方

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

カスタムCSSを使うときは

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

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

Copy

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

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

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

下はブラウザの幅を変更し、右側にVの身体を置いたイメージ図です。

基本のカスタムCSS

クルーメイトなし版とクルーメイトあり版を用意しました。
クルーメイトあり版で「ユーザーIDを使わずに指定する方法」は「AmongUsクルーメイト色の指定方法」をご覧ください。

特徴

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

クルーメイトなし

@import url('https://cdn.discordapp.com/attachments/1081832346610839562/1081841027360509963/yoko.css');

Copy

クルーメイトあり

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

@import url('https://cdn.discordapp.com/attachments/1081832346610839562/1081841027360509963/yoko.css');
@import url('https://cdn.discordapp.com/attachments/1081832346610839562/1081841317837025350/yoko-amongus.css');

Copy

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

クルーメイトの色の指定方法は「ユーザーIDで指定するタイプ」と「表示順で指定するタイプ」の２種あります。
それぞれ色の指定方法の説明をお読みください。
ユーザー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のところに大きさを指定します。（px,em,%など）

:root { --marginnum:7px; }

Copy

アイコンを左右中央に寄せる

ul[class*="_voiceStates_"] {
	justify-content:center;
}

Copy

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

Copy

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

クルーメイトのサイズを変更する

クルーメイトを大きくしたり小さくしたり。
小数で指定します。数値が小さいほど小さく、大きいほど大きくなります。
下の例では0.3にしています。基本のcssでは0.5です。
translateXの値はお好みの数字に変更してください。（数字が大きくなると右、小さくなると左。マイナス値有効）

li[class*="_voiceState_"] img + div[class*="_user_"]:after {
	transform-origin:bottom right;
	transform:scale(0.3) translateX(100%);
}

Copy

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

クルーメイトを左向きにします。
横位置調整はtranslateX(100%)の部分を変更します（数字を大きくすると左へ、小さくすると右へ）。
scaleの数字は基本のcssに設定している値です。上の「サイズを変更する」と併用する場合は、ここの数字も変更してください。

li[class*="_voiceState_"] img + div[class*="_user_"]:after {
	transform-origin:bottom right;
	transform:scale(-0.5,0.5) translateX(100%);
}

Copy

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

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

li[class*="_voiceState_"] img + div[class*="_user_"]:after {
	transform:scale(0.5) translateX(120%);
	transform-origin:bottom left;
}

Copy

クルーメイトをアイコンの裏側に置く

にょきっと生えてます。喋っている間、クルーも一緒に動かしたりは出来ません…
サイズや位置の調整はscaleやtranslateの値を調整してください。

li[class*="_voiceState_"] img + div[class*="_user_"]:after {
	z-index:0;
	transform: scale(1) translate(10%, -50%);
}

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

AmongUs配信者風カスタム

AmongUs配信者の皆さん風の画面を作りました。個性ありますね。
サンプル画像はDiscordのアイコンとクルーメイトのアイコン配置のみの再現で、それ以外のパーツは再現入れていません。
また、いずれもブラウザ設定のサイズは幅1920、高さ1080の設定です。

かなりたくさんカスタムを入れているので、コードめちゃくちゃ長いです。
あくまで「配信者風」なので、完全一致はさせてません（完全一致させるには数字を細かく調整しないといけないので）。
何らか問題が発生した場合は削除します。

アベレージさん風

Vの身体を入れるスキマを作っています。
また、Vの身体が喋っているので、自分にユーザー非表示指定を入れているみたいです。
喋っている人がオレンジ枠になるの、アベレージさんの画面の色だなーって感じ。
また、AmongUs配信者では珍しく（？）丸アイコンの画面です。

ul[class*="_voiceStates_"] {
	width:1550px;
	padding:0 15px;
}
li[class*="_voiceState_"] {
	margin:0 2% 0 0;
}
img[class*="_avatar_"] {
	border-radius: 50%;
	bottom:1.5em;
}

img[class*="_avatarSpeaking_"] {
	box-shadow: 0 0 0 5px orange;
}
div[class*="_user_"] {
	text-align: center;
}
span[class*="_name_"] {
	text-align: center;
	font-size:16px !important;
}
li[class*="_voiceState_"] img + div[class*="_user_"]:after {
	bottom:1.5em;
	transform-origin:top right;
	transform:scale(-0.45, 0.45) translate(75%, -2.5em);
}

Copy

めーやさん風

とてもシンプルだけど必要な情報が入っている、といった感じの画面です。
横幅いっぱいにアイコンが並んでいるので、その分大きくて見やすい！

li[class*="_voiceState_"] img + div[class*="_user_"]:after {
	background-position:left bottom;
	transform-origin:bottom left;
	transform:scale(0.3) translateY(-50%);
}
span[class*="_name_"] {
	border-radius:0 3px 0 0;
}

Copy

ふじみやさん風

喋っている人の名前が赤文字になり、かつアイコンと名前が全体的に上に移動するので、「喋っている」ことがすごく分かりやすいカスタムです。
Discordアイコンの左側にマップを入れる余白を追加しています。

:root { --marginnum:1%; }

ul[class*="_voiceStates_"] {
	width:1350px;
	position:absolute;
	right:0;
}

img[class*="_avatar_"] {
	bottom:3em;
	border-radius:10%;
}
img[class*="_avatarSpeaking_"] {
	bottom:4em;
	box-shadow:0 0 0 3px #43b581;
}

div[class*="_user_"] {
	text-align:center;
	bottom:1em;
	border-radius:5px;
}
img[class*="_avatarSpeaking_"] + div[class*="_user_"] {
	bottom:2em;
}
span[class*="_name_"] {
	text-align:center;
	border-radius:5px;

}
img[class*="_avatarSpeaking_"] + div[class*="_user_"] span[class*="_name_"] {
	background-color:#a33 !important;
}

li[class*="_voiceState_"] img + div[class*="_user_"]:after {
	z-index:10;
	bottom:3em;
	background-position:left bottom;
	transform-origin:bottom right;
	transform:scale(0.45) translate(25%, 0);
}

Copy

カスタム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.18：
    Discord Streamkit OverlayのHTMLソース変更に伴い、全修正。

  • 2022.04.10：
    jsDelivr経由だとファイル更新時に約24時間更新されないので、github-pagesから持ってくるようにこのページのソースを変更（元のソースもタイムラグがありますが使えます）
    追加カスタムに「アイコンを角丸四角形にする」と「喋っている間のアニメーションをOFFに」を追加
  • 2022.03.12：
    初版（テストHTML記事から分離、追加など）