注意
本件はサポート致しません。自己責任でお願いします。
カスタムCSSが動かなくなった際、ココフォリアさんに問い合せをしないでください。
お願い
もし配信等で利用される際は、概要欄にURLなど記載頂けると励みになります!
OBSでココフォリアを表示させる時のカスタムCSSについて | U7D05 BAR
https://ydk.vc/obs-ccfolia-css/

ルームチャット用のカスタムCSS、デザインを流用できたら便利だよね!ってことで作りました。
目次
メインのコード

URL | ココフォリアのURL |
幅 | 1920(※配信に合わせて下さい) |
高さ | 1080(※配信に合わせて下さい) |
「OBSを介して音声を制御する」にチェック |
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/balloon/main.css");
オプション機能

色々有効活用できるよう、オプションを設けてます。
アイコンを『ココフォリアのデフォルト』に戻す

:root {
--image-background: transparent;
--image-width: 240px;
--image-height: auto;
--image-border-width: 0;
--image-border-radius: 0;
--image-margin: 0;
}
ダイスを消す

:root {
--dice-display: none;
}
アイコンを消す

:root {
--image-display: none;
}
スキップボタンを消す

:root {
--skip-display: none;
}
閉じるボタンを消す

:root {
--close-display: none;
}
色変更機能
下記のカスタムCSSを末尾に追加することで、様々なデザインに変更することができます。
テンプレート
:root {
/* ボックス */
--balloon-background-color: rgb(0, 0, 0);
--balloon-background-padding: 8px 8px 8px 8px;
--balloon-border-color: rgb(255, 255, 255);
--balloon-border-image: url();
--balloon-border-width: 2px;
--balloon-border-radius: 10px;
--balloon-border-shadow: 0;
--balloon-width: 960px;
/* テキスト */
--font-size-name: 1.6rem;
--font-color-name: rgb(245, 245, 245);
--font-color-name-shadow: 0;
--font-size-dice: 1.7rem;
--font-color-dice: rgba(255, 255, 255, 0.7);
--font-color-dice-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-main: 2rem;
--font-color-main: rgb(245, 245, 245);
--font-color-main-shadow: 0;
/* イメージ */
--image-background: rgb(255, 255, 255);
--image-width: 120px;
--image-height: 120px;
--image-border-color: rgb(0, 0, 0);
--image-border-width: 6px;
--image-border-radius: 50%;
--image-margin: .5rem;
}
各種デザインについて
ルームチャット用のカスタムCSSを流用できます。ルームチャットの時と同じ使い方で利用できるので試してみて下さい!
U7D05 BAR


ココフォリアのカスタムCSS ルームチャット | U7D05 BAR
注意 本件はサポート致しません。自己責任でお願いします。 カスタムCSSが動かなくなった際、ココフォリアさんに問い合せをしないでください。 お願い もし配信等で利用さ…