部落格發展與網頁樣版現況

一、 部落格由來與發展

「部落格」是由網誌（Blog；Weblog）音譯而來，也稱作「博客」。主要提 供個人在網路上撰文、紀錄的虛擬個人網路發表平台，透過留言、回應相關回饋 機制，讓部落格使用者（blogger；部落客）可以簡單、方便在網路上溝通互動。

網際網路的熱潮促使全民都能在網路上發表自己的想法，使用部落格是其中 較簡單的方式，由於部落格簡易的介面，讓使用者可以輕易上傳生活產生的圖片、

影片及文字。部落格資訊影響範圍廣泛，研究也指出部落格的資訊對於網路使用 者的決策與想法有相當程度的影響（吳佳玲、林瑩昭，2013），由於其分享特性 也延伸至教育各階段的課程活動教學中，許多教師運用部落格簡便的數位工具增 強自我學習應用與課程交流，楊慈儀（2012）研究提到使用部落格建置教學檔案 除了可以提供豐富資源讓學生自主學習，更是一種有效率、便於存取的檔案保存 方式。而使用社群服務混搭而成的學習環境，可以強化學習動機，於是也產生出

39

混合多樣網路服務（部落格、維基百科、社會化書籤工具、影音社群）建構學習 空間平台的研究（Popescu, 2014）。

臺灣部落格平台從 2003 年開始發展，當時的部落格發展事件有龍頭入口網 站雅虎奇摩併購無名小站，接著出版業與媒體（如：城邦、中時）、電信業者（如：

中華電信）、入口網站（如：蕃薯藤、新浪）等，也陸續提供部落格平台的服務。

然而自從行動裝置普及，人們進入了微網誌的風潮中，但如同研究動機與背景中 所提到，部落格在分享經驗、尋求意見各面向仍是影響個人決策一個重要的平 台。

根據資策會 FIND（2011）調查研究發現，臺灣網路使用者主要使用的網路 社群或討論平台的排名依序為：facebook（92.31%）、Yahoo！奇摩部落格（34.82%）、

無名小站（34.61%）、YouTube（24.61%）、Google＋（23.89%）、Mobile 01（16.24%）、

台大 PTT（14.44%）、Pixnet 痞客邦（13.89%）、Xuite 日誌（13.35%），雖然微網 誌(FB)近年異軍突起，但仍有不少使用者繼續使用部落格發佈個人訊息，因為比 起單則訊息的微網誌，部落格能夠保存完整文章並支援 google 搜尋。

2013 年 8 月 Yahoo！奇摩部落格、無名小站宣布年底終止服務(數位時代網 站，102/09/15)，使用者可以選擇搬家至配合的 Xuite 隨意窩，或者是手動搬家 到 Pixnet 痞客邦。目前臺灣的部落格服務提供商 BSP（Blog service provider）以 Xuite 隨意窩、Pixnet 痞客邦、天空部落等等…為主，由於使用者眾多的 Yahoo！

奇摩部落格、無名小站，搬家合作的臺灣部落格平台以中華電信提供的部落格平 台─Xuite 隨意窩為主，故研究選擇 Xuite 隨意窩的部落格平台作為部落格樣版配 色系統應用平台。

以往的討論關於部落格的文獻，探討層面共分成三類：滿意度、使用意圖：

部落格使用影響因素（許麗玲、徐村和、吳憲政，2009）、應用互動商業模式、

區域性類別分析或是系統功能面（陳瑋玲，2009）的討論，較少討論到網頁樣版 配色的研究，然而部落格網頁樣式，如網頁的版型設計、網頁色彩、文章內容及 多媒體的應用，是影響部落格傳播效果與瀏覽者印象以及點閱率的重要因素 (張 惠如，1992)。

40

二、 部落格樣版相關研究

由於部落格使用者廣泛，對於部落格區塊的介面設計使用性有研究指出，對 於部落格進階樣式制定的部分，因為經常沒有淺顯易懂的操作說明，很容易讓使 用者產生挫折感，張惠菁（2008）認為整體版型美觀對於使用者而言相當重要，

但是操作 CSS 樣式修訂成功率過低，所以系統應該提高協助的功能。林裕淩等 人（2008）認為部落格供應商應該在背景樣式、設計小幫手部分增加人性化的操 作，提供可以展現使用者個人特質的設計空間。冷輝世（2010）與（羅威、陳偉，

2008） 研究解構 CSS 技術期望將技術門檻降低然而經營部落格的使用者需要自 行編輯圖片並且撰寫文章內容、不定時更新增加部落格的新鮮度，往往對於學習 CSS 技術力不從心，因此本研究將朝向部落格樣版自動配色系統方向進行實驗，

進而減少樣版配色的時間，廖祥淵（2008）提出以個人化為基礎的部落格樣板區 塊推薦模組，產出 CSS 樣式表提供使用者修改。自動配色系統對於部落格使用 者就可以提昇網頁樣版決策效率，透過文獻探討可以了解目前部落格網頁樣版配 色研究的困難與問題，做為開發系統的參考進而提升部落格配色系統的滿意度。

Hsu（2012b）從介面設計角度探討年輕族群對於部落格樣版設計觀感的影 響因素，認為男性族群較重視資訊取得方便的樣版，而女性則較重視美觀因素。

許峻誠與朱若慈（2010）以語意差異法（Method of Semantic Differential，簡稱 SD）分析部落格樣版偏好，在針對大學生的問卷中指出，以白色為背景的設計 會給使用者簡潔的意涵，而使用者普遍偏好藍綠色系的植物、風景等照片組成的 療癒性質樣版，使用者在視覺版面設計上重視個人化的呈現。

三、 部落格 CSS 樣式表分析

層疊樣式表（Cascading Style Sheets，簡稱 CSS），是 W3C 定義與標準中，

使用在結構化的文件（HTML 或 XHTML）裡，設定網頁顏色、大小、字體、編 排的電腦程式語言。部落格平台繁多，然而在 CSS 規劃上大同小異，為了滿足 使用者的需求，在 CSS（Cascading Style Sheets）樣式表方面提出符合 Web 2.0 概念的自訂管理介面，操作部落格頁面元素的位置與色彩，為了要完成這樣的需

41

求，部落格 CSS 樣式表與 XHTML 頁面分開，在 XHTML 頁面中將畫面中的主 要區塊，如標頭(Header)、選單、左右欄、中間欄（內容區塊）、背景、註腳區 塊（Footer），都分別以 DIV 及 ID 或 Class 另外制定，只要連結不同 CSS 樣式 表即可以顯示不同 Layout 的畫面呈現。將 CSS 樣式表獨立出來的優點如下：

1. 增加可讀性，修改方便 2. 網頁結構更加靈活

3. 使用者可以自行決定網頁的外觀呈現 4. 網頁程式結構簡化

樣版選擇為部落格提供的設定，不同 BSP 所提供的功能不同。還有一個與 傳統網頁設計不同的地方，即使刪除 CSS 樣式表，部落格內容仍然不受影響。

由於研究以中華電信提供的部落格平台─隨意窩 Xuite 為例，以下解析部落 格樣板網頁結構：

(一) 網頁語法架構：

除了 html 語法主要的外框（#html、#body）外，隨意窩部落格平台主要有 七個區塊的 CSS 定位，即定位框(#container)、標題（#banner）、頁尾（#footer）、

中欄（#mid）、左欄（#linksLeft）、右欄（#linksRight）和內容（#content）。而中 欄（#mid）為文章與內容主要區塊， content 的寬度可設定固定或是隨著瀏覽器 改變。

42 圖 2-17：Xuite 隨意窩日誌樣版網頁語法架構圖

資料來源：隨意窩平台資訊與研究整理繪製 1. #html：用來定義 html 主體。

2. #body：用來定義 html body，以及日誌內容與瀏覽器邊界等資訊。

3. #containe（定位框）：主要是包住標題（#banner）、頁尾（#footer）、中 欄（#mid）、左欄（#linksLeft）、右欄（#linksRight）和內容（#content）

的區塊，此處設定 background-image，圖片會跟著 scrollbar 移動，請注 意此處的 position 以 relative 定義。

4. #banner（檔頭）：用來定義 Xuite logo、menu bar、日誌標題及描述，若 設定 background-image，則背景圖片會跟著 scrollbar 移動，並只存在日 誌檔頭。

5. #linksLeft（左欄）：用來定義左方欄位相關資訊，左欄的 position 以 absolute 定義，width 建議設定為 185 pixels~205 pixels，#mid（中間欄）

的 margin 需相對設定，以免欄位重疊。

6. #content（中間欄）：用來定義中央內容欄位相關資訊。此處的 position 以 relative 定義，並設定 margin 需對應#linksLeft 跟#linksRight 的寬度設 定，以免欄位重疊。

7. #linksRight（右欄）：用來定義右側欄位相關資訊。右欄的 position 以 absolute 定義，width 建議設定為 185 pixels~205 pixels，#mid（中間欄）

的 margin 需相對設定，以免欄位重疊。

8. #footer（檔尾）：用來定義下方欄位資訊。

四、 現行部落格網頁樣版來源分析

各平台都提供了分類不同的規格化 CSS 樣式選擇，以類別區分讓部落格使 用者可以簡單點選套用版面，如果有技術背景可以自行修改 CSS，將圖片與顏色 在 CSS 表格中寫明，套用於平台的樣式，呈現個人獨特的網頁設計。

部落格網頁樣版來源大致分爲四種：「部落格 BSP 提供的官方樣版」、「平台 提供樣版精靈」、「他人分享 CSS 樣式表」、及「自己修改 CSS 樣式表」，官方樣 版的來源有 BSP 業者的美術設計師根據站內的網頁結構設計的 CSS 樣式，以及

43

熱心部落格使用者投稿，通過 BSP 業者審核過上架；而自訂樣版則為使用者編 修 CSS 語法所構成的 CSS 樣式表，CSS 樣式表編修需要有網頁與程式設計相關 背景方能勝任，無相關背景者較不容易理解。

(一) 官方樣版：通常以欄位、色系、類別、排名等排序方式，圖文羅列於平台 管理頁面，由網友預覽後確定使用。

(二) 樣版精靈：透過簡易步驟上傳標頭與選擇各式顏色而成。

(三) 他人分享：熱心網友設計提供 CSS 樣式表讓部落格使用者套用。

(四) 自己修改：使用者自行配色並修改部落格平台設定的 CSS 樣式表。

以上一、四容易造成重複性高的缺點，而二、三則需要有專業設計與網頁知 識背景，非一般使用者可以勝任如表 2-4，由於。

表 2-4： 現有部落格 CSS 樣式表編輯方式比較表

方式 技術性 設計感 重複性 圖文搭配

官方樣版 低 中、高 高 低

樣版精靈 中 中 中 低

他人分享 低 中 高 低

自己修改 高 不一定 低 低

資料來源：研究整理

網路有許多的 CSS 樣式表資源，而網頁組成元素多元，有些樣版網站讓使 用者可下載樣版圖片原始檔案，但是需要使用者後製成 CSS 樣式，使用上並不 方便。有些會直接提供 HTML Code，可以直接套用。

網頁樣版資源網站大致可分為下列幾種：

表 2-5： 網頁樣版資源網站分類

種類 內容

1. Html 網頁樣版網站 已經將 html code 與 images 圖片處理完成為 獨立執行的網頁，有些網站提供付費樣版 2. 可套用於部落格平台的 CSS

1. Html 網頁樣版網站 已經將 html code 與 images 圖片處理完成為 獨立執行的網頁，有些網站提供付費樣版 2. 可套用於部落格平台的 CSS