ココフォリアのカスタムCSS ルームチャット

注意

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

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

お願い

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

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

YouTubeとかでTRPGを配信する際、ココフォリアのルームチャットを色々なデザインにできたらなあ……と思ったので作りました。

メインのコード

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

カスタムCSSに記載した :nth-last-child(-n+3) を増やすことで表示数を増やせます
例） (-n+3) だと3件まで表示され、(-n+10) だと10件表示されるようになります
ソース追加後、トリミングすると扱いやすくなります
時々うまく動作しなくなる事あるので、あまりオススメしません

@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;
}

オプション機能

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

オプションは必ず@importの次に記載をしてください（並び順を間違えると反映されません）
横並びとフェードインを同時に使用することは可能です
フェードインを複数登録した場合は最後に登録されたアニメーションのみ動きます

横並びにするカスタムCSS

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

名前を表示させるカスタムCSS

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

フェードインして表示し続けるカスタムCSS

右から左（←）に表示

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

左から右（→）に表示

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

上から下（↓）に表示

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

下から上（↑）に表示

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

フェードインしてから一定時間表示され、その後透明にフェードアウトするカスタムCSS

上記の「フェードインして表示し続けるカスタムCSS」とは一緒に使えないので注意！

右から左（←）に表示され、その後透明にフェードアウトする

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

左から右（→）に表示され、その後透明にフェードアウトする

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

上から下（↓）に表示され、その後透明にフェードアウトする

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

下から上（↑）に表示され、その後透明にフェードアウトする

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

ルームチャットが表示されてる時間を変更するオプション機能

フェードアウト系は「フェードインが終了したタイミング」から「フェードアウトが始まるタイミング」まで（つまりルームチャットが表示されている時間）の秒数指定（10sなら10秒、120sなら2分間）もあります。デフォルトでは20秒。

/* 完全に表示されてから、フェードアウトが開始するまでの秒数 */
:root {
  --fadeout-sec: 20s;
}

チャットログを下付けにするオプション機能

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

このオプション機能はルームチャットの挙動がバグる（止まったり無限ループしたりする現象）を防ぐCSSとしても利用できます。

もしCSSを利用せずにバグ対策するなら……

ブラウザの高さを「2160px」など2倍以上のサイズにする
一度に大量の文章を送らずに小分けにする
諦める

※この挙動はココフォリアの仕様上どうしようもないです

色変更機能

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

テンプレート

:root {
  --background-color: rgb(0, 0, 0);
  --background-padding: 8px 8px 8px 8px;
  --border-color: rgb(255, 255, 255);
  --border-image: url();
  --border-width: 2px;
  --border-radius: 0px;
  --border-shadow: 0;
  --font-color: rgb(255, 255, 255);
  --font-color-shadow: 0;
  --font-color-fail: rgb(245, 0, 87);
  --font-color-fail-shadow: 0;
  --font-color-success: rgb(33, 150, 243);
  --font-color-success-shadow: 0;
  --font-size: 1.5rem;
  --font-shadow: 0;
  --image-radius: 0%;
  --width: 500px;
  --line-clamp: 30;
}

–background-color: rgb(0, 0, 0);

チャットの背景をRGBで設定できます。
半透明にしたいばあいは--background-color: rgba(225, 52, 76, 0.5);のように入れると透過度を設定することができます。1で透過無し、0で完全に透明です。

–background-padding: 8px 8px 8px 8px;

チャットの上部・右側・下部・左側の余白をピクセル指定できます。
微調整が必要な時以外は使いません。

–border-color: rgb(255, 255, 255);

チャットの枠線をRGBで設定できます。

–border-image: url();

使わない。

–border-width: 2px;

チャットの枠線を設定できます。
0pxで枠無しになります。

–border-radius: 0px;

チャットの縁を丸くしたいときに使います。
2px・4px・6px・8pxあたりが使いやすいです。

–border-shadow: 0;

使わない。

–font-color: rgb(255, 255, 255);

テキストのカラーを変更することができる。
RGBで指定。

–font-color-shadow: 0;

使わない。

–font-color-fail: rgb(245, 0, 87);

ダイスの成功時の青文字のカラーを変更することができる。
RGBで指定。

–font-color-fail-shadow: 0;

使わない。

–font-color-success: rgb(33, 150, 243);

ダイスの成功時の青文字のカラーを変更することができる。
RGBで指定。

–font-color-success-shadow: 0;

使わない。

–font-size: 1.5rem;

フォントサイズを変更出来る。
24pxのようにピクセルで指定することも可能。

–font-shadow: 0;

使わない。

–image-radius: 0%;

チャットに表示されるアイコンを丸める事が出来る。
50％にするとTwitterみたいに丸いアイコンにすることが可能。

–width: 500px;

チャットの横幅を変更できる。

–line-clamp: 30;

チャットに表示される行数の最大行数をしていできる。
デフォルトでは30行。

色を反転させたデザイン

/* 反転 */
:root {
  --background-color: rgb(255, 255, 255);
  --border-color: rgb(0, 0, 0);
  --font-color: rgb(0, 0, 0);
}

黒板風のデザイン

/* 黒板 */
:root {
  --background-color: rgb(64, 115, 93);
  --border-color: rgb(175, 131, 105);
  --border-width: 6px;
  --border-radius: 6px;
  --font-color: rgb(255, 255, 255);
  --font-color-fail: rgb(245, 0, 87);
  --font-color-success: rgb(33, 150, 243);
}

LINE風のデザイン

/* LINE */
:root {
  --background-color: rgb(129, 219, 71);
  --background-padding: 8px 24px 8px 24px;
  --border-color: rgb(0, 0, 0);
  --border-width: 0px;
  --border-radius: 50px;
  --font-color: rgb(48, 40, 51);
  --font-color-fail: rgb(173, 0, 45);
  --font-color-success: rgb(34, 75, 143);
}

木製っぽいデザイン

/* 木製 */
:root {
  --background-color: rgb(218, 194, 144);
  --border-color: rgb(118, 92, 71);
  --border-radius: 16px;
  --font-color: rgb(67, 52, 40);
  --font-color-fail: rgb(173, 0, 45);
  --font-color-success: rgb(34, 75, 143);
}

昔のホームページっぽいデザイン

/* 虹色 */
:root {
  --background-color: linear-gradient(to right, red, orange, yellow, green, aqua, blue, purple);
  --border-width: 0;
  --font-color: rgb(0, 0, 0);
  --font-color-fail: rgb(255, 0, 0);
  --font-color-success: rgb(0, 0, 255);
}

昔のホームページっぽいデザイン2

/* 虹色2 */
:root {
  --background-color: linear-gradient(to right, red, orange, yellow, green, aqua, blue, purple);
  --border-image: linear-gradient(to right, green, yellow, orange, red,purple, blue, aqua) 1;
  --border-width: 10px;
  --font-color: rgb(0, 0, 0);
  --font-color-fail: rgb(255, 0, 0);
  --font-color-success: rgb(0, 0, 255);
}

サイバーっぽいデザイン

/* サイバー */
:root {
  --background-color: rgb(43, 46, 94);
  --border-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%) 1;
  --border-width: 4px;
}

金塊っぽいデザイン（見にくい）

/* 金 */
:root {
  --background-color: no-repeat url(https://prfac.com/wp-content/uploads/2021/10/4867685_s.jpg);
  --border-color: rgb(168, 125, 25);
  --font-color: rgb(212, 175, 55);
  --font-color-fail: rgb(212, 175, 55);
  --font-color-success: rgb(212, 175, 55);
  --font-shadow: 0px -1px rgb(67, 52, 40);
}

下記テクスチャを利用しています。

写真AC

金箔｜ベーシックな背景素材｜横位置金箔｜ベーシックな背景素材｜横位置（No: 4867685）の無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料でお使いいただけます。クレジット表…

ネオンっぽいデザイン

/* ネオン */
:root {
  --background-color: rgba(0, 0, 0, 0);
  --background-padding: 8px 8px 8px 8px;
  --border-color: rgb(255, 255, 255);
  --border-width: 2px;
  --border-radius: 6px;
  --border-shadow:
    0 0 2px #fff,
    inset 0 0 1px #fff,
    0 0 4px #fff,
    inset 0 0 2px #fff,
    0 0 8px #fff,
    inset 0 0 8px #fff;
  --font-color: rgb(255, 255, 255);
  --font-color-shadow:
    0 0 4px #8C8C8C,
    0 0 2px #8C8C8C,
    0 0 8px #8C8C8C,
    0 0 8px #8C8C8C;
  --font-color-fail: rgb(255, 255, 255);
  --font-color-fail-shadow:
    0 0 4px rgb(245, 0, 87),
    0 0 2px rgb(245, 0, 87),
    0 0 8px rgb(245, 0, 87),
    0 0 8px rgb(245, 0, 87);
  --font-color-success: rgb(255, 255, 255);
  --font-color-success-shadow:
    0 0 4px rgb(33, 150, 243),
    0 0 2px rgb(33, 150, 243),
    0 0 8px rgb(33, 150, 243),
    0 0 8px rgb(33, 150, 243);
}

パステルカラーっぽいデザイン1

/* パステルカラー */
:root {
  --background-color: rgb(255, 255, 255);
  --border-color: rgb(136, 105, 165);
  --border-width: 4px;
  --border-radius: 20px;
  --font-color: rgb(136, 105, 165);
  --font-color-fail: rgb(238, 156, 106);
  --font-color-success: rgb(128, 190, 175);
}

パステルカラーっぽいデザイン2

/* パステルカラー */
:root {
  --background-color: rgb(247, 242, 213);
  --border-color: rgb(86, 74, 74);
  --border-width: 4px;
  --border-radius: 20px;
  --font-color: rgb(86, 74, 74);
  --font-color-fail: rgb(245, 92, 71);
  --font-color-success: rgb(74, 169, 108);
}

パステルカラーっぽいデザイン3

/* パステルカラー */
:root {
  --background-color: rgb(255, 254, 236);
  --border-color: rgb(96, 136, 122);
  --border-width: 4px;
  --border-radius: 20px;
  --font-color: rgb(96, 136, 122);
  --font-color-fail: rgb(228, 80, 143);
  --font-color-success: rgb(85, 111, 181);
}

夜空っぽいデザイン1

/* 夜空 */
:root {
  --background-color: rgb(1, 0, 56);
  --border-color: rgb(132, 145, 195);
  --border-width: 4px;
  --border-radius: 20px;
  --font-color: rgb(132, 145, 195);
  --font-color-fail: rgb(243, 148, 34);
  --font-color-success: rgb(70, 181, 209);
}

夜空っぽいデザイン2

/* 夜空 */
:root {
  --background-color: rgb(44, 40, 40);
  --border-color: rgb(224, 224, 236);
  --border-width: 4px;
  --border-radius: 20px;
  --font-color: rgb(224, 224, 236);
  --font-color-fail: rgb(246, 224, 125);
  --font-color-success: rgb(125, 163, 246);
}

チョコミントっぽいデザイン

/* チョコミント */
:root {
  --background-color: rgb(113, 84, 66);
  --border-color: rgb(255, 255, 255);
  --border-width: 4px;
  --border-radius: 20px;
  --font-color: rgb(255, 255, 255);
  --font-color-fail: rgb(227, 158, 146);
  --font-color-success: rgb(146, 227, 208);
}