OBSで色々なデザインに変えられる「ココフォリアルームチャット」のカスタムCSSです

2021年9月28日2021年10月31日ゲーム,技術

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

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

カスタムCSSが動かなくなった際、ココフォリアさんに絶対問い合せをしないでください！
もし引き続き起きる場合は非公開致します。ご了承ください。

※ 2021年10月29日のアップデートに多分対応しました

メインのコード

URL	ココフォリアのURL
幅	1920（※配信に合わせて下さい）
高さ	1080（※配信に合わせて下さい）
	「OBSを介して音声を制御する」にチェック
カスタムCSS	@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat/main.css"); .sc-cNKqjZ>div:nth-child(1)>div>div>div:nth-last-child(-n+3) { display: block !important; }
注意	※1 カスタムCSSに記載した :nth-last-child(-n+3) を増やすことで表示数を増やせます（例） (-n+3) だと3件まで表示され、(-n+10) だと10件表示されるようになります ※2 ソース追加後、トリミングすると扱いやすくなります ※3 時々うまく動作しなくなる事あるので、あまりオススメしません

オプション機能

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

オプションは必ず@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");

フェードイン（右から左）←方向に表示

@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を末尾に追加することで、様々なデザインに変更することができます。

テンプレート

: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);のようにRGBの最後に, 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行。

※2021/10/14 更新

色を反転させたデザイン

/* 反転 */
: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);
}

2021年10月05日下記カスタムCSSを追加しました✨

昔のホームページっぽいデザイン（派手Ver）

/* 虹色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);
}

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

金箔｜ベーシックな背景素材｜横位置 - No: 4867685｜写真素材なら「写真AC」無料（フ

金箔｜ベーシックな背景素材｜横位置（No: 4867685）の無料写真素材を提供する「写真AC」のフリー写真 ...

https://www.photo-ac.com/main/detail/4867685

ネオンっぽいデザイン

/* ネオン */
: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-fail2: rgb(245, 0, 87);
  --font-color-fail-shadow:
    0 0 4px var(--font-color-fail2),
    0 0 2px var(--font-color-fail2),
    0 0 8px var(--font-color-fail2),
    0 0 8px var(--font-color-fail2);
  --font-color-success: rgb(255, 255, 255);
  --font-color-success2: rgb(33, 150, 243);
  --font-color-success-shadow:
    0 0 4px var(--font-color-success2),
    0 0 2px var(--font-color-success2),
    0 0 8px var(--font-color-success2),
    0 0 8px var(--font-color-success2);
}

ビートセイバーっぽい。

パステルカラーっぽいデザイン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);
}

後日、情報量増やすかと思います。

Posted by 紅坂柚月（みせる）

Home

OBSでココフォリアを表示させる時のCSSについて書きます

コメント一覧

匿名より:
2021年11月5日 07:06
はじめまして。ココフォリアの表示について検索し辿り着きました。貴重な情報をアップしてくださりありがとうございます。
素敵な演出の提案があって凄く助かりました！
質問なのですが、フェードインしたチャットの投稿を、数秒後にフェードアウトさせる方法はありますでしょうか？
返信
匿名より:
2021年10月5日 12:02
紅坂柚月さんのルームチャットのカスタムCSSにいつもお世話になっている者です。
素人質問で申し訳ないのですがbackgroundの透過をしたい場合、どのようなオプションカスタムにすればいいでしょうか！
返信
- 紅坂柚月（みせる）より:
  2021年10月5日 12:44
  どこかで解説入れようと思ってたのですが--background-color: rgba(225, 52, 76, 0.5);のようにRGBの末尾に, 0.5を入れると不透明度を設定できます。最大は1で透過一切無し、最低は0で完全に透明、となります。
  ネオンの--background-color: rgba(0, 0, 0, 0);が良い例ですね！（真っ黒だけど完全に透過されてる状態）
  返信