目次

はじめに
NPCやエネミーが出てきた際にステータスの順番が入れ替わる
実行環境
方法
結果
おわりに
参考文献

はじめに

OBSでTRPGの録画や配信をする際、CCFOLIA上のキャラのステータスを良い感じに表示して画面を彩りたいって思う方向けの記事です。

本件はサポート致しません。自己責任でお願いします。
カスタムCSSが正常に動作しなかった際、CCFOLIAの運営さん・OBSの運営さんに問い合せをしないでください。

配信等で利用される際は、概要欄にURLなどを記載して頂けると励みになります！
OBSにCCFOLIA上の指定したキャラクターのステータスを表示するカスタムCSSについて
https://qiita.com/aoko_2477/items/d04ad1654016262c063e

NPCやエネミーが出てきた際にステータスの順番が入れ替わる

NPCやエネミーが出てきた際に順番が入れ替わってOBSに表示しているステータスの対応がずれてしまう......
セッション中によくあると思います。
特にTRPGの配信画面のようにDiscordと連携させたキャラ画像の近くにステータスを置いている場合がそうですね。

　こんな感じ

　↓NPCが出現

　順番が入れ替わる！

キャラのステータスを相対位置で指定しているとずれてしまいます。
これをCCFORIA上のキャラクターのIDを使うことで絶対指定して解決します。

実行環境

CCFORIA 1.24.8
OBS Studio 28.0.2

方法

まずはOBS側の下準備

ソースを追加
ブラウザを選択

URLを変更

ここがポイントです。

CCFORIAのリンク(画像ではルームIDを隠しています)をコピーしてきます。
例)https://ccfolia.com/rooms/{ルームID}
Copy Id (for dev)を選択して、キャラクター駒のIDを取得してください。(便宜上“{キャラクターID}”と呼称します。)
部屋のURLに/characters/を追加し、末尾に{キャラクターID}を追加します。

出来上がったURLがこちら↓
https://ccfolia.com/rooms/{ルームID}/characters/{キャラクターID}
これをURLに貼ります。

ですがこのままでは、縦長画像の場合真ん中のみになってしまいます。
※幅や高さは表示するステータス幅や、横並びの数に合わせて随時変更してください。

カスタムCSSを編集

以下のコードをカスタムCSSに貼り付けます。

※ステータス幅や、横並びの数調整部分修正しました。(CCFORIA 1.24.8)

/* スクロールバー削除 */
::-webkit-scrollbar {
  display: none !important;
}


/* キャラアイコンを削除 */
/*  コメントアウトしていますが、キャラアイコンを消したいときはこちら↓をアンコメントしてください */
/* 
.MuiBadge-root {
  display: none;
}*/

/* ステータスの横並びの数調整 */
.MuiBadge-root+div>div {
    margin-left: 4px;
    max-width: 100px;/*ここで横並びの数制御。ステータスの横幅と関連*/
    display: flex;
    flex-wrap: wrap;
}

/* ステータスの白枠の横の長さ調整 */
.MuiBadge-root+div>div>div {
    margin: 2px;
    width: 80px;/*ステータスの横幅制御：デフォルト96px*/
    position: relative;
    cursor: pointer;
}

.MuiAvatar-root {
    /*width: 40px;
    height: 40px;*/
    display: flex;
    overflow: hidden;
    position: relative;
    font-size: 1.25rem;
    align-items: flex-start;
    /*align-items: center;*/
    flex-shrink: 0;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    line-height: 1;
    user-select: none;
    /*border-radius: 50%;*/
    justify-content: center;
}

完成！！

結果

こんな感じになります。
※比較用に左上に盤面をそのまま取り込んだものを載せています。

　↓マイキャラクター一覧からキャラ駒をしまう

比較用の左上のステータスでは順番が入れ替わっていますが、下に並べている{キャラクターID}で指定したステータスはずれがありません！

おわりに

以上です。初投稿だったこともあり読み難い点もあると思いますが、皆様のお役に立てれば幸いです。

それでは皆様、快適なTRPGライフをお過ごしください～

参考文献

今回CSS汎用化に当たって参考にさせていただいたサイト様。
いつもお世話になっております。

紅坂柚木."OBSでココフォリアを表示させる時のカスタムCSSについて".U7D05 BAR.2023-03-04.
https://ydk.vc/obs-ccfolia-css/ ,(参照2023-03-25)