修改 Blogger 各處 CSS(文章標題+內文+其他)，以字型大小顏色舉例

這個「Blogger論壇貼文」表示，使用 Blogger 後台「範本設計工具」來將文章標題的字體改大，結果首頁文章標題的尺寸如預期大小，但文章頁面的尺寸變小。

這個情況有點奇特，本篇試著瞭解為何會如此，順便說明 Blogger 其他區塊的字型要如何調整 CSS，做個系統性的整理。

一、官方修改工具及修改原則

1. 範本設計工具

使用官方修改工具來調整 CSS，大致的步驟如下：

• 後台 → 範本 → 自訂 → 進階

如上圖，點擊「文章標題」後，右側會出現所有可以調整的項目，例如字型、粗體、斜體、尺寸、顏色等，下方會即時顯示修改效果。

網頁的其他區塊也是同樣的操作方法，不過每個人的範本內容都不一樣，需要注意以下幾點：

• 每個範本可以修改的區塊可能都不一樣
• 每個區塊能修改的 CSS 細項也可能不一樣
• 如果不小心動到範本中、跟這個工具相關的程式碼，這裡修改的效果，可能無法呈現在網頁上。
• 承上，最嚴重時這個「範本設計工具」可能無法運作，或是非官方範本的程式碼，也可能讓「範本設計工具」無法執行。
• 自己設定或非官方範本的 CSS 內容，有可能覆蓋掉這個工具的效果。

如果順利的話(不去亂動範本內容)，使用「範本設計工具」就能完成多數的 CSS 修改。但如果運氣差、或是「範本設計工具」無法滿足各種客製修改需求，只好直接使用 CSS 語法、或直接改範本了。


2. 修改原則

瞭解以上敘述後，如果你不太熟悉 HTML/CSS，但又想自行調整 Blogger 各處版面，大致可歸納出以下原則：

• 最保險的是，說服自己遷就現有範本的版面效果，除非改壞後，有自行修復的能力。
• 真的想自訂版面，建議盡量別動到範本內容，只使用「範本設計工具」來做有限度的修改。
• 覺得自己有冒險家精神，想嘗試網路找到的教學、自己修改範本內容，務必先閱讀「備份範本的訣竅」系列文章。
• 讀完之後，做好版本控制以及完善的註釋，出了事才能自行交叉比對、找出原因，或是還原回正常狀態。

二、修改字型大小顏色

1. CSS

簡單整理幾項修改字型時，可能會用到的 CSS：

• 字型(font-family)：請參考「中英文字型跨平台設定最佳化」、「網頁中文字型除了微軟正黑體, 還有這些好選擇」。
• 粗細(font-weight)：「font-weight 屬性用法介紹」
• 斜體(font-style)：「font-style 屬性」
• 尺寸(font-size)：「透過 font-size 屬性設定文字大小」
• 顏色(color)：「color 文字顏色設計」、「CSS 色碼對照表﹍快速挑選好看的顏色」

以 WFU BLOG 為例，以下是一組修改文章標題可能會用到的範例：

font-family: "文泉驛正黑","WenQuanYi Zen Hei","儷黑 Pro","LiHei Pro",Meiryo,"微軟正黑體","Microsoft JhengHei",sans-serif;
font-size: 16px;
color: #666;
text-shadow: 1px 1px 2px #bbb;


2. 即時效果工具

調整 CSS 時，每當修改一次參數 → 範本存檔 → 重整頁面看效果 → 再微調參數 → 存檔... 這個流程會耗費大量時間，非常沒有效率。

想自行修改版面的讀者，務必學會使用「Chrome 開發人員工具」，這樣改任何參數，例如字型的尺寸時，就不用為了從 24px 一路調到 16px 這樣的過程，來回不斷存檔、重整頁面，直接利用「開發人員工具」，調整的任何數值，可即時在畫面上看到效果，然後將所有最終參數在範本中修改即可。

三、修改各區塊字型

在範本中添加 CSS，最簡單的流程為：

• 後台 → 範本 → 自訂 → 進階 → 新增 CSS

以下以 WFU BLOG 舉例，列出各主要區塊如何用新增 CSS 的方式修改字型，若有未提到的部分、或使用非官方範本，請利用「Chrome 開發人員工具」找出區塊的位置。

1. 網站標題

.Header h1, .Header h1 a {
font-family: Calibri;
font-size: 40px;
color: #5e7380;
text-shadow: 2px 2px 2px #ddd;
}

2. 導覽列

.tabs-inner .widget li a {
font-family: "Microsoft YaHei", sans-serif;
font-size: 16px;
font-weight: bold;
color: #333;
}

3. 文章標題

h3.post-title, h3.post-title a {
font-family: "全字庫正楷體", TW-Kai, "Yu Gothic", "Ms PGothic", SimHei, DFKai-SB, sans-serif;
font-size: 24px;
color: #666;
text-shadow: 1px 1px 2px #bbb;
}

4. 文章內容

.post-body {
font-family: "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", Meiryo, "微軟正黑體", "Microsoft JhengHei", sans-serif;
font-size: 18px;
color: #333;
line-height: 1.5;
letter-spacing: 1.4px;
}

5. 日期

h2.date-header {
font-family: Arial, Meiryo, sans-serif;
font-size: 14px;
}
.date-header span {
color: #444;
}

6. 側邊欄(小工具)標題

div.widget h2 {
font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
font-size: 14px;
color: #333;
}

7. 整個網站

body {
font-family: "Trebuchet MS", Trebuchet, SimSun, sans-serif;
font-size: 16px;
color: #333;
}

2015.12.9 補充:

8. 留言區塊

.comments .comments-content {
font-family: Arial, "新細明體", sans-serif;
font-size: 14px;
color: #444;
}

四、標題最佳化

以上的範例，對於 Blogger 文章標題、或網站標題等等而言，不是最好 CSS 的設定方式。若考慮到 SEO 效果，建議讀者參考這三篇系列文，會是最好的設定方式：

• Blogger 文章標題最佳化(1)﹍ 超連結與 CSS 調校
• Blogger 文章標題最佳化(2)﹍符合 SEO 的 H1 H2 H3 標籤配置研究
• Blogger 文章標題最佳化(3)﹍修改範本 H1 H2 H3 標籤實用技巧