目次
- はじめに
- できること
- 実行環境
- 方法
- 結果
- おわりに
はじめに
この記事の続編です。
ステータスを固定しつつ、配信・録画画面上でおしゃれにできます。
ステータス固定方法は下記を参照してください。
OBSにCCFOLIA上の指定したキャラクターのステータスを表示するカスタムCSSについて
OBSでTRPGの録画や配信をする際、CCFOLIA上のキャラのステータスを良い感じに表示して画面を彩りたいって思う方向けの記事です。
イニシアチブに左右されずステータスを固定できます。
本件はサポート致しません。自己責任でお願いします。
カスタムCSSが正常に動作しなかった際、CCFOLIAの運営さん・OBSの運営さんに問い合せをしないでください。
配信等で利用される際は、概要欄にURLなどを記載して頂けると励みになります！
CCFOLIAキャラ駒のステータスをOBS配信用におしゃれにするCSSテンプレ https://qiita.com/aoko_2477/items/470932138755a3687324
できること
- ステータス表示をおしゃれにカスタマイズできます。
- ステータス変動時には、バーがスムーズに変化するアニメーションが付きます。
ステータスの装飾イメージ
OBS盤面上イメージ
実行環境
CCFORIA 1.33.10
OBS Studio 30.0.2
更新情報
(2025.10.06)
ステータス同士の間隔を制御する変数 --status-gap を 縦横で独立した変数 に分離しました。これにより、列間と行間を別々に調整できるようになっています。githubも更新しました。
方法
下記のコードをカスタムCSSに記載してください。
@import url("https://aoko2477.github.io/ccfolia-css/status/fixed-status-stylish.css");
オプションとして、色やステータスの横並びの列数を変更したい場合は下記を追記して変更してください。
デフォルトは落ち着いた配色にしています。
/* ===== 必要最小限の変数（レイアウト＋見た目） ===== */
:root {
/* レイアウト */
--status-columns: 1; /* デフォルト1列 */
--status-width: 80px; /* デフォルト幅 */
/* ステータスの行列の隙間を独立で制御 */
--status-gap-x: 6px; /* 横のすき間（column-gap） */
--status-gap-y: 0px; /* 縦のすき間（row-gap） */
/* 互換用（未設定時のフォールバック※旧仕様維持の場合、x,yにunsetを使用してください） */
--status-gap: 2px;
/* ゲージ/色 */
--gauge-height: 3px;
--gauge-radius: 2px;
--gauge-color: #6a6a6a; /* モノトーン */
--gauge-track: rgba(255,255,255,0.18); /* 暗背景でも見える */
--gauge-border: rgba(255,255,255,0.28); /* トラックの輪郭 */
--label-color: #f5f5f5; /* ラベル色（暗背景想定） */
}
使用例
※ステータスの間隔を横幅だけ変更しています。
主な変更点
-
レイアウトを整数列数指定に対応
- 列数と幅を別々に指定できるようにし、自由度をアップ
-
ゲージデザインをモノトーン基調に変更
- 極細（3px）・下寄せ表示でスッキリした印象に
-
ラベル文字に白縁をやめて影を追加
- 暗背景でも読みやすく、全体のトーンを落ち着かせる
-
イニシアティブの表示を左上＆控えめ配色に変更
- 半透明ダーク＋白文字で悪目立ち防止
-
行間・ラベル間隔の微調整
- 見やすさを保ちつつ全体をコンパクトに
- 🆕ステータス同士の間隔を制御する変数
--status-gapを 縦横で独立した変数 に分離- 列間と行間を別々に調整できるように
(おまけ)変更できるオプション（CSS変数）
| 変数名 | 説明 | 初期値 |
|---|---|---|
--status-columns |
横に並べる列数（整数） | 1 |
--status-width |
1つのステータスの幅 | 80px |
--status-gap-x |
🆕横方向（column-gap） | 6px |
--status-gap-y |
🆕縦方向（row-gap） | 0px |
--status-gap |
旧仕様（互換用一括指定） | 2px |
--gauge-height |
ゲージの縦幅 | 3px |
--gauge-radius |
ゲージの角丸 | 2px |
--gauge-color |
ゲージの色 | #6a6a6a |
--gauge-track |
ゲージ背景色 | rgba(255,255,255,0.18) |
--gauge-border |
ゲージ外枠の色 | rgba(255,255,255,0.28) |
--label-color |
ラベル文字色 | #f5f5f5 |
🧩 旧仕様を維持したい場合
既存テーマで --status-gap のみを使っている場合、
下記のように x / y を unset に設定することで、
フォールバックが有効になり自動的に旧仕様の動作を維持できます。
:root {
--status-gap: 2px; /* 一括指定（旧仕様） */
--status-gap-x: unset; /* ← 新仕様を無効化してフォールバック */
--status-gap-y: unset;
}
⚙️ 更新が反映されないときの対処
GitHub Pages（aoko2477.github.io）のキャッシュが残っている場合、
最新版のCSSが読み込まれないことがあります。
このときは、クエリパラメータ（?ver=）を付与して強制的に再取得してください。
対処方法
URLの末尾に ?ver= と任意の文字列（例：更新日やバージョン番号）を付けて読み込みます。
@import url("https://aoko2477.github.io/ccfolia-css/status/fixed-status-stylish.css?ver=20251006");
結果
おしゃれなステータス表示の出来上がり。
OBS盤面上イメージ
良い感じにルームチャットを出したり、秘匿用に下の方からルームチャットの内容が浮き出てきて消えていくCSSも需要があればそのうち記事にします。(実はgithubにはすでに上がっているのですが...)
おわりに
以前書いた記事が、気付けば4万6千回以上もご覧いただいていたようで、多くの方のお役に立てたことをとても嬉しく思います。
今回の記事は、僕がセッションを録画する際に「ステータスをいい感じにしたいな」と思って作ったものを、せっかくなので共有しようと執筆しました。
少しでも皆様のお役に立てれば幸いです。
それでは皆様、快適なTRPGライフをお過ごしください～