Overlayのテスト用HTMLの使い方、およびカスタムCSSについてのご案内を掲載しています。Usのクルーがぴょこぴょこするジェネレータとかが既にあるわけですが、元Web系SEアカツキユウ、cssは自分でカスタムしたいわけですよ。ボイスチャットに入ってテストして...とやろうとしても、自分ひとりしかいないから分からない...なんてこともよくある話。いう経緯でテスト用HTMLを作ったわけですが、以前作ったものを更新して、もっと使いやすくしました。このテスト用HTMLを使用する際に分かったことのメモや、カスタムCSSについてのご案内なども書いています。皆様の参考に、あるいはお役に立てますように!テスト用HTMLの使い方OBS/StreamlabsのブラウザソースのソースURL欄にGithubのURLを指定すればOK!URLにユーザー数を指定してやることで表示する人数を変えられるようになってます。それでは、以下使い方です。Desktop(以下、SLOBS)ですので、OBSをお使いの方は読み替えてください。デフォルトの表示イメージSLOBS内に読み込んだイメージです。左が初期状態(10人)、右はユーザー人数指定で15人分表示したものです。ユーザー人数の指定の仕方は後述します。「新しいソースを追加」を選択し、適当な名前を付ける「ブラウザソースの設定」画面は以下のようにする。「URL」にこれをコピペ⇒https://akatsuki-yu.github.io/discordso-tester/幅と高さは、配信画面のサイズや使用したいcssに応じて。基本的に幅1920、高さ1080でいいと思います。「カスタムcss」欄に、テストしたいcssをコピペする。ブラウザで表示して確認するhttps://akatsuki-yu.github.io/discordso-tester/にアクセスすれば表示出来ます。ローカルに保存したい場合、データはGithubのプロジェクトページからダウンロード出来ます。ZIP」をクリックすると、プロジェクト内のデータがまとめてダウンロード出来ます。自作cssを読み込んで使う場合は、index.html内に読み込みタグを追加してください。href="./custom.css">表示する人数を変更する配信画面へ取り込む場合もブラウザで表示する場合も共通です。URLの後ろに?u=(数字)を追加すると、人数が変わります。例)15人表示したい場合https://akatsuki-yu.github.io/discordso-tester/?u=15デフォルトでは10人表示するようになっています。最小は1、最大は20です。それ以外の数値や数値以外を入力すると、10人で表示されるようになっています。表示が遅くなるおそれがあるので人数制限をかけています。(コラボ配信でも20人分あれば足りると思ったので)カスタムcssについて各所で配布されているカスタムcssを使いたい上のブラウザソースの設定で、カスタムcssの欄にコピペするだけです、簡単!当サイトでも縦並び・横並びのカスタムCSSを配布しています。AmongUsのクルーメイトを出したりも出来ます(自分用に実装したんですがせっかくなので使って~~)https:///albalunaweb.net/assets/streamカスタムcssを自作したいGithubのプロジェクトデータ内にあるcss/custom_base.cssをコピーしてお使い下さい。不要なソースは削除してください。Overlayが読み込んでいる)cssファイルに直接リンクしています。Discordの方のファイル名が変わった場合に備えてstream/cssにダウンロードしたファイルを入れてあります。(こっちを読み込むように変更するかもしれません)カスタムcssおぼえがき自分がやってみたこととかを備忘録も兼ねて。大きく変わっていませんが、クラス名が変更になっていたり、li.voice-stateに設定されていたdata-react-idが無くなったことにより、これまでのカスタムcssは使えなくなっています。data-react-idがなくなったことで、ユーザーの判別がimgタグのファイル名でしか出来なくなった(ここにだけIDが使われている)のがかなり大きな変更になります。こちらのツイートが参考になります。https://twitter.com/KuoN_aLia/status/1604389093726904320?s=20&t=PynLZynbvPBWDdk765H80gユーザーひとり分のHTMLソース以下のソースがひとり分のソースです。このカタマリを人数分作ると、複数人並んでいるように作れるということです。ソース内の数字の羅列のうち、18ケタの数字部分はDiscordのユーザーIDです。このIDを利用して、特定のユーザーに固有のcssを適用することが出来ます。Akatsuki</span></div></li>Copyアイコンのサイズデフォルトcss上では50pxになっているのですが、画像ファイル自体は128pxのようです。(Chromeのデベロッパーツールで調べた)なので、テスト用HTMLで表示しているアイコン画像も128pxのものを読み込ませています。Discordくん、500px×500px以上を推奨してなかったっけ...。Fontsを@importして使えることを確認しました。画像についてサーバーのテキストチャンネルに投下した画像のリンクURLから貼れるのを確認しました。テキストチャンネルがプライベート状態でも読み込めました。リンクURLは、貼った画像の上で右クリックして、「リンクをコピー」を選べば取得出来ます。名前の差し替えをするカスタムcssに以下を追加します。!important;}Copyこのとき、content:に日本語を書くと文字化けします。半角の文字列は(多くの場合)そのまま出ます。日本語を使う場合はユニコード番号で指定してやる必要があります。「ユウ」なら「30E630A6」という具合です。変換サイトを使いましょう。何らかの理由でユーザーを非表示にする必要がある場合、cssで非表示に出来ます。一応、:nth-child()指定でも同様のことは出来るのですが、メンバーが入れ替わって表示順が変わった時にいちいち書き換えなければいけないので、ユーザーID指定の方が良いと思います。2022年12月のOverlayの変更により、まるごと非表示がかなり困難になりました。css4のhas()を使えばあっさり解決するのですが、まだ実装されていないので、今のところnth-childで指定するしかないと思います。画面上でn番目に表示されている人を非表示にします。通話メンバーが入れ替わって表示順が変わった場合は、番号を変更してください。display:none;}Copy名前のフォントサイズ指定@importで読み込んだcss内に記述しても上手く動作せず、カスタムcssにベタ書きすると動作しました。名前の部分のフォントサイズは(cssに既定のサイズが指定されているにもかかわらず)HTMLにベタ書きされており、@importしたcssよりもカスタムcssに記述したcssの方が優先順位が高くなるためと思われます。フォントサイズの最小値はおそらく10px(Chromeの最小値)なので、これより更に小さくする場合はtransform:scale();で小さくしてやる必要があります。名前の背景が途中で切れてしまったりする場合があることや、10px以下にすると全然読めないのであまりおすすめしません。説明が長いので大項目にしてあります。ユーザーごとに設定するような項目がある場合、ユーザーIDを取得する必要があります。下で紹介しているユーザーを個別に非表示する時や、AmongUs用のcssを使いたい時などに使います。下の説明はDiscordクライアント版の画面ですが、ブラウザ版でも同じ手順で出来ると思います。開発者モードにする1度開発者モードにすれば、元に戻すまでそのままなので、この手順は1回でいいです。1画像の矢印のところにある歯車アイコンをクリックする。2詳細設定メニューをクリックして開く。3「開発者モード」のスイッチをONに。(画像はONの状態)ユーザーの上で右クリックあとは、DMやサーバーのチャットなどのところで、アイコンの上で右クリックすると1番下に「IDをコピー」という項目が出ますので、それをクリックすればIDをコピー出来ます。自分も、他の人でも、フレンドになっているかどうかやサーバーに参加しているか等は関係なくコピー出来ると思います。このIDを使ってカスタムするものは色々あるので、コピーの仕方は覚えておくと便利です。おわりにわたくし10年くらい前にゲーム実況してたことがあるんですが、当時と今とでは環境がガラッと変わってて浦島太郎状態でした。いい環境になったなぁ...すげぇなぁ...と思いながらcssをぽちぽち書き換え作業してました。このサイトはcssを自分で書いてるので、そういうの活かせて良かったなって思いました。css書いてると時間が溶けます。参考にさせていただいた記事など。一部cssでお借りしているデータについては、cssの取説ページに記載し、このページでは省略しています。Overlayのボイスチャット用URLで生成されるHTML、およびその中で読み込まれているcssを抜き出し・整形したものです。Icon」を色変更して使用しています。ライセンスはCC3.0です。⇒http://www.defaulticon.com/参考記事cssカスタムなどにあたり、大変参考にさせていただきました。Overlayの仕様変更に伴うテストHTML修正および記事内ソースなどを全て変更。テストHTMLのURLは変更になっていませんが、リンク先を間違えていた...2022.03.05:HTMLをバージョンアップ、Githubに移動。cssはAssets/streamへ移動。Us10人用(縦並び)」に変更。省エネで小説本を作りたい。アカウント連携で失敗しないために小説本文に良さそうなフォントを集めました。FINAL省エネで小説本を作りたい。MelonBooksNotice当サイトに掲載のテキスト・画像、記事内容の無断転載を固く禁じます。記事やテンプレート配布ページなどをご紹介下さる場合は、URLを掲載するなど、当サイト掲載のものであることが分かるようにお願いいたします。商業メディア・ニュース等にてご紹介いただく際はお手数ですがご連絡下さいますよう、お願いいたします。