配布されているテンプレートをそのまま使うと、他の配信と同じ見た目になります。色や文言を変えるだけで、ぐっと自分のものになります。プログラムの知識は要りません。
このページの内容
触るのは2つのファイルだけ開き方文言を変える（script.js）色を変える（style.css）大きさを変える変えたら反映する壊してしまったときどこまで改造していいか慣れてきたら関連ページテンプレートのフォルダを開くと、だいたいこの3つが入っています。
panda-ranking/ index.html ← さわらなくて大丈夫です script.js ← 文言・人数・期間などの「設定」 style.css ← 色・大きさ・動きの「見た目」
index.html は触らないでください。 中身の組み立てを書いているファイルで、ここを壊すと表示されなくなります。
変えたいものが「文字の内容」なら script.js、「見た目」なら style.css です。
.js や .css は、ただのテキストファイルです。特別なソフトは要りません。
ファイルを開くと、一番上にこういう部分があります。ここだけ書き換えます。
const CONFIG = {
title: "よく来てくれる人",
unit: "コメント",
period: "month",
topN: 6,
excludeOwner: true,
};
" で囲まれている部分が文字です。囲みの中だけを書き換えます" で囲みませんtrue / false は「する / しない」の意味です, は消さないでくださいたとえば見出しを変えるならこうです。
title: "うちの常連さん",
title: の部分（左側）は変えないでください。プログラムがこの名前で値を探しています。変えていいのは : の右側だけです。style.css も一番上に設定欄があります。
:root {
--pd-bg: rgba(18, 21, 34, .84);
--pd-text: #eef1f8;
--pd-accent: #6ee7b7;
--pd-width: 360px;
}
# から始まる6桁が色です。好きな色コードに置き換えてください。
「カラーコード」で検索すると、色を選ぶだけでコードが出るサイトがたくさんあります。そこで気に入った色を選んで、# ごとコピーして貼り替えるだけです。
rgba(18, 21, 34, .84) の最後の数字が透明度です。
.84 … 少し透ける1 … 完全に不透明0 … 完全に透明（背景が消えて、文字だけ浮かびます）配信画面に馴染ませたいときは、0 にして文字だけ出すのがきれいです。
同じく style.css の設定欄にあります。
--pd-width: 360px; /* 全体の幅 */ --pd-name-size: 32px; /* 名前の文字サイズ */
px は画面上の点の数です。数字を大きくすれば大きくなります。
保存したあと、OBSのブラウザソースを右クリック →「更新」してください。これでファイルが読み直されます。
反映されないときは、いったんOBSを再起動すると確実です。
症状で原因が分かります。
| 症状 | 原因 |
|---|---|
| 真っ白になった | script.js の文法エラー。, や " の消し忘れが多いです |
| 色だけおかしい | style.css の色コードの書き間違い |
| 表示は出るが動かない | script.js の設定値の型違い（数字を " で囲んだ等） |
控えを取っていれば、そのファイルを上書きすれば戻ります。取っていない場合は、購入したzipをもう一度展開してください。
ブラウザで直接開くと、原因が絞れます。
http://localhost:11180/templates/フォルダ名/index.html
配布元によります。panda studio の素材は、自分の配信用に改変するのは自由です。
ただし、どの配布元でも共通してだめなのは次の2つです。
自分の配信で使う分には、思い切って変えてしまって構いません。
設定欄の下にも触れる場所はありますが、いきなり触らないほうがいいです。
おすすめの順番はこうです。
--pd-pop-time など）1つ変えるたびに保存して更新すると、どこで壊れたかがすぐ分かります。まとめて変えないのがコツです。