比較好看的 Board Game Arena 樣式

關於

BGA（Board Game Arena）是一個線上桌遊網站，能在線上與朋友或陌生人一同進行線上版的桌遊。

對我來說，BGA網站的預設界面樣式可以說是非常「驚悚」的，在進行一段時間的遊戲後，眼睛感覺非常痛，原因是來自網站過小的字體（對於中文字來說）、過高的對比以及過少的留白。

幸好，BGA提供了CSS的修改功能。因此，我花了一個晚上來對BGA進行了大量的CSS修改，大幅調整了文字尺寸與整體界面比例、配色以及陰影等視覺效果，讓BGA更有現代網站的風貌，並透過這篇文章來將CSS代碼公開。

這個CSS代碼或許會不定期地更新來進行更多樣式上的改善。

更好看的 Board Game Arena 樣式

以下圖片展示了這個CSS代碼對網站的改變（點擊圖片來放大）：

首頁 

預設

套用樣式後

遊戲桌

預設

套用樣式後

遊戲列表

預設 

套用樣式後

競賽

預設

套用樣式後

設定

預設

套用樣式後

如何使用？

一、首先，到這個頁面來取得CSS代碼。

二、進入到BGA的進階設定頁面，並將網頁中CSS代碼的「第一部分」全數貼到BGA的「本站自定外觀」內。

當完成以上部分後，會發現「您已加入遊戲桌...」的樣式與圖上不同，原因在是BGA對於這類訊息的CSS修改會被網站本身忽略，請跟隨以下步驟安裝瀏覽器擴充套件來完成樣式修改。

一、安裝Stylish擴充套件（Safari、Chrome、Firefox）

二、Safari用戶：

　　1. 安裝完擴充套件後，點擊右上角的Stylish符號，並點選「Find More」按鈕。

　　2. 在之後開啟的頁面中，選擇左側的「Edit」

　　3. 將CSS頁面中的「第二部分」全數貼到Edit Style內「CSS」的區塊，並將Title填入「BGS Message Style Force Replace」，在下方Applies to: 設為「Domain」，並填入「bordergamearena.com」，全數完成後，點選「Save Style」。

　　

　　以上步驟完成後，回到BGA畫面，即可看到替換後的訊息樣式。

　　Chrome、Firefox用戶：

　　1. 安裝完擴充套件後，點選Stylish按鈕，並選擇「編寫樣式給：zh.boardgamearena.com/此網址」按鈕。

　　2. 在之後開啟的頁面中，在「樣式段」的「*代碼 1」中填入CSS頁面中「第二部分」的所有代碼，並在「添加樣式」下方的「請輸入名稱。」中填入「BGA Message Style Force Replace」以及確認「適用於」為「該域名上的網址」，且內容為「boardgamearena.com」。

　　一旦確認無誤，點擊「添加樣式」下方的「保存」來儲存。以上步驟完成後，回到BGA畫面，即可看到替換後的訊息樣式。

結語

祝大家使用愉快，有任何問題歡迎在下方留言區域提出。