ココフォリアのカスタムCSS タイマー

注意

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

カスタムCSSが動かなくなった際、ココフォリアさんに問い合せをしないでください。

お願い

もし配信等で利用される際は、概要欄にURLなど記載頂けると励みになります！

OBSでココフォリアを表示させる時のカスタムCSSについて | U7D05 BAR
https://ydk.vc/obs-ccfolia-css/

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

メインのコード

URL	ココフォリアのURL
幅	1920（※配信に合わせて下さい）
高さ	1080（※配信に合わせて下さい）
	「OBSを介して音声を制御する」にチェック

@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/timer.css");

色変更機能

下記のカスタムCSSを末尾に追加することで、様々なデザインに変更することができます。

:root {
  --background-color: rgb(18, 18, 18);
  --background-padding: 0px;
  --border-color: rgb(0, 0, 0);
  --border-image: url();
  --border-radius: 4px;
  --border-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 5px 8px 0px, rgba(0, 0, 0, 0.12) 0px 1px 14px 0px;
  --border-width: 0px;
  --font-color: rgb(255, 255, 255);
  --font-color-shadow: 0;
  --font-size: 3.75rem;
  --width: auto;
}

デザインがそもそも違うので、完全対応は難しいのですが、一部ならルームチャット用のカスタムCSSを流用できます。

U7D05 BAR