わんコメのテンプレートを入れて、OBSに出すまで

はじめてテンプレートを使う人向けに、フォルダをコピーするところからOBSに出るところまでを順番にまとめました。3分あれば終わります。

最終更新 2026-07-27

このページの内容

テンプレートとは何か

わんコメの「テンプレート」は、コメント欄や配信画面のパーツをHTMLで作ったものです。わんコメが受け取ったコメントを受け取って、好きな見た目で表示できます。

特別なソフトは要りません。フォルダをコピーして、OBSにURLを貼るだけです。

エクスプローラー（Macならファインダー）でフォルダが開きます。ここが置き場所です。

自分で作った別のフォルダに入れても動きません。必ずこのボタンから開いたフォルダを使ってください。

ダウンロードしたzipを展開して、中のフォルダごとさきほどの場所にコピーします。

templates/
  panda-ranking/      ← このフォルダごとコピーする
    index.html
    script.js
    style.css

展開したときに panda-ranking/panda-ranking/ と二重になっていないか確認してください。二重だとURLが合わず、OBSで真っ白になります。

http://localhost:11180/templates/フォルダ名/index.html

フォルダ名 の部分を、手順2でコピーしたフォルダの名前に置き換えてください。

| 種類 | おすすめサイズ |

|---|---|

| コメント欄 | 幅400 × 高さ600 |

| ランキング・カウンター | 幅360 × 高さ420 |

| 通知・歓迎カード | 幅520 × 高さ300 |

| エンドロール | 幅520 × 高さ640 |

迷ったら大きめにしておいて、あとからOBS上で縮小するのが簡単です。

「表示されていないときはソースをシャットダウン」はオフにしてください。オンだと、記録を残すタイプ（スタンプカード・ランキングなど）で記録が消えることがあります。

コメントが1件来れば表示されます。すぐ確かめたい場合は、わんコメのテスト機能でダミーコメントを流してください。

キーボードでテスト表示できる素材もあります。使う場合は、ブラウザソースのプロパティで「ソースの操作を有効にする」にチェックを入れてください。

多くのテンプレートは、次の2つのファイルの一番上だけを書き換えれば調整できます。

メモ帳やテキストエディタで開いて、上の方にある設定欄を書き換えるだけです。プログラムの知識は要りません。

書き換えたら、OBSのブラウザソースを右クリック →「更新」で反映されます。

書き換える前に、フォルダごとコピーして控えを取っておくと安心です。おかしくなったら戻せます。

使えます。ブラウザソースを必要な数だけ追加して、それぞれ別のURLを入れてください。

消えません。多くの素材はブラウザソース内に記録を保存しています。ただし「表示されていないときはソースをシャットダウン」がオンだと不安定になります。

テンプレートのフォルダはコピーすれば移せますが、記録（ランキングやスタンプ）は移せません。新しい環境では0からになります。

素材によります。配布元の記載を確認してください。panda studio の素材は、収益化している配信でもお使いいただけます。