しゅが〜ロール日記

家族の日常やYouTube活動の情報発信

きょうのできごと1216=同好会専用CSS作ってみた〜\(˙꒳˙ )/=

f:id:sugarroll000:20210527184241p:plain

スタイルシート

仕事でも使うのでやらねばならんCSSなんですが、いきなり業務用のCSS読み解くとか、プログラミング挫折組の私には苦行(  -᷄ω-᷅ )ムリポーで、二の足を踏んでいましたが、これくらいならできるんじゃないかと、重い腰をあげてみました。

 

YouTubeのコラボなんかでDiscordを使って通話しながらやることがあるんですが、水曜恒例のオーバークック同好会もその方法でやっています。

 

で、そうなると今誰がしゃべってるんだ問題が発生するんですよ!

オーバークックは最大4人なので、ある程度予測はつきやすいですが、Among USなんかは最大15人が同時に話すので聞いている方は、聞き慣れた声以外は誰が発言したのかわかりません。

 

そんな時に画面内にアイコンを表示して、それが点滅することで、喋っている人を判別させる方法があって、その設定は、CSSスタイルシートでカスタマイズすることができます。

 

youtu.be

 

この動画の右上に表示されているアイコンと名前は、OBSにCSSを設定して表示させています。

 

 

参考にさせていただいたページはこちらです

gungeespla.github.io

このサイトの『明るさを変更する』というコードを丸パクリで、名前の色は、

Discord StreamKit Overlay

このページで変更してます。

 

このページの使い方は、以前の日記でも触れている内容をいろいろやっているときに見つけたんですが…

 

sugarrolldiary.work

 

sugarrolldiary.work

 

この辺の日記を書いたときに参考にさせていただいた動画があって、

youtu.be

 


沖縄のムックさんのこの動画で教えてもらいました!

とってもわかりやすかったです。

 

Google先生YouTube先輩、本当にたくさんの情報が出ていてありがたいですm( ^ω^ )m

 

 

そして、CSSの方ですがさらにオーバークックの青・赤・緑・黄の4色で色分けしたいし、アイコンを四角くしたいと思いまして、調べてみました!

 

youtu.be

 

仕上がりはこんな感じです✨(*ˊᗜˋ*)♡(黄色になった時バージョン)

喋るとアイコンだけ明るく表示された上にぴょこぴょこ動いてわかりやすい!

拾ってきたCSSコードを集めただけですが、自分のイメージ通りに動いてくれると本当に嬉しいです( ◜ᴗ◝)達成感✨

 

達成感GET記念に、コードも貼っとこう(   ¯꒳¯ )b✧

(同好会用なのでそのままじゃ流用できないけどね)

docs.google.com

 

 

今週の水曜の動画はまだこのCSSが出来てなかったので、名前の色分けまでのCSSで表示しています。

この四角いアイコン表示のCSSは、また次の会合で使えたらいいなと思います!ちょっと楽しみ♪

 

もっというと、これにそれぞれの選択したキャラクターも表示できたら良いのにな〜とか思ったり…🤔

出来たらやってみたいです( ◜ᴗ◝)

 

 

 

 

今日のツイートをリンクします。

 

【今日ツイ】

 

受験で勉強のためにゲームやSNSを自ら制限して頑張ってるよってだったり、仕事が激務なのにプライベートだってちゃんと楽しむよってしっかり自分の人生楽しんでたり、やりたいことに没頭したよって成果を見せてくれたり、子育て大変だけど幸せだよ〜って写真や充実ツイート発信してくれたり、頑張ってるし充実してるってツイートは本当に励みになるし私も前向きになれてほっこりします!

みんな頑張って〜୧( ๑•̀ω•́๑)૭✧

 

 

大人って…ってやつですよね(ˉ ˘ ˉ; )

 

 

新しいイベントが始まったみたいで、早速ギフトを投げてくれて始まってすぐにお着替えできました(*ˊᗜˋ*)♡

本当にみんなの愛が盛り盛りでありがたいです。あったかい( ⑉¯ ꇴ ¯⑉ )ありがとう

みんながくれたこの衣装で明日からエモラン走ります( *˙ω˙*)و 

 

( ⸝⸝•ᴗ•⸝⸝ )੭⁾⁾