Home
Home

ココフォリアをOBSに表示させる際のカスタムCSS

最終更新 2025-05-13
ココフォリアのCSS

目次

ココフォリアの表示はOBSのブラウザソースで

TPRGやマーダーミステリーをオンラインで遊ぶ際によく使われるココフォリアですが、もしその画面をYouTubeなどの配信に載せる場合はOBS Studioのブラウザソースを使用することになります。

その際、ココフォリアの画面をそのまま配信に載せるのではなくカスタムCSSを使って「盤面のみ」「チャットログ」「吹き出し」などを個別で反映させると、整理整頓された配信映えする画面を作ることができます。

本記事ではココフォリアをOBS Studioで表示する際におすすめのカスタムCSSを紹介するので、ココフォリアを頻繁に使用する・TRPGなどに興味がある方はぜひ本記事を参考にしてみてください。

ココフォリアのCSS一覧

※本項目では前述の通り、ココフォリアの各パーツをOBS Studioのブラウザソースを使って表示させる手法を解説します。

よって、ココフォリアの登録をまだおこなっていない方やOBS Studioのブラウザソースの使い方がわからない人は事前に以下の記事を読むようにしてください。

OBS Studioでココフォリアをきれいに表示させる方法を解説

盤面のみ表示させるカスタムCSS

ココフォリアの盤面のみをOBS Studioに反映させる方法は以下の通りです。

手順1：「ブラウザソース」にココフォリアのルームを反映させる

OBS Studioでブラウザソースを追加し、URLにココフォリアルームのURLを添付してください。

※念のため本項でのみブラウザソースの追加方法をスクリーンショットで紹介します。以降の項目では割愛するのでご了承ください。

ブラウザソースの追加

OBS Studioのソースの「＋」をクリックし「ブラウザ」を選択後、わかりやすい名前をつける。
画像1：ブラウザソースの追加方法

URLの入力

ココフォリアのURLをブラウザソースの「URL」に挿入。
幅と高さは配信画面と同様の数値にし「OBSで音声を制御する」にチェックを入れる。
画像2：URLの反映方法

手順2：カスタムCSSのコードをコピーして貼り付ける

カスタムCSSに最初から入力されているコードを削除し、そこに以下のカスタムCSSを貼り付けて「OK」をクリックしてください。

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

画像3：カスタムCSSの追加方法

以上の手順で、ココフォリアの盤面のみをOBS Studioに反映させることができます。

画像4：盤面の反映

吹き出しのみ表示させるカスタムCSS

続いて、ココフォリアの吹き出しをOBS Studioに反映させる方法を解説します。

手順1：「ブラウザソース」にココフォリアのルームを反映させる

OBS Studioでブラウザソースを追加し、URLにココフォリアルームのURLを添付してください。

手順2：カスタムCSSのコードをコピーして貼り付ける

続いて、カスタムCSSの欄に以下のカスタムCSSを貼り付けて「OK」をクリックしてください。

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

画像5：吹き出しのカスタムコード

以上の手順で、吹き出しのみをOBS Studioに反映することができます。

画像6：吹き出しの反映

ステータスのみ表示させるカスタムCSS

続いて、ココフォリアのキャラクターステータスをOBS Studioに反映させる方法を解説します。

手順1：「ブラウザソース」にココフォリアのルームを反映させる

OBS Studioでブラウザソースを追加し、URLにココフォリアルームのURLを添付してください。

手順2：キャラクターのステータスを追記する。

続いて、先ほど貼り付けたルームURLの後ろに/characters/を追記します。

その後、ココフォリアに戻りステータスを反映させたいキャラクター駒の上で右クリックしCopy Id (for dev)をクリックします。

コピーしたIDは先ほど追記した/characters/の後ろに貼り付ければ、準備が完了します。

画像7：ステータスの事前準備

手順3：カスタムCSSのコードをコピーして貼り付ける

最後に、カスタムCSSの欄に以下のカスタムCSSを貼り付けて「OK」をクリックしてください。

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

画像8：ステータスの反映

以上の手順で、ステータスをOBS Studioに反映することができます。

※キャラクターが複数いる場合は、同じ作業を人数分おこなってください。

タイマーを表示させるカスタムCSS

ルームチャットのみ表示させるカスタムCSS

ルームチャットをOBS Studioに表示させる場合は、これまで同様にカスタムCSSを貼り付けたうえで、チャットの表示数などを変更する必要があります。

手順は以下の通りです。

手順1：「ブラウザソース」にココフォリアのルームを反映させる

OBS Studioでブラウザソースを追加し、URLにココフォリアルームのURLを添付してください。

手順2：カスタムCSSのコードをコピーして貼り付ける

続いて、カスタムCSSの欄に以下のカスタムCSSを貼り付けて「OK」をクリックしてください。

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

.MuiList-root>div:nth-child(1)>div>div:nth-last-child(-n+3)>div {
    display: flex !important;
}

画像9：ルームチャットのカスタムコード

※上記の(-n+3)の3の部分が表示されるチャット数なので、ここの数字を打ち換えればOBSに表示されるチャット数を変更することができます。

画像10：カスタムコードの反映後

BGMを配信に載せるカスタムCSS

ココフォリアでは、設定してあるBGMもOBS Studioで表示できます。

手順は以下の通りです。

手順1：「ブラウザソース」にココフォリアのルームを反映させる

OBS Studioでブラウザソースを追加し、URLにココフォリアルームのURLを添付してください。

手順2：カスタムCSSのコードをコピーして貼り付ける

続いて、カスタムCSSの欄に以下のカスタムCSSを貼り付けて「OK」をクリックしてください。

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

画像11：BGM表示のカスタムコード

以上の手順で、BGMをOBS Studioに反映することができます。

画像12：BGM反映後

ココフォリアのCSSに関するトラブルシューティング

カスタムCSSが更新されないとき

もしカスタムCSSが更新されないときは、一度キャッシュを削除してください。

削除の方法は以下の通りです。

全てのキャッシュを一括で削除する場合

まずは必ずOBSを閉じた状態で「Win+R」のショートカットで「ファイル名を指定して実行」を呼び出します。

呼び出しが完了したら、そこに以下のパスを入力して「OK」をクリックしましょう。

%appdata%\obs-studio\plugin_config\obs-browser

画像13：Win＋R

開いたファイル内のCacheのファイルを削除すれば完了します。

画像14：Cache

ページごとにキャッシュを更新する

ココフォリアの各ページごとにキャッシュを更新したい場合は、OBS Studio内にあるココフォリアを反映させたソースの上で右クリックし「プロパティ」をクリックします。

画像15：プロパティ

開いた中にある「現在のページのキャッシュを更新」をクリックすれば、キャッシュが更新されます。

ココフォリアのCSSを活用して配信画面を整えよう

ココフォリアの画面はTRPGやマーダーミステリーを遊ぶことに特化しているので、そのまま配信に載せてしまうと視聴者が見づらい配置になったり、余計な項目が配信に映ってしまいます。カスタムCSSを活用すればそれらの余分なものを映さず、画面構成も整理した状態にできるので、TRPGやマーダーミステリーを配信したい方はこの記事を参考にして、カスタムCSSを使いこなしましょう。

OBSでのYouTube/Twitch配信におすすめのツール

配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
視聴者と向き合うために最もおすすめな配信ツールがCastCraftです。

CastCraftの機能を一部ご紹介します。

配信中のコメント管理ダッシュボード

  • 視聴者ごとの情報をためて、視聴者全員を覚えられる
  • 初見や常連を一目で判断できる
  • スパチャ・ビッツ等を読み上げたかどうか管理できる

CRM候補1

画面演出の「Screen」

  • 視聴者の特定のコメント・投げ銭に応じたエフェクトを画面に出せる
  • コメントを画面に横流しできる
  • 設定した画像やGIFで自由に画面演出が作れる

文字スタンプ

このような機能により、配信者が視聴者との関係を深めることができます。

CastCraftのダウンロードページ（利用無料）

CastCraftを利用する配信者さんの声

ぺこPさん

『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』

MeeChanneLさん

『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』

九条林檎さん

『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』

ゆっきん【博多弁猫Vtuber】さん

『CastCraft様にはどれだけお世話になっているかわかりません！配信生活をもっと楽しいものにしてくださってありがとうございます。』

日々の配信をより良く

CastCraftが導入されているチャンネルの総登録者数は1.6億人を超えており、これまで164万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。

視聴者ダイアログを開く

CastCraftを試してみる（利用無料）