【無料配布・フリー素材】虹色に光るアニメーション！ゲーミング・オーバーレイ

HTML/CSSベースの配信用オーバーレイです。

配信ソフトのOBSで動作確認を行っております。

カスタムCSSで左右反転や背景の差替、各パーツのサイズ・表示位置・非表示などのカスタマイズできます。

ゲーム画面を配信画面全体に表示するレイアウトや、雑談向けのレイアウトなどにも対応可能です。

本商品（HTMLファイル）をメモ帳などのテキストエディタで開くと、詳しいカスタムCSSの説明が読めます。

表示サイズは1920×1080を基準に作成していますが、可変長に対応しているので1280×720や異なるアスペクト比でも利用できるかと思います。

必要に応じてカスタムCSSでサイズや表示位置の調整を行ってください。

カスタムCSS例

/* 左右反転（右側にゲーム画面・左側にチャット欄）

左右反転はOBSの機能でも行えます（背景画像を指定する場合、カスタムCSSで左右反転することで画像の反転を回避することができます）。

*/

body {

--transform-horizontally: scaleX(-1);

}

/* 背景非表示 */

body {

--base-background: transparent;

}

/* 背景画像指定

表示の起点を左下にする時は「center」を「left」に、右下にする時は「right」に変更します。

自動的にメインフレームやサブフレームの切り抜き（透過）表示するので画像の加工は不要です。

セキュリティ上の理由などによりローカル画像ファイルは相対パスで指定する必要があると思われます。

表示したい画像ファイルを本商品（HTMLファイル）と同じフォルダに保存し、「画像のファイルパス」として「ファイル名（拡張子込）」のみを指定すると簡単です。

*/

body {

--base-background: center url("画像のファイルパス");

}

/* 全面ゲーム画面表示 */

body {

--base-background: transparent;

--frame-1st-top: 200vh;

--frame-2nd-top: 7vh;

--frame-2nd-left: 1vw;

--header-left: calc(50vw - (var(--header-width) * .5));

--footer-top: 200vh;

--side-banner-width: 23.6vw;

--side-banner-height: 23.6vh;

--side-banner-top: -11.8vh;

--side-banner-left: 88.2vw;

--overlay-height: 99vh;

--overlay-top: 0vh;

--overlay-order: 100;

}

/* 雑談向け */

body {

--transform-horizontally: scaleX(-1);

--frame-2nd-width: 30vw;

--frame-2nd-height: 70vh;

--frame-2nd-left: 65vw;

--frame-1st-top: 200vh;

--frame-3rd-top: 200vh;

--footer-top: 200vh;

--overlay-height: 99vh;

--overlay-top: 0vh;

--overlay-order: 100;

}

利用規約

本商品は個人・法人・非商用・商用を問わず、YouTubeなどの動画プラットフォームにアップロード・ライブ配信するオーバーレイとして利用することができます。

本商品を使用した動画・ライブ配信のスクリーンショットや切り抜きなどを作成者の実績として使用する場合があります。

本商品のダウンロードをもって、本商品を使用した動画の実績紹介用のスクリーンショットや切り抜きなどを許諾したものとします（使用する際に許可・確認・報告などの作業は行いませんが、実績紹介を目的としたものであり動画の大半を切り抜くようなことはありません）。

本商品によって発生するいかなる損害などについて、作成者・販売者は一切の責任を負いません。

本商品の著作権は神戸ルルに帰属します。

使用報告・クレジット表記などは不要ですが、概要欄にでもオーバーレイの作者として紹介していただけると嬉しいです。

紹介例 ----- ----- ----- ----- ----- ----- ----- ----- -----

Overlay Created by 神戸ルル

https://twitter.com/CodeLelou

----- ----- ----- ----- ----- ----- ----- ----- ----- -----

禁止事項

無償・有償問わず二次配布・販売などはできません（カスタマイズ・編集・加工・変形・改変したものを含む）。

収益化していたり有償メンバーのみ視聴可能な、ご自身の動画のオーバーレイとして使用することは可能です。

また、ご自身で作成したカスタムCSSの配布・販売は可能です（利用者には本商品を各自で直接ダウンロードしてもらってください）。

応援のお願い

作成者のツイッターやYouTubeのアカウントをフォローをしていただけるとありがたいです。

https://twitter.com/CodeLelou

https://www.youtube.com/channel/UCKbKIX6u_xGeipGYv8f4aXw