TRPG配信画面をもっといじりたい、よくしたい！
カスタムCSSって聞いたことがあるけどよく分からない。
と言う方向けに、すぐに使えるカスタムCSSを一覧にまとめました。
軽く解説もしてますので、一緒に理解も深めちゃいましょう！
このページで出来るようになること
OBS上のカスタムCSSを使って、ccforiaから欲しい部分だけを配信に乗せることができるようになります。
ついでに、カスタムCSSとはなんぞやも軽く理解しちゃいましょう！
カスタムCSSと言えばコードは書けないし…難しい印象があるかもしれません。
ですが構造が分かってしまえば、思っているより簡単に使えると思います。（まあ、凝ろうとすると勉強が必要になりますが。）
ここではまず、一番やりたいことであるccforiaの欲しい部分だけを表示できるようになりましょう。
いつもの如く、このページでできることを入れた『template_css.json』も置いておきます。
こちらをインポートすれば、このページでやりたいことは完了します！
この記事以外にも、TRPGに限定したOBSでの配信の始め方も書いていますので、是非目を通していただけると嬉しいです。
まず初めに、カスタムCSSについて
カスタムCSSを専門的に説明すると、Webサイトや配信画面などの見た目（デザイン）を、自分好みに「上書き・追加」してカスタマイズするための専用のコード、になります。
今回で言うと、元となるWebサイトが「ccforia」、カスタマイズするためのコードを書く場所が「OBS」になります。
きちんと理解するために、その2つについて軽く解説していきます。
大体理解している方やとりあえずやりたいという方は次の章に行きましょう！
ccforiaの構成
- ルート
- ヘッダー
- 背景
- メイン
- 前景
- マイキャラクター
- スクリーンパネル
- マーカーパネル
- カットイン
- メッセージウィンドウ
- ルームチャット
ccforiaは主にこのような構成で出来ています。
次のカスタムCSSにてこれらを消したり、欲しいものだけを表示させたりしています。
※CCFOLIA 1.35.2 バージョン（2026/5）時点。
OBSのカスタムCSS
OBS ＞ ソース ＞ ブラウザ と表示していくと、プロパティの下の方にカスタムCSSの欄が表示されると思います。
デフォルトで1つカスタムCSSが入っています。
基本的に何にでも使えるコードですので、そのまま入れておきましょう。
「URL：ccforiaのページ、幅：1920、高さ：1080」にして、次のコードをデフォルトで入っているカスタムCSSの下に追加してみてください。
#root > * > header:nth-child(1) { display: none; } /* ヘッダー */
#root > * > div:nth-child(2) { display: none; } /* 背景 */
#root > * > div:nth-child(3) { display: none; } /* メイン */
#root > * > div:nth-child(4) { display: none; } /* チャット */以上がカスタムCSSのコードです。1つ抜き出しましょう。
#root > * > div:nth-child(2) { display: none; } /* 背景 */カスタムCSSのコードは、簡単に分けると2つに分けられます。
#root > * > div:nth-child(2) ：指定したい場所
{ display: none; } ：処理したい内容
※ /* */ はメモ書きで、コード上無視されるものだと思ってください。「#root」というのが、ccforiaの構成の一番上に位置する「ルート」のことです。
その後に1～4の番号がそれぞれあり、これらがccforiaの構成の順番に該当します。
今回の処理したい内容の中には「削除する」というコードが書かれています。
この結果、ccforia上の全てが非表示になりました。
次の章で、欲しい部分だけ表示できるように編集していきましょう！
ここより下は、欲しい部分の章に飛んでください。
ヘッダー
ヘッダーのみを表示したい場合のカスタムCSS全文です。
表示するために、非表示にした行を消してしまえばいいです。
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
#root > * > div:nth-child(2) { display: none; } /* 背景 */
#root > * > div:nth-child(3) { display: none; } /* メイン */
#root > * > div:nth-child(4) { display: none; } /* チャット */※一応説明してますが、ヘッダーだけ表示したい場合がない気がする。
背景
背景のみを表示したい場合のカスタムCSS全文です。
表示するために、非表示にした行を消してしまえばいいです。
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
#root > * > header:nth-child(1) { display: none; } /* ヘッダー */
#root > * > div:nth-child(3) { display: none; } /* メイン */
#root > * > div:nth-child(4) { display: none; } /* チャット */メイン画面
メインとその配下を表示したい場合のカスタムCSSです。
メインは少し特殊で、行を消すのではなく、後で使えるように処理したい内容を変更します。
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
#root > * > header:nth-child(1) { display: none; } /* ヘッダー */
#root > * > div:nth-child(2) { display: none; } /* 背景 */
#root > * > div:nth-child(3) { visibility: hidden; width: 100%; } /* メイン */
#root > * > div:nth-child(4) { display: none; } /* チャット */
/* この下に欲しいカスタムCSSを追加 */ccforiaの構造で説明したように、コマの配置などは全てメイン配下にあります。
削除すると何も表示されなくなってしまうため、「visibility: hidden;」で必要のない部分は隠し、「width: 100%;」でメインの表示を画面いっぱいにしています。
これでメインを表示する準備が整いました。
さらに欲しい場所を表示するカスタムCSSを「/* この下に欲しいカスタムCSSを追加 */」に入れましょう。
前景
/* 前景 */
div[style*="position: absolute"] { visibility: visible; }前景を表示します。
マイキャラクター
/* マイキャラクター */
figure { visibility: visible; }マイキャラクターを表示します。
スクリーンパネル
/* スクリーンパネル */
[data-dragging] { visibility: visible; }スクリーンパネルを表示します。
マーカーパネル
/* マーカーパネル */
[aria-label] { visibility: visible; }マーカーパネルを表示します。
マーカーパネルは明示できるものがないため、上手く表示されない場合もあるかも。
カットイン
/* カットイン */
div[open] { visibility: visible; }カットインを表示します。
メッセージウィンドウ
/* メッセージウィンドウ */
.MuiPaper-rounded { visibility: visible; }メッセージウィンドウを表示します。
メッセージウィンドウに関して、より詳しく調整できるカスタムCSSを後日公開予定です。
チャット
チャットのみを表示したい場合のカスタムCSS全文です。
表示するために、非表示にした行を消してしまえば大丈夫です。
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
#root > * > header:nth-child(1) { display: none; } /* ヘッダー */
#root > * > div:nth-child(2) { display: none; } /* 背景 */
#root > * > div:nth-child(3) { display: none; } /* メイン */
チャットに関して、より詳しく調整できるカスタムCSSを後日公開予定です。
ステータス
今回のカスタムCSSとは別のものになりますが、OBS上でよく表示したいものとして、ステータスのみの表示の仕方も記載します。
OBSのブラウザのURLにこのように入れると、欲しいキャラクターのステータスだけが表示されるようになります。
https://ccfolia.com/rooms/{ルームID}/characters/{キャラクターコマID}ルームIDはccforia部屋のURLの一番右にある文字列です。
キャラクターコマIDはccforia上でキャラクターを右クリックすると、「Copy Id」が出てくるのでそれをクリックすればコピーされた状態になります。
そのまま、ccforiaのURLに続いて「/characters/」を入力し、貼り付けましょう。
ステータスに関して、より詳しく調整できるカスタムCSSを後日公開予定です。
最後に
これで終了です！
OBS上にccforiaの欲しい部分のみ表示できるようになりました。
あとは大きさや配置を決めて、表示の仕方を変えたい時はカスタムCSSの { } の中にどんどん追加していきましょう。
他にも配置に関する記事や、それぞれの詳しい解説記事も書きたいと思っています。
筆者のBOOTHでも配信画面の装飾に使える素材を配布してますので、是非使ってみてください！
それでは、良いTRPGライフを。
コメント