ココフォリアのカスタムCSS ステータス（固定化）

注意

本件はサポート致しません。自己責任でお願いします。

カスタムCSSが動かなくなった際、ココフォリアさんに問い合せをしないでください。

お願い

もし配信等で利用される際は、概要欄にURLなど記載頂けると励みになります！

OBSでココフォリアを表示させる時のカスタムCSSについて | U7D05 BAR
https://ydk.vc/obs-ccfolia-css/

ルームチャット用のカスタムCSS、デザインを流用できたら便利だよね！ってことで作りました。ただし、そのまま流用ができないケースもあるので注意……（文字色を白系統にしていると見づらくなっちゃいます……）

なお、今回は下準備が必要になりますが、イニシアチブが変更されても固定化されているのでステータスが切り替わることはありません！毎回イニシアチブが変更されるセッションでも、楽ちんだね！！

下準備

まずはココフォリアを開きます。

ルームのURLをコピーします。

いつもどおり、OBSの「ブラウザ」にある「URL」へ、ココフォリアのURLを貼り付けます。

貼り付けたURLの後ろに/characters/と記入します。

ココフォリアへ戻り、ステータス表示させたい駒を右クリック。そしてCopy Id (for dev)をクリック。

そしたらOBSへ戻り、/characters/の後ろにCtrl+VでコピーしたIDを貼り付け！

その後、OKをクリックすると…… ココフォリアのステータスだけが表示されています！

あとは、「メインのコード」の設定や、オプション機能を利用することで、色々デザイン変更出来るようなるよ！

参考サイト

Qiita

OBSにCCFOLIA上の指定したキャラクターのステータスを表示するカスタムCSSについて – Qiita 目次はじめに NPCやエネミーが出てきた際にステータスの順番が入れ替わる実行環境方法結果おわりにおまけ参考文献はじめに OBSでTRPGの録画や配信をする際、CCFOLI…

メインのコード

URL	ココフォリアのURL
幅	1920（※設定に合わせて調整）
高さ	1080（※設定に合わせて調整）
	「OBSを介して音声を制御する」にチェック

@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/status/main.css");

オプション機能

色々有効活用できるよう、オプションを設けてます。

アバターを消す

:root {
    --avatar-padding: 0;
    --avatar-display: none;
}

分母を消す

※分母の0だけを消す、というのはできません

:root {
    --status-denom-font-size: 0;
}

列の数を変更する

1にすると1列、2にすると2列、3にすると3列になります。初期は1列。

:root {
    --status-column: 2;
}

アバターとステータスの間に余白を追加する

イニシアチブが重なる問題を修正する対応です

:root {
    --avatar-margin: 1rem;
}

イニシアチブを左上に移動

@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/status/initiative_tl.css");

イニシアチブを右下に移動

アバターとステータスの間に余白を追加するを合わせて使うのがベストです。

@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/status/initiative_br.css");

イニシアチブを左下に移動

@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/status/initiative_bl.css");

ラベルと値の横幅指定

:root {
    --status-label-width: 300px;
    --status-value-width: 150px;
}

色変更機能

下記のカスタムCSSを末尾に追加することで、様々なデザインに変更することができます。

※後日説明を入れます

テンプレート

:root {
    --avatar-height: 150px;
    --avatar-width: 150px;
    --avatar-background: rgba(0, 0, 0, 0.64);
    --avatar-border-size: 3px;
    --avatar-border-style: solid;
    --avatar-border-color: rgb(245, 245, 245);
    --avatar-border-radius: 10px;

    --badge-height: 40px;
    --badge-width: 40px;
    --badge-background: rgb(245, 245, 245);
    --badge-font-size: 1.5rem;
    --badge-font-color: rgb(66, 66, 66);
    

    --status-column: 2;
    --status-height: 50px;
    --status-width: 250px;
    --status-background: var(--background-color, rgb(245, 245, 245));
    --status-font-size: 2rem;
    --status-font-color: var(--font-color, rgb(66, 66, 66));
    --status-font-secondary-color: var(--font-color-fail, rgb(154, 0, 54));
    --status-font-border-color: rgb(245, 245, 245);
    --status-border-width: var(--border-width, 0px);
    --status-border-style: solid;
    --status-border-color: var(--border-color, rgb(245, 245, 245));
    --status-border-image: var(--border-image, url());
    --status-border-radius: var(--border-radius, 0);
    --status-border-shadow: var(--border-shadow, 0);
}