目次
- はじめに
- できること
- 実行環境
- 方法
- 結果
- おわりに
はじめに
この記事の続編です。
ステータスを固定しつつ、配信・録画画面上でおしゃれにできます。
ステータス固定方法は下記を参照してください。
OBSにCCFOLIA上の指定したキャラクターのステータスを表示するカスタムCSSについて
OBSでTRPGの録画や配信をする際、CCFOLIA上のキャラのステータスを良い感じに表示して画面を彩りたいって思う方向けの記事です。
イニシアチブに左右されずステータスを固定できます。
本件はサポート致しません。自己責任でお願いします。
カスタムCSSが正常に動作しなかった際、CCFOLIAの運営さん・OBSの運営さんに問い合せをしないでください。
配信等で利用される際は、概要欄にURLなどを記載して頂けると励みになります！
CCFOLIAキャラ駒のステータスをOBS配信用におしゃれにするCSSテンプレ https://qiita.com/aoko_2477/items/470932138755a3687324
できること
- ステータス表示をおしゃれにカスタマイズできます。
- ステータス変動時には、バーがスムーズに変化するアニメーションが付きます。
ステータスの装飾イメージ
OBS盤面上イメージ
実行環境
CCFORIA 1.33.1
OBS Studio 30.0.2
方法
下記のコードをカスタムCSSに記載してください。
@import url("https://aoko2477.github.io/ccfolia-css/status/fixed-status-stylish.css");
オプションとして、色やステータスの横並びの列数を変更したい場合は下記を追記して変更してください。
デフォルトは落ち着いた配色にしています。
/* ===== 必要最小限の変数（レイアウト＋見た目） ===== */
:root {
/* レイアウト */
--status-columns: 1; /* ← デフォルト1列 */
--status-width: 80px; /* ← デフォルト幅 */
--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）・下寄せ表示でスッキリした印象に
-
ラベル文字に白縁をやめて影を追加
- 暗背景でも読みやすく、全体のトーンを落ち着かせる
-
イニシアティブの表示を左上＆控えめ配色に変更
- 半透明ダーク＋白文字で悪目立ち防止
-
行間・ラベル間隔の微調整
- 見やすさを保ちつつ全体をコンパクトに
(おまけ)変更できるオプション（CSS変数）
| 変数名 | 説明 | 初期値 |
|---|---|---|
--status-columns |
横に並べる列数（整数） | 1 |
--status-width |
1つのステータスの幅 | 80px |
--status-gap |
ステータス同士の間隔 | 6px |
--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 |
結果
おしゃれなステータス表示の出来上がり。
OBS盤面上イメージ
良い感じにルームチャットを出したり、秘匿用に下の方からルームチャットの内容が浮き出てきて消えていくCSSも需要があればそのうち記事にします。(実はgithubにはすでに上がっているのですが...)
おわりに
以前書いた記事が、気付けば4万6千回以上もご覧いただいていたようで、多くの方のお役に立てたことをとても嬉しく思います。
今回の記事は、僕がセッションを録画する際に「ステータスをいい感じにしたいな」と思って作ったものを、せっかくなので共有しようと執筆しました。
少しでも皆様のお役に立てれば幸いです。
それでは皆様、快適なTRPGライフをお過ごしください～