MENU
PIXIV FANBOXを開設しています詳しくはこちら!

ココフォリアのカスタム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;
}

色変更機能

下記のカスタム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を流用できます。ルームチャットの時と同じ使い方で利用できるので試してみて下さい!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

紅坂 柚月のアバター 紅坂 柚月 自称天才プログラマー

お酒が大好きなバ美肉VTuber。

お出掛けの時は和服を着てます。
プログラムは独学で遊んでます。

目次