部落格網頁樣版配色系統實作

第一節 研究架構

在發展部落格樣版自動配色系統之前，先來探討語意分析擷取器，本研究的 擷取器的概念以本體論（Ontology）為基礎，將部落格日誌中所有的文章內容的 語彙集合，制定出 Ontology Tree 模型，把使用者日誌內的文章內容斷詞處理並 透過語意資訊庫來辨識文章類別。

本研究流程如圖 3-1 所示，文章內容對應到文章類別以後，再處理圖片與類 別的對應，研究使用標籤為基礎之 Folksonomy 混合式圖像分類法，將已分類的 圖像對應類別主題。選擇出主題圖片後，根據主題圖像的主要色彩色碼轉換成 HVB 模式，透過單一色相與色調調和配色演算方法，研發出部落格網頁樣版自 動配色系統。

48

圖 3-1： 配色系統流程架構圖 資料來源：研究整理

第二節 部落格網頁樣版配色系統實作

配色系統整體分為三個階段，第一階段設計語意分析部落格文章類別架構，

產出文章類別資料，第二階段建置圖片庫，圖片的分類運用群眾分類法

（Folksonomy）來歸納，第三階段透過自動調合配色技術，套用於部落格 CSS 樣式表中，呈現在網頁上。

49

一、 中文語意分析擷取器架構

本研究在進行語意分析時，首先需要建立部落格詞庫，由於部落格文章用詞 會因為社會文化演進與網際網路慣用詞更動而日益增加，許多部落格用詞在不同 的使用者習慣用語上與一般詞庫不同，所以需要另外建立新的部落格詞庫，進行 步驟如下：

(一) 已知詞語辯識分析：

以 Xuite 隨意窩文章為基礎使用機器學習方式，利用已有的部落格詞庫，分 析部落格文章中可辨識的部分為已知詞，對應語意分析類別模組，研究使用 AIweb 的語意分析模組，將無法辨識的部分視為未知詞，輸出分析後的結 果。

(二) 未知詞語檢析：

未知詞部分按照頻率順序以斷詞方式切割成 2~4 個字的詞語，統計次數後排 序，並經由人工篩選合用詞，定期更新部落格詞庫。

(三) 建立文章分類建模：

針對部落格文章進行資料分析，根據詞意回應了解部落格文章類別代表的關 鍵字、屬性、特徵、標籤等等資訊，進行步驟如下：

1. 對於本體論（Ontology）定義：針對類別可能包括的屬性，定義需要分析的 內容，預計分析的本體論（Ontology）有：關鍵字、類別名稱、文章資料夾 名稱、特徵。

2. 標籤分析：對於本體論（Ontology）的內容，由既有部落格詞庫資訊中，分 析過濾本體論（Ontology）的標籤集合，利用這些標籤集合，再分析部落格 文章，再次篩選合適的標籤，然後對於標籤與標籤之間的關聯性進行研究。

預計可分析出每篇文章的標籤集合，每個不同分類的標籤集合。

3. Ontology Tree 分析：根據標籤分析的結果，將標籤與標籤之間的關聯性，

和標籤與本體論（Ontology)的內容之間的關聯性，定義出 Onlotogy Tree 模 型，可以讓分析人員定義出部落格分類的關係。

(四) 系統運作方式：

隨意窩使用的是艾微科技的 AIweb 中文語意分析擷取器，運作方式分為 Clinet 端跟 Server 端，Server 端利用分散式運算接收到 Clinet 端使用網頁瀏覽器

50

傳達文章的分析需求，即時性的將 Clinet 端傳送過來文章內容透過 HTTP 將文章 內容擷取並進行語意內容分析，經過運算後將關聯索引的結果對應部落格語意庫 後回傳給 Clinet 端，本研究使用 AIweb 語意分析模組，語意分析資料程式架構 如圖 3-2 所示。

圖 3-2： 語意分析系統程式架構概念圖 資料來源：隨意窩系統資料與研究整理

文章類型採用部落格現有分類，以 Xuite 隨意窩日誌分類，截至 2014 年 5 月，日誌數量約日誌中分類排名依序是科技: 19.93%、時尚美容彩妝: 17.01%、

暫不歸類: 5.66%、影視娛樂: 5.59%、健康保健: 5.26%、教育進修: 4.72%、旅遊:

4.55%、音樂: 4.38%、星座命理: 3.21%、科學: 2.87%、寵物: 2.78%、遊戲: 2.66%、

理財投資: 2.61%、餐飲美食: 2.59%...等等，標籤則以主要分類與前三名次分類為 圖片分類標籤，分類類型列表如附錄一。

二、 類別主題圖片資料庫

文章內容經過語意分析擷取器分析完成，回傳分析類別結果，以隨機方式從 該類別所屬主題圖片庫選取一張主題圖片，研究必須先建置基本的主題圖片庫。

主題圖片庫建置方法如下：

本研究主題圖片為配合一致的畫面寬度，需將主題圖片進行裁切，裁切圖片 尺寸寬度以網頁瀏覽器主流解析度尺寸為主，預設寬：1024px，高： 300px 為 裁切範圍，如圖 3-3 所示，解析度為 72 像素。

51

建置分類使用之主題圖庫方式如下：

(一) 初期人工建置圖片庫：

使用隨意窩系統可使用之合法授權圖庫，經過適當裁切，從圖片管理後台 上傳，並且透過有專業設計背景的設計師以現有類別進行分類，每張圖片可 標記七個以下的類別標籤，目前圖片庫已經建置完成 224 筆基本圖片。

(二) 系統上線後：

使用者可自行上傳圖片並分享圖片，並為主題圖片設定類別，其他使用者也 可以替主題圖片設定類別，並以分類次數最多的前七個標籤為限，提升圖片 標籤正確性。

圖 3-3： 主題圖片管理後台擷圖 資料來源：研究整理

三、 運用自動配色系統選取主色、輔助色與強調色

圖片取色方式是根據 Median-cut 演算法，擷取主題圖片主色，擷取主色為 RGB 色彩描述系統，因為選取輔助色與強調色的配色需要使用 HSB 色彩描述系 統，所以使用文獻分析中的運算方式將 RGB 色彩空間轉換成 HSB 色彩空間，並 且使用傳統調和配色理論中的單一色相調和配色法，選擇調整 B 值，B 值調整幅 度為 30 以增加色彩差異度，選出 2 個輔助色，並於該色相對應角度選出強調色，

最後以主色 B 值選出搭配文字顏色，範例如圖 3-4 所示，對應出的配色 HSB 數 值，再轉換成 HTML 十六進位色碼，以便運用於部落格 CSS 樣式表中。

52

圖 3-4： 配色圖片範例 資料來源：研究整理

判斷主色如果 B 值＞＝50，則系統直接選用白色框底的 CSS 樣式表套用，

反之則直接選用黑底框底的 CSS 樣式表套用，本研究不對於文字背景作配色處 理，因為閱讀文字還是以對比強烈的黑色底或白色底搭配文字的閱讀性較佳，

CSS 樣式庫可以根據專業網頁設計人員設計不同版型模組，一樣可以根據配色 系統作 CSS 樣式庫倍增效果，樣式庫的擴充性為本系統的特色之一。

由於研究使用的調和配色理論採奧斯華德等純系列配色法與 PCCS 單一色 調調和配色，以色相環中的單色進行調整，所以不需要將 HSB 轉向以符合色相 環方式做調和配色依據（簡穩容，2013），便可以產生順序調和的等純色階。

配色比例呈現在網頁，研究以 70% 主色、25% 輔助色與 5% 強調色的黃 金原則套用於部落格 CSS 樣式表中，設定網頁背景色為主色，左右選單及標題 背景為輔助色，強調色使用於 hover 屬性上，文字顏色直接使用於 font color。

四、 套用於部落格 CSS 樣式

部落格 CSS 樣式雖然各部落格平台不同，CSS 樣式表也有命名上的差異，

不過部落格樣式既定框架大同小異，如圖 3-5 所示，分為 CSS 樣式表中的背景 色、標題色、欄位框底色、文字顏色、文章標題色、文字強調色為變數，採用上 述圖片配色出來的主色、輔助色、強調色、文字色的顏色色碼套用於部落格 CSS 樣式中，即可呈現網頁配色結果，以隨意窩部落格平台使用 Linux 系統，使用 PHP 語法建置。

53

圖 3-5： 隨意窩 Xuite 部落格 CSS 樣式框架 資料來源：研究整理

主色呈現於色面積較廣闊的背景色，輔助色 1、2 可使用於樣版中的標題底色，

或是欄位底色，文字色則使用於部落格文字與標題文字相關強調性的色彩中，強 調色運用於網頁連結中產生的滑鼠動態（on mouseOver）或連結顯示等。

(一) css 模型：

各 欄 位 及 區 塊 可 使 用 的 CSS 內 容 包 含 margin 、 background-color 、 background-image、padding、content、border 的層次概念如下：

部落格文章頁有五種動態呈現方式：摘要模式、列表模式、拍立得模式

（Snapshot Dynamic View）、磚牆模式、馬賽克模式（Brick Dynamic View），

由於配色關係需呈現較多文字與標題色塊，所以本研究以文章摘要模式為主。

(二) 圖檔命名規則：

CSS 樣式表中因應視覺變化性，可增添具有透明度的 png 圖檔增加樣版色彩 的層次，必須先了解隨意窩平台的 CSS 樣式表規則，Xuite 隨意窩部落格樣版圖 檔階層分為三部份：

1. background 資 料 夾 下 檔 案 ， 為 放 置 背 景 相 關 圖 片 ， 背 景 底 色 請 用 blogBg.png 為檔名，header 的圖片為 blogBg_1. png，給使用者選擇用 的圖片請命名為 blogBg_1s. png，其除圖片請以 blogBg_x. png 依次命 下去。

54

2. list 資料夾為 sidebar icon 圖示存放資料夾自訂的圖示可以放置於此，並 依原名稱命名，另有一種方式為在 CSS 中將 icon 隱藏，但在 sidebar 的 title 圖示中將 icon 及 title 合在同一張。

3. windows 資料夾為存放文章 title 及 sidebar 圖示的資料夾，命名規則文 章 title 為 title.jpg（gif/png）、sidebar 為 sidetitle.jpg（gif/png）、personaltitle 請用 ptitle.jpg（gif/png），若 sidetitle 及 personaltitle 使用相同圖片，請 命名為 sidetitle.jpg（gif/png）。

(三) 配色樣板版型設計：

以此系統套用首先會選擇版型，系統設計初版如圖 3-6，版型可由美術設計 師設計，擴充於版型庫提供系統選用。研究希望專注配色效果，以單一版型，驗 證系統效果，詳細區塊 CSS 樣式命名請見附錄二，每套版型皆須提供 HSB 的 B>50 版型一組以及 B<50 的版型一組，以顯示不同主色的效果，如圖 3-6，文章 背景色一律為#000000 及#FFFFFF，主要是考量文字可視性，並不建議做文章背 景色更動，並且在 CSS 樣式表中設定標記變數註解，讓程式可以辨識套用。

圖 3-6： 版型套組示意圖 資料來源：研究整理

將部落格網址或是文章網址輸入後，部落格網頁樣版自動配色系統會將配色 色彩以變數方式套用於部落格 CSS 樣式表語法，產出一套建議的樣版預覽畫面，

將部落格網址或是文章網址輸入後，部落格網頁樣版自動配色系統會將配色 色彩以變數方式套用於部落格 CSS 樣式表語法，產出一套建議的樣版預覽畫面，