![見出し画像](https://assets.st-note.com/production/uploads/images/86528134/rectangle_large_type_2_d4ec3fc063f5d61a529d6670a96827f3.jpeg?width=1200)
めちゃめちゃ動くスプラトゥーン背景素材!!!カスタマイズもできちゃう!!!配信映え!!!【HTML+CSS】
前回は「CSSを使ってOBSでスマブラ配信でのスマメイトのレート更新を少しだけ楽にする」記事を書きました。
今回はHTMLとCSSでスプラトゥーン配信で使えそうなアニメーション背景素材を作成しました。
HTMLとCSS(あとjsと画像)でできているので少しの知識でカスタマイズも可能。この記事ではファイルの配布と設定方法のみを記載します。
実際の画面
https://nekofuton.futene.net/splatoon/
(iOSでは見てません)
![](https://assets.st-note.com/production/uploads/images/86528019/picture_pc_25eb593ee3c5b84cb0331a41cc4938d7.gif?width=1200)
1.ダウンロード
https://drive.google.com/file/d/1bmvIR8XWx9_fas8_a4gNhi4Z95utdxPA/view?usp=sharing
上記のリンクをクリック。
右上のダウンロードアイコンからダウンロードし、解凍する。
2.OBSで設定する
![](https://assets.st-note.com/img/1662721600217-BxHSk3k7Ge.png)
新しくシーンを作成し、ソースにブラウザを追加する。
1.+ボタンを押す。
2.ブラウザを選択。
3.ブラウザのプロパティが開く。
![](https://assets.st-note.com/img/1662722462529-dr30O22OiB.png?width=1200)
1.ローカルファイルにチェック。
2.参照ボタンをクリック。
3.ダウンロード、解凍した中にある「splatoon.bg.html」を選択。
4.幅に1280、高さに720を入力。
5.OKボタンをクリック。
![](https://assets.st-note.com/img/1662722368506-JXG9KEA70c.png?width=1200)
画面に表示されれば成功。
3.色の変更
![](https://assets.st-note.com/img/1662722673689-88E7TXeOsI.png?width=1200)
ほんの少し数値を変えるだけで、何色にでもなります。
日によって変えたり気分に合わせたりするといいかも。
![](https://assets.st-note.com/img/1662722561234-wPGkwdPBF2.png?width=1200)
1.ブラウザのプロパティを開く。(ダブルクリックなど)
2.カスタムCSSの欄に、下記のコードを追加する。
body{filter: hue-rotate(120deg);}
<!-- (120deg)を0~360で指定すると画面全体の色相をいじれる。
気分で変えるといいかも。(0deg)が初期のオレンジ。 -->
3.( deg)の数値を0~360で指定する。(例)(120deg)
4.OKボタンを推す。
4.HTMLとCSSを直接編集
![](https://assets.st-note.com/img/1662723083188-7N8Gn00tnz.png?width=1200)
![](https://assets.st-note.com/img/1662723361846-TDcawRIo0J.png?width=1200)
「splatoon_bg.html」「style.css」を直接編集することでレイアウトも自由。
CSSの簡単なアニメーションが分かれば背景色を徐々に変えたりグラデーションさせたりもできます。
滝登りイカちゃんの画像も変えられます。
5.あとがき
>なんで今さらスプラトゥーン2の待機画面?
スプラトゥーン2をほとんどやっておらず作ろうとも思わなかった。
>スプラトゥーン3バージョンは?
買ったらやります🦑
アニメーションの勉強で作ったので拙いコードです。
3時間くらい。
ご意見や動かないなどはツイッターとかに…。
ふとん(@nekofuton)さんはTwitterを使っています:
https://twitter.com/nekofuton
![](https://assets.st-note.com/img/1662726343183-YEAic7T31y.png)
この記事が気に入ったらサポートをしてみませんか?