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

ココフォリアのカスタム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を流用できます。

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

この記事を書いた人

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

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

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

目次