必ずお読みください

利用規約・免責事項

注意

ファイルの移動について

解凍したフォルダ内のファイル構成を変えると動かなくなります。 移動する際は必ず「フォルダごと」移動してください。

導入手順

1. 解凍したフォルダ内にある以下のどちらかのファイルを、そのままOBSの画面上にドラッグ＆ドロップします。
   • film(横).html ： 上下にフィルム帯がつく、横長画面用
   • film(縦).html ： 左右にフィルム帯がつく、縦長画面用
2. OBSのソースにブラウザソースが追加されたら、幅と高さを配信画面のサイズに設定します。
   • （例： フルHDの画面なら幅1920/高さ1080）
3. 完了です！

カスタマイズ

このツールはOBSのプロパティ内にある**「カスタムCSS」**にテキストを追記することで、帯の幅や色、流れる速度を変更できます。

横用と縦用で追加するコードが異なりますので、ご注意ください。

横用（film(横).html）のカスタマイズ

OBSのソース一覧からfilm(横).html をダブルクリックしてプロパティを開き、一番下にある「カスタムCSS」欄に以下のコードを貼り付けて数値を書き換えます。

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

:root {
    --bgHeight: 80%;
    --bgColor: #000000;
    --speed: 1s;
    --anime: var(--horizontal);
}

• --bgHeight （画面が見える範囲の広さ）

  画面が見える範囲の縦幅を調整します。%やpxで指定します。（数字が大きいほど上下の隠れる部分が小さくなります。）

• --bgColor（帯の色と透明度）

  #000000 （黒）などの16進数で指定します。 半透明にしたい場合： rgba(0, 0, 0, 0.5) のように書くと、不透明度50%の黒になります。

• --speed （流れるスピード）

  アニメーションの速度です。1s は1秒です。 （※ 0.5sなど数字を小さくすると速く、5sなど大きくすると遅くなります）

• --anime （流れる方向）

  var(--horizontal) （左に流れる）かvar(--horizontal-return) （右に流れる）のどちらかを指定します。

縦用（film(縦).html）のカスタマイズ

OBSのソース一覧からfilm(縦).html をダブルクリックしてプロパティを開き、一番下にある「カスタムCSS」欄に以下のコードを貼り付けて数値を書き換えます。

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

:root {
    --bgWidth: 50%;
    --bgColor: #000000;
    --speed: 1s;
    --anime: var(--vertical);
}

• --bgWidth （画面が見える範囲の広さ）

  画面が見える範囲の横幅を調整します。%やpxで指定します。（数字が大きいほど左右の隠れる部分が小さくなります。）

• --bgColor （帯の色と透明度）

  #000000 （黒）などの16進数で指定します。 半透明にしたい場合： rgba(0, 0, 0, 0.5) のように書くと、不透明度50%の黒になります。

• --speed（流れるスピード）

  アニメーションの速度です。1s は1秒です。 （※ 0.5sなど数字を小さくすると速く、5sなど大きくすると遅くなります）

• --anime （流れる方向）

  var(--vertical) （下に流れる）かvar(--vertical-return) （上に流れる）のどちらかを指定します。

その他・困ったとき

背景が透明にならず、真っ暗（または真っ白）になる

OBSに追加したソースをダブルクリックしてプロパティを開き、「カスタムCSS」欄の一番下に以下のテキストを追加して「OK」を押してください。

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }