OBSでココフォリアを表示させる時のCSSについて書きます

2021年7月24日ゲーム,技術

私のOBSで使ってるCSSを公開します

YouTubeとかでTRPGを配信する際、ココフォリアを綺麗に取り込めたらなあ……って思うことありませんか?そんな人向けの記事です。

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

仕組み

OBSには「ブラウザ」という、Webページを表示させる仕組みがあります。

OBSの「ソース」で右クリックをし「追加」を選ぶと存在します

そしてこのブラウザにココフォリアのURLを入れると、ココフォリアが表示されます。

この時「カスタムCSS」にCSSを記載することで、色々なデザインにすることができます。

ただしレイヤーが増えてしまうのがネックです……

OBSのレイヤー構造

カスタムCSS【盤面のみ】

URLココフォリアのURL
1920(※配信に合わせて下さい)
高さ1080(※配信に合わせて下さい)
「OBSを介して音声を制御する」にチェック
カスタムCSS
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/board.css");

カスタムCSS【吹き出し】

URLココフォリアのURL
1920(※配信に合わせて下さい)
高さ1080(※配信に合わせて下さい)
 「OBSを介して音声を制御する」にチェック
カスタムCSS
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/balloon.css");

カスタムCSS【ステータス】

URLココフォリアのURL
1000
高さ300
「OBSを介して音声を制御する」にチェック
カスタムCSS
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/status.css");

.dnKCVK:nth-child(1) {
display: flex;
}
注意※1 カスタムCSSに記載した :nth-child(1) の数値を変更することで、表示されるステータスが変わります
※2 ソース追加後、トリミングすると扱いやすくなります
※3 NPCやエネミーのステータスが表示され、順番が変わるとカスタムCSSを書き直す必要性があります
※4 ステータスの項目数が増えると縦に長くなるので注意が必要です
※1 上記のように(1)だと1番目のステータスが表示され、(3)だと3番目のステータスが表示されます
※2 追加したステータスのサイズ変更をする際、Altキーを押しながら弄るとトリミングできます

カスタムCSS【チャット1】

デザイン
URLココフォリアのURL
1920(※配信に合わせて下さい)
高さ1080(※配信に合わせて下さい)
「OBSを介して音声を制御する」にチェック
カスタムCSS
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat.css");

.jAnegm>div:nth-child(1)>div>div>div:nth-last-child(-n+3) {
display: block !important;
}
注意※1 カスタムCSSに記載した :nth-last-child(-n+3) を増やすことで表示数を増やせます
(例) (-n+3) だと3件まで表示され、(-n+10) だと10件表示されるようになります
※2 ソース追加後、トリミングすると扱いやすくなります
※3 時々うまく動作しなくなる事あるので、あまりオススメしません
縦Ver デザイン
URLココフォリアのURL
1920(※配信に合わせて下さい)
高さ1080(※配信に合わせて下さい)
「OBSを介して音声を制御する」にチェック
カスタムCSS
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat.css");

.jAnegm>div:nth-child(1)>div>div {
display: block;
}
.jAnegm>div:nth-child(1)>div>div>div:nth-last-child(-n+3) {
display: block !important;
}
注意※1 カスタムCSSに記載した :nth-last-child(-n+3) を増やすことで表示数を増やせます
(例) (-n+3) だと3件まで表示され、(-n+10) だと10件表示されるようになります
※2 ソース追加後、トリミングすると扱いやすくなります
※3 時々うまく動作しなくなる事あるので、あまりオススメしません

カスタムCSS【チャット2】

デザイン
URLココフォリアのURL
1920(※配信に合わせて下さい)
高さ1080(※配信に合わせて下さい)
「OBSを介して音声を制御する」にチェック
カスタムCSS
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat2.css");

.jAnegm>div:nth-child(1)>div>div>div:nth-last-child(-n+3) {
display: block !important;
}
注意※1 カスタムCSSに記載した :nth-last-child(-n+3) を増やすことで表示数を増やせます
(例) (-n+3) だと3件まで表示され、(-n+10) だと10件表示されるようになります
※2 ソース追加後、トリミングすると扱いやすくなります
※3 時々うまく動作しなくなる事あるので、あまりオススメしません
縦Ver デザイン
URLココフォリアのURL
1920(※配信に合わせて下さい)
高さ1080(※配信に合わせて下さい)
「OBSを介して音声を制御する」にチェック
カスタムCSS
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat2.css");

.jAnegm>div:nth-child(1)>div>div {
display: block;
}
.jAnegm>div:nth-child(1)>div>div>div:nth-last-child(-n+3) {
display: block !important;
}
注意※1 カスタムCSSに記載した :nth-last-child(-n+3) を増やすことで表示数を増やせます
(例) (-n+3) だと3件まで表示され、(-n+10) だと10件表示されるようになります
※2 ソース追加後、トリミングすると扱いやすくなります
※3 時々うまく動作しなくなる事あるので、あまりオススメしません

Posted by みせる