做跑團實況時，經常會需要透過OBS擷取CCfolia的房間資訊，為了能將實況畫面排得更好看，這兩天稍微研究了一下U7D05 BAR的教學。
這邊做個簡單的翻譯跟實際操作分享。

※如果要使用該網站提供的CSS語法，請在實況頁的說明欄加入以下資訊（原文是日文）
OBSでココフォリアを表示させる時のカスタムCSSについて | U7D05 BAR
https://ydk.vc/obs-ccfolia-css/

關於在OBS中顯示CCfolia時的自定義CSS | U7D05 BAR
https://ydk.vc/obs-ccfolia-css/

※CCfolia版本更新時，語法可能會失效，需定期翻原文看是否有更新

■通用前置步驟
建立新的「瀏覽器」來源並進行設定
★網址：輸入要讀取的CCfolia房間網址
★寬度＆高度：區塊顯示尺寸，可先設定滿版（1920x1080）之後再調整顯示範圍
★自訂CSS：之後要擷取哪些資訊、如何呈現，由輸入的CSS語法決定
　　　　　  如果用預設或空白的話，就是擷取整個房間畫面（含介面）

■01.只擷取盤面
盤面包含背景底圖、元件、TOKEN等（不含其他操作介面）
★自訂CSS：@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/board.css");

■02.只擷取對話框
房間左下方的文字對話框，包含骰子與顯示的立繪（會以頭像的方式呈現）
★自訂CSS：@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/balloon.css");

※剛設置完時若沒有顯示，可嘗試送出新訊息刷新對話

■03.只擷取角色狀態欄
左側的角色狀態欄，包含各種自訂的數值
★自訂CSS：
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/status.css");

div[tabindex="0"]>div:nth-last-child(2)>div:nth-child(1) {

  display: flex;    

}

※末尾的nth-child(1)代表第一個角色狀態。以此類推，nth-child(2)就是第二個、nth-child(3)就是第三個。透過更換數字，可顯示不同角色的狀態欄
※由於是依照「目前畫面上顯示的順序」，所以如果臨時追加角色變更排列順序的話，顯示可能會有錯

★改變數值排列方式：
在主要的CSS語法下方增加以下內容：
div[tabindex="0"]>div:nth-last-child(2)>div>div>div {

  max-width: 400px;

}

※初始值是200px，每增加200px就往橫向多一欄
※瀏覽器擷取的寬度如果不夠寬，顯示上會有點問題，預設1920x1080比較不會出錯

★消除狀態欄底色：
在主要的CSS語法下方增加以下內容：
.MuiBadge-root+div>div>div>div:nth-child(2)>div {
  display: none;
}

※只留下文字跟數值，沒有下方的白底

■04.只擷取文字頻道
右側的文字頻道
★自訂CSS：
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat/main.css");
.MuiList-root>div:nth-child(1)>div>div>div:nth-last-child(-n+3) {
    display: block !important;
}

※使用瀏覽器的「互動」按鈕，可手動切換不同頻道
※透過修改nth-last-child(-n+3)增加顯示數量，(-n+3)顯示最新的3件對話，(-n+10)則是顯示最新的10件對話
　若設置完沒有正常顯示，可以送出新的對話刷新一下
　但這功能有時會秀逗，所以比較不推薦修改數值

★讓訊息橫向排列：
在主要的CSS語法第一行下方增加以下內容：
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat/option_horizontal.css");

★顯示「角色名字」與「時間標記」：
在主要的CSS語法第一行下方增加以下內容：
@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat/option_name.css");

★淡入動態特效：
在主要的CSS語法第一行下方增加以下內容：
由右至左（←）：@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat/option_animation_r2l.css");
由左至右（→）：@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat/option_animation_l2r.css");
由上至下（↓）：@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat/option_animation_t2b.css");
由下至上（↑）：@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/chat/option_animation_b2t.css");

★底色與文字變更：
在主要的CSS語法下方增加以下內容：
白底反轉：
/* 反転 */
:root {
  --background-color: rgb(255, 255, 255);
  --border-color: rgb(0, 0, 0);
  --font-color: rgb(0, 0, 0);
}

其他變化太多了，請直接看原文教學，反正概念都差不多XD

■結束

完成後大概像這樣
之後加上角色頭像、DC的跳跳立繪、說明文字之類的
就可以做美美的排版&實況了！
懂CSS的話可以再延伸做出很多變化
有興趣的人就自己研究吧