ココフォリアのカスタムCSS 吹き出しのみ（デザイン変更可）

注意

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

カスタム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;
}

名前を消す

:root {
  --main-title-display: none;
}

ダイス結果を消す

:root {
  --sub-title-display: none;
}

名前・ダイス結果・スキップボタン・閉じるボタンの4つを消す

:root {
  --title-display: none;
}

メッセージを消す

:root {
  --message-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;
}