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

2021年10月14日ゲーム,技術

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

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

メインのコード

OBSの「対話」から「メイン・情報・その他」を切り替えできます
URLココフォリアのURL
1920(※配信に合わせて下さい)
高さ1080(※配信に合わせて下さい)
「OBSを介して音声を制御する」にチェック
カスタムCSS
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat/main.css");

.jAnegm>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");

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

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

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

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

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

使わない。

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

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

使わない。

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

使わない。

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

使わない。

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

使わない。

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

使わない。

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

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

チャットに表示される行数の最大行数をしていできる。
デフォルトでは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);
}

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

ネオンっぽいデザイン

/* ネオン */
: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);
}

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