部落格Contents設定的基本原則

部落格設計的目的是為了建立一個瀏覽者易於閱讀的網站，舒適簡潔的網頁畫面可以降低跳出率並延長讀者的停留時間，避免過多裝飾讓讀者眼花撩亂，找不到需要的資訊，本篇將討落部落格設計的技巧與應避免的使用方式。

易於閱讀的文字設定要點

設定合適的字體大小

在編輯時避免另外將文字設定為 10pt/13px  含以下的大小，避免被 Search Console 判斷行動裝置可用性為「文字太小，不易閱讀」。一般來說主題預設 <p> 都不會低於 10pt，如果覺得文章字體不夠大的站長，可以另外用 CSS 設定字體大小，如：

.entry-content p {
font-size: 18px;
}

不同的字體（例如為微軟正黑體與新細明體）在相同的字體大小設定下，實際看到的大小也會有所不同喔!

調整間距與行高

透過調整文字之間的距離，讓閱讀更放鬆，以下分別為預設值、0.5 px、1 px

1. 文字間的距離
2. 文字間的距離
3. 文字間的距離

使用的 CSS 代碼為：

.entry-content p {
letter-spacing: 填入數字 px;
}

行高的差異，會影響同一個段落內，行與行的距離，以下分別為預設值、35 px

1. 文字間的距離
   文字間的距離
   文字間的距離
2. 文字間的距離
   文字間的距離
   文字間的距離

使用的 CSS 代碼為：

.entry-content p { 
line-height: 填入數字 px;
}

易於閱讀的文章排版要點

使用段落標題（產生章節）

將一篇文章依據描述方向不同，劃分成不同章節，這樣一來，讀者就可以更輕鬆地閱讀內容，而不必擔心錯過需要的資訊。需要注意的是，段落標題並非是將文字放大並設定為粗體，而是使用諸如 h2～h4 的標題標籤。

這使得搜索引擎爬網站時，可以知道標題在哪裡並正確識別文章的結構。這些段落標題的設計，可以搭配外掛於文章中產生相對應的文章目錄，操作詳見：用 Easy Table of Contents 為WordPress文章添加目錄

段落標題上方留出一塊空間

根據下圖，可以更清楚明瞭的知道段落間的區隔與空間感

分段與分行的不同

從大家耳熟能詳的 Microsoft Word 開始，到我們目前在 WordPress 架構使用的 Classic Editor (傳統編輯器)，分行與分段的意義是不同的！

• 分行使用「Shift+Enter」
• 分段使用「Enter」

※ 使用分行如果覺得單行間距太密集，請調整文字的行高~

注意分行的位置

除了章節之外，段落的分行也是進一步劃分信息的重點。現在的讀者耐心有限，不喜歡看密密麻麻的文字，建議排版時要同時比對行動坂與電腦版的畫面進行調整。根據控制的字數不同，畫面也會大不同喔!

• 電腦版 25~50 字，行動版則為 1~2行
• 電腦版 40~80 字，行動版則為 2~3行
• 電腦版 80~110 字，行動版則為 3~4行

這是沒有經過妥善分行的段落…

進行分行~

使用 BOX 或 項目符號

在文章中，BOX 很容易轉換氣氛，對於增加空間區隔非常方便，我們可以適時地為一些額外資訊添加一個框

原理可以參考這篇：用 Advanced Ads 管理文章中的推薦內容！

為文中資訊添加適合的 BOX ，例如…

項目符號可以搭配 BOX 一起使用，清單可以條列出整齊的資訊，操作可以參考這篇：清單的自訂與設計

易於閱讀的顏色使用要點

避免同時使用太多種顏色

如果因為想強調關鍵字，同時使用各種文字顏色並且具有不同粗細和尺寸在段落，會看不到重點…

為文章重點標示不同的顏色很好，但同時使用了很多顏色，就會讓畫面變得雜亂而沒有重點。我們先來清點在文章中那些項目會用到顏色標記呢?

• 段落標題：
  段落標題建議保持相同風格，可以因介紹的用途不同，而有微小的差距，如標題前方的圖案不同或顏色有些許差異
• 重點強調 (mark 標記)：
  重點強調因正面、優點、消息、重點、積極，或者是負面、缺點、警訊、警告、否定，有些站長會習慣使用兩個不同顏色來做標記，仍需要注意的是風格要保持一致。
• 網址連結：
  網址連結建議只有一種顏色，讓讀者習慣看到這個顏色就知道是網址
• 文字顏色變化：
  黑色+粗體、紅色+粗體

這些突出的設計，可以告訴讀者「應該注意哪裡」，但仍需要注意：

• 不要過度裝飾
• 不要經常使用
• 不要連續使用相同的東西

選擇一種網站強調色

多數主題會提供顏色修改的選項，網站顏色的過於繁雜是不建議的，確定您網站的主要顏色並使用該顏色，讓畫面保持一致，其作用在 選單、邊欄或文內的 清單、引言。

不懂強調色的站長，可以參考  色見本と配色サイト   這個網站，其中收錄了各種主色調的網站範例。在一致的色調下，對讀瀏覽者展現出網站的代表色。

鏈接顏色不是藍色，讓讀者感到十分困惑？

為什麼藍色是網址鏈接顏色的主流？

因為瀏覽器預設的連結顏色是藍色，讀者習慣藍色代表網址連結。但有趣的是，很少有主流平台使用默認顏色 #0000ff。

其他連結顏色如：

• YouTube：#0033cc
• 百度：#0000cc
• 維基百科：#0645ad

總之，我們發現了以下關聯：

• 藍色是網址鏈接的主流
• 默認顏色＃0000ff 很少被使用
• 首要目標是可以一目了然地識別為網址鏈接

此外，因手機瀏覽已經成為市場主流，對於滑鼠事件可以引起的外觀變化(經過出現:變色、底線)陸續在消失，站長如果需要網址連結有底線，建議可以讓他一開始就出現！

不喜歡非黑即白內文配色該怎麼選擇?

一般使用的配色為背景(#ffffff)、文字(#00000)，如果站長覺得過於銳利，可以嘗試調整顏色

改變背景顏色：

改變文字顏色：

可以觀察文字深到淺的變化及差異：