Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@aoko_2477(aoko *)

ココフォリアのPC立ち絵をOBS録画上だけ非表示にするカスタムCSS

Last updated at Posted at 2025-12-01

目次

  • はじめに
  • できること
  • 実行環境
  • 方法
  • 結果
  • おわりに

はじめに

OBSでオンラインセッションを録画しているとき、こんな悩みが出たことはありませんか？

  • ココフォリアの盤面に置いた立ち絵　
  • Discord Streamkit Overlayで、しゃべった人にあわせて反応する立ち絵

この 2つの立ち絵がOBS上でダブってレイアウトがいまひとつになってしまう 問題です。

image.png
図1. カスタムCSS適用前：盤面立ち絵とDiscord立ち絵が重なっている状態

「配信・録画ではDiscordの連動立ち絵をメインに見せたいけど、
盤面からPCコマ（立ち絵）を全部どかすのは不便だし、
敵エネミーだけは盤面に出しておきたいし、
味方NPCも出しておきたいし、
プレイヤー体験として、PC の駒の後ろに一瞬だけ立ち絵を出す演出もしたい......」
image.png
図2. エネミーをPCの後ろに出してNPCも出した盤面

PCが中途半端に二重に表示されていて見栄えが少し悪く感じる。

......でもそのたびに立ち絵を出したり消したりしていると、

  • OBS上では立ち絵が二重に表示されてしまう
  • 録画向けとPL向けの演出のためにデザインを分けて考えるのも難しい
  • NPCやボスの立ち絵はちゃんと録画に残したいのに、一括で消えてしまうのは困る

この記事では、こうした

  • 「セッション画面では普通に立ち絵を使いたい」
  • 「でも 録画にだけは映したくない立ち絵 もある」
  • 「NPCや敵はちゃんと映しつつ、PCを非表示にするなど、キャラクター駒の表示・非表示を柔軟にコントロールしたい」

という状況を、OBSの「カスタムCSS」機能と ココフォリアの「キャラクターメモ」機能を使って解決する方法を紹介します。

最終的には、

  • 盤面では今までどおり立ち絵・キャラ駒を使いつつ
  • OBS の録画では「非表示扱いの立ち絵」だけをスッと消して
  • PC・NPCごとに「映す／映さない」を自由に切り替えられる

ということができるようになります。

image.png
図3. (左)CCFOLIA盤面 / (右)PC駒のみを非表示にした録画画面

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

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

ココフォリアのPC立ち絵をOBS録画上だけ非表示にするカスタムCSS
https://qiita.com/aoko_2477/items/663cb52a13328a0acd8f

できること

一言でいうと、「PC立ち絵をPLには見せつつ、OBSの録画にだけ映さない」ことができるようになる設定です。

この記事では主に「PC立ち絵を録画から消す」ケースを例に説明しますが、
実際には ココフォリアのマイキャラクター駒であれば、PC・NPCを問わず任意の駒を対象にできます。

ここで扱う「立ち絵」「キャラ駒」は、ココフォリアの「マイキャラクター」機能から配置した駒を対象としています。
録画時に非表示にするかどうかは、キャラクターの「キャラクターメモ」欄に書いたキーワードで切り替えます。
（「非表示」「off」などのキーワードはあくまで一例で、実際に使う文字列は任意で設定できます）

この設定を入れることで、次のようなことができるようになります。

  • 特定のPC立ち絵だけを、OBSの録画から非表示にできる

    • マイキャラクターの「キャラクターメモ」欄に、
      事前に決めたキーワード（例：非表示 や off など）を書いておくだけで、
      その立ち絵だけを OBS 上から消せます（盤面上ではそのまま表示されたまま）。

  • NPCや敵キャラの立ち絵は、そのまま録画に残せる

    • キーワードを書かなければ、通常どおり盤面にも録画にも映ります。
    • PCだけ録画から消して、NPC・敵だけ残す、といった使い分けが可能です。

  • PCコマを「PL向け演出」と「録画向け画面」で切り分けられる

    • 盤面ではPCの立ち絵を駒の後ろに出す演出をしつつ、
      配信・録画では Discord の連動立ち絵をメインに見せる、という構成が取りやすくなります。

  • キャラ名ラベル（KP/PC/PL名など）の表示もコントロールできる

    • CSS側の設定を切り替えることで、
      「録画にはキャラ名を映さない」「逆に名前も含めて全部見せる」を選べます。

  • ココフォリア側のレイアウトやシーン構成はそのまま

    • 立ち絵を消したり動かしたりするのではなく、「OBS側で見えなくしているだけ」なので、
      PL側の見た目や操作性をほとんど変えずに、録画だけを調整できます。

実行環境

  • ココフォリア（CCFOLIA）：1.33.15
  • OBS Studio：30.0.2
  • OS：Windows 11
  • ブラウザ：Google Chrome

方法

  1. OBSのソース追加から
    image.png

  2. ブラウザを選ぶ
    image.png

  3. 好きな名前を入れて新規作成
    image.png

  4. CCFOLIAの部屋のURLをURLに入力
    image.png

  5. 下記CSSをカスタムCSSに入れる。
    image.png

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

/* ============================================================
   🎥 録画用の追加カスタムCSS
   OBSカスタムCSS：録画時に不要な要素を非表示にする設定
   ============================================================ */

/* --- [非表示] タグが付いているキャラ駒を完全非表示 --- */
/*   → キャラクターメモ欄に [非表示] と書いたマイキャラクターを、
       OBS の録画上からだけ消します（盤面上では表示されたまま） */
img[aria-label*="[非表示]"] {
  display: none !important;
}

/* --- 追加で「このマークの駒も消したい」ときの例 ---------------- */
/*   例：立ち絵ではなく、目印用の「☆」マーク駒だけ録画から消したい場合など
       必要なければこの項目は削除して構いません。 */
img[aria-label*="☆"] {
  display: none !important;
}

/* --- キャラ名ラベル(.KP/.PCなど)の制御 ------------------------- */
/*   → UIの位置は保ったまま、文字色だけ透明にして録画には映らないようにする */
.MuiTypography-root.MuiTypography-caption.MuiTypography-noWrap {
  color: transparent !important;
  text-shadow: none !important;
}

  6. CCFOLIAの部屋でキャラクターを選択して
    image.png

  7. キャラクターメモ欄のどこかに [非表示] を追記する
    image.png
    image.png

  8. 完成！　OBS録画画面上から対象の駒が非表示になります。
    image.png

本CSSでは、
紅坂柚月 様の「ココフォリアのカスタムCSS 盤面のみ」
https://ydk.vc/obs-ccfolia-css-board/
を冒頭で @import して利用させていただいています。
いつも便利なCSSを公開してくださり、ありがとうございます。

注意点

  • [非表示] というキーワードはこの記事の例です。
    CSS 内とキャラクターメモ側で同じ文字列になっていれば、
    "[録画外]" や "#非表示PC" など、別の単語に変えても構いません。
  • キャラクターメモ欄には、普段どおりキャラ設定やメモを書いてOKです。
    ただし、その文章のどこかに [非表示] という文字列が含まれると、その駒は録画から消えます。
    → [非表示] は文中に紛れ込ませず、
    末尾に ……（メモいろいろ） [非表示] のようにタグっぽく分けて書くのがおすすめです。
  • img[aria-label*="☆"] の行を残している場合、
    キャラクターメモに ☆ を含む駒も録画から消える点に注意してください。
    • 「☆マークの駒だけ消したい」など用途がある場合だけ使う
    • 不要ならこのブロックごと削除する
    • もしくは ★録画外 など、他の用途と被らない記号＋文字列に変える
      といった運用にすると安全です。
  • [非表示] という文字列を別のものに変えた場合は、
    CSS側とキャラクターメモ側の両方を同じ文字列にそろえる必要があります。
  • .MuiTypography-root.MuiTypography-caption.MuiTypography-noWrap の設定により、
    盤面上では名前ラベルの位置はそのままに、OBS側では文字色だけ透明にして、全キャラクターの名前表示を録画に映さないようにしています。
    • 特定のキャラだけ名前を残す／消す、といった細かい制御は、このCSSだけでは難しいです。
    • 「名前も録画に映したい」場合は、このセレクタのブロック（名前ラベルを透明化している部分）をコメントアウトするか削除してください。

結果

このCSSを適用し、[非表示] タグを付けたPC駒を用意すると、次のように表示を切り替えられます。

ココフォリア上（PLが見る画面）

  • 立ち絵・PC駒はこれまでどおり表示されます。

image.png
図A. ココフォリア上（PLが見る画面）

OBSの録画画面（配信・録画に映る画面）

  • [非表示] が付いたPC立ち絵だけが非表示になります。
  • NPCや敵キャラなど、タグを付けていない駒はそのまま映ります。
  • キャラ名ラベルも透明化されるため、録画には名前が映りません。

適用前の表示例
図B. カスタムCSS適用前：PC立ち絵とDiscord立ち絵が重なっている状態（OBS側）

適用後の表示例
図C. カスタムCSS適用後：PC立ち絵のみ非表示にし、Discord連動立ち絵をメインに見せている状態（OBS側）

キャラクターメモの変更は即時に反映されるため、セッション中でも [非表示] を入力／削除するだけで、表示／非表示を切り替えられます。
OBS側は一度カスタムCSSのキーワードを設定しておけば、以降はココフォリアのキャラクターメモ欄を編集するだけでOKです。

おわりに

今回は、

  • ココフォリアのPC立ち絵を、PLには見せつつOBSの録画からだけ消す
  • NPCや敵はそのまま録画に残す
  • キャラクターメモ欄の [非表示] タグだけで切り替える

という仕組みを、OBSのカスタムCSSとキャラクターメモ欄の編集だけで実現してみました。

「Discordの連動立ち絵をメインにしつつ、盤面の演出として一瞬だけ立ち絵を出したい」
「PCだけ録画から隠したい」
といったケースで、レイアウトを作り直さずに使い回せる小技になってくれれば幸いです。

タグ判定の部分を変更すれば、例えば

  • [非表示] タグを付けたNPCだけ消す
  • ☆ マーク付きの目印駒だけ録画から消す

といった応用も可能です。自分の卓の運用に合わせて、うまくカスタマイズしてみてください。

本記事のCSSは、紅坂柚月 様の「ココフォリアのカスタムCSS 盤面のみ」
https://ydk.vc/obs-ccfolia-css-board/
を @import した上で、その上に録画用の設定を追加したものです。
すばらしいCSSを公開してくださり、ありがとうございます。

おまけ：関連するOBS×ココフォリア記事

今回のCSSとあわせて使うと便利そうな、別記事も置いておきます。

  • OBSにCCFOLIA上の指定したキャラクターのステータスを表示するカスタムCSSについて
    ココフォリアのキャラ駒から、HPなどのステータスをOBS上に表示するためのカスタムCSSです。
    https://qiita.com/aoko_2477/items/d04ad1654016262c063e
    image.png
  • 【派生記事】CCFOLIAキャラ駒のステータスをOBS配信用におしゃれにするCSSテンプレ
    上の記事をベースに、配信用に見栄えの良いステータス表示を作るCSSテンプレです。
    https://qiita.com/aoko_2477/items/470932138755a3687324
    image.png
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?