部落格樣版自動配色系統建置成果

本研究以 Xuite 隨意窩部落格平台為基礎，透過調和配色理論以及語意分析 文獻探討結果，將符合傳統調和配色的理論應用於部落格樣版配色中。Server 端 以 Apache Server、MySQL 資料庫、PHP 及 Java Script 開發。Client 端以 W3C 標 準之 HTML5 與 CSS3 編輯使用者管理介面，支援 Firefox、Chrome、IE8.0 以上 版本瀏覽器。部落格樣版配色系統雛形主要功能為輸入部落格網址，分析類型後，

自動產生推薦配色 CSS 樣式表並可直接套用於部落格中，請見圖 4-1。

一、 部落格樣版配色系統操作步驟

本研究步驟簡單，只要輸入部落格網址或是部落格文章網址，即可推薦部落 格使用的配色樣版，目前接受的部落格平台為 Xuite 隨意窩。

64

圖 4-1： 配色系統前台

輸入網址後會出現所輸入的部落格或是部落格文章的類型，如圖 4-2，並且 可以點選推薦配色樣版預覽，會另開視窗將推薦的部落格配色樣版預覽，如果想 要更換其他版型，可以重新再按一次「自動類型配色」會再隨機出現一個樣版預 覽，請見圖 4-3。

圖 4-2： 輸入部落格網址系統推薦類型

挑選好按確認，會直接套用於部落格樣版，直接可更換部落格樣版樣式，

CSS 語法會自存一份於部落格管理後台的 CSS 自訂樣式中，供部落客可以自行 再修改與調整。

圖 4-3： 配色系統推薦部落格網頁樣版

在研究中選用的調和配色方式是單一色調配色法，系統以同色調選擇主色、

65

輔助色，產生與主題類別圖片調和的網頁配色，讓使用者不需要花費思考，只需 要根據自己喜好選擇套用或者是更換，不論使用者隨機分配任一類別圖片，皆可 產生與主題圖片調和的色彩。並且因為系統只設定文章背景為純黑或純白，除了 讓文章內多彩照片在無彩色的背景色上被凸顯，還可以讓文字色彩與背景色彩差 異成最大值。文獻探討中顯示明度差異性越大對於部落格文章視認性越有幫助，

研究選擇最適於部落格文章閱讀的底色配置方法，主題圖片配色範例請見表 4-1。

表 4-1： 主題圖片配色範例

圖片與配色 主色與輔助色 成果範例

主題圖片的類別透過定義標籤方式產生，部落格管理後台可以針對圖片選取 類別標籤，每個圖片最多選擇七個類別標籤，系統取累積最高的前五個類別標籤，

作為主題圖片的類別。

66

67

在研究方法中提到，由於中文語意分析擷取器由於是透過掃取部落格文章作 詞庫擴充與關聯度判別，較接近現代人生活中的用語，會定期更新及擴充詞庫量，

也更能快速展現新詞彙以及分類的精準度。