‹ shiki365 のツール置き場

ステータスバーメーカー

ココフォリアのキャラの HP・MP・SAN などを、OBS に好きなデザインで映すための「カスタムCSS」を作ります。数値はココフォリアと連動して動きます。すべてブラウザの中だけで処理され、入力した内容がどこかに送られることはありません。

デザインのひな形

ステータスの数

ココフォリアのキャラの「ステータス」に合わせます。上から1本目・2本目…の順に色が付きます(ココフォリアが表示するのは最大8本です)。

バーの並べ方
文字の置き方
キャラのアイコン画像

ココフォリアのコマの画像です。イニシアチブが 0 のときは数字が出ません。

外側の余白

光や影が切れないように、まわりに空けておく幅です。

数値を動かして確かめる(プレビューだけ。書き出す CSS には影響しません)

読み込み中...

書き出す CSS を見る

OBS での設定

  1. ソースを追加 →「ブラウザ」。URL にキャラの URL を入れます:
    https://ccfolia.com/rooms/{ルームID}/characters/{キャラクターID}
  2. 幅と高さに、上に出ている ブラウザソースの大きさ を入れます。
  3. 「カスタム CSS」の中身を全部消して、コピーした CSS を貼り付けます。
  4. 真っ白のままなら、ソースを右クリック →「対話」でココフォリアにログインしてルームに入ります(1 回やれば覚えています)。
  5. 2 人目からは、「ソースを追加」→「ブラウザ」で新しく作り、URL と CSS をそのキャラのものにします。ブラウザソースは OBS の仕様で複製できず(「複製を貼り付け」は灰色のまま)、「参照を貼り付け」で増やすと全員が同じキャラになってしまいます。大きさや位置は、右クリック →「変換をコピー」→「変換を貼り付け」でそろえられます。

ココフォリアでの設定

  • キャラの「ステータス」の並び順が、1本目・2本目…の色になります(例: HP → MP → SAN)。
  • チャットで :HP-3 :SAN=45 のように打つと、OBS 側もすぐに変わります。
  • 「ステータスを隠す」にしたキャラは、持ち主以外にはバーが表示されません。

PC に入れたフォントを使うとき

  • フォント欄で「名前で指定(PCのフォント)」を選び、フォント名を入れます。Chrome / Edge では「一覧から選ぶ」で、PC に入っているフォントを見た目で選べます(初回はフォントの使用の許可を聞かれます)。
  • OBS は自分の PC のフォントで表示するので、OBS を動かす PC にも同じフォントを入れてください。入っていないと、ふつうのゴシック体になります。
  • 漢字が入っていないフォントでは、漢字の部分だけふつうのゴシック体になります(一覧の見本の「永」で確かめられます)。