必ずお読みください


利用規約・免責事項

注意


ファイルの移動について

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

導入手順


  1. 解凍したフォルダ内にあるloading.html を、そのままOBSの画面上にドラッグ&ドロップします。
  2. OBSのソースにブラウザソースが追加されたら、幅と高さを任意のサイズに設定します。
  3. 画面上の好きな位置に配置すれば完了です!

カスタマイズ


このツールは、OBSのプロパティ内にある**「カスタムCSS」**にテキストを追記することで、自分好みにデザインを変更できます。

  1. ベースの設定コードを追加する

    OBSのソース一覧から「loading.html」をダブルクリックしてプロパティを開き、一番下にある**「カスタムCSS」**の欄に、以下のコードをすべてコピー&ペーストしてください。

    body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
    #text { content: 'NowLoading...' }
    #loadAnime { content: '1000' }
    #strAnime { content: '3000' }
    #type { content: '1' }
    #color { content: '#000000' }
    #textColor { content: '#000000' }
    
  2. コードを書き換えてカスタマイズする

    追加したコードの'' (シングルクォーテーション)の中身を書き換えることで、様々な変更が可能です。 ※注意: '' は絶対に消さないでください!

更にこだわりたい方へ(応用編)


フォントを変更する

以下のコードを追加し、[ここにフォント名] の部分を自分のPCに入っているフォント名に書き換えます。

#text { font-family: '[ここにフォント名]' }

(例: #text { font-family: 'MS ゴシック' })

フォント名の調べ方(Windows)

  1. エクスプローラーで「C:\Windows\Fonts」を開く。
  2. 表示を「詳細」に変更。
  3. 上部の項目名(「名前」など)を右クリックし、「ファミリ」にチェックを入れる。
  4. 「ファミリ」列に表示された名前を、全角・半角・スペースまで一言一句間違えずに入力してください