2015年11月28日

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

A+
blogger-template-design-tool-修改 Blogger 各處 CSS(文章標題+內文+其他),以字型大小顏色舉例這個「Blogger論壇貼文」表示,使用 Blogger 後台「範本設計工具」來將文章標題的字體改大,結果首頁文章標題的尺寸如預期大小,但文章頁面的尺寸變小。

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



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


1. 範本設計工具

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

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

blogger-template-design-tool-1-修改 Blogger 各處 CSS(文章標題+內文+其他),以字型大小顏色舉例

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

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

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


2. 修改原則

瞭解以上敘述後,如果你不太熟悉 HTML/CSS,但又想自行調整 Blogger 各處版面,大致可歸納出以下原則:
  • 最保險的是,說服自己遷就現有範本的版面效果,除非改壞後,有自行修復的能力。
  • 真的想自訂版面,建議盡量別動到範本內容,只使用「範本設計工具」來做有限度的修改。
  • 覺得自己有冒險家精神,想嘗試網路找到的教學、自己修改範本內容,務必先閱讀「備份範本的訣竅」系列文章
  • 讀完之後,做好版本控制以及完善的註釋,出了事才能自行交叉比對、找出原因,或是還原回正常狀態



二、修改字型大小顏色


1. CSS

簡單整理幾項修改字型時,可能會用到的 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 效果,建議讀者參考這三篇系列文,會是最好的設定方式:

11 則留言:

  1. 晚上好, Wayne!

    真方便, 不用自己研究! ^^ 我記得第 6 點先!

    有沒有留言箱輸入文字欄位的欄稱呢? 我試了很久都找不到 ...

    回覆刪除
    回覆
    1. 蘭姊你好,請問 "留言箱" 是指 ?

      1. 是 Blogger 官方留言工具的 "留言框",其上方輸入文字欄位的欄稱 "?則留言" 這裡嗎?
      2. 是 Blogger 小工具 "聯絡表單" 的文字欄位? (例如 "名稱" "以電子郵件傳送 *" 這些)

      刪除
    2. 早晨!

      我找的 "留言箱" 欄稱是指看完文章, 即這個回應的輸入位置, blog post 下方 ...
      可能在電郵回覆你收不到啦 ...

      週日愉快!

      刪除
    3. 瞭解了,是 Blogger 官方留言框,但是 "輸入文字欄位的欄稱" 是指哪裡我還是不懂呢,你可能要截個圖給我,註記一下,我才知道你想改字型的是哪個位置~~

      如果你想改 Blogger 留言框裡面,輸入留言的地方,這整個區塊都是 IFRAME,由於跨域的關係,基於安全性考量,IFRAME 裡面的東西是不准修改的。

      為了避免理解錯誤,截個圖比較不會誤會。

      P.S. 我猜你有勾選 "通知我", 所以會收到 email 通知 → 但那是 Google 寄給你的 mail, 並不是我寄給你的 mail, 直接回覆的話,等於你寄信給 google 喔!我自然是收不到的~~XD

      刪除
    4. "輸入你的留言 ..." 此回應的欄位!
      以你說的 iframe ... 不能改的就是這欄位, 便不能改!?
      但為何可放入 emoji ?

      刪除
    5. 終於瞭解意思了,是要修改訪客留言顯示的文字,請試著修改:

      .comments .comments-content {
      這裡填入 CSS 內容
      }

      刪除
    6. 謝謝你! 拿了! 晚安! 美夢! ^^

      刪除
  2. 請問有辦法設定成不要在顯示區顯示網頁標題嗎?
    版面配置如您這樣,上方區域為目錄,右方為側欄,點擊的文章和網頁都在左方顯示
    如果點擊的是"網頁"(非文章),顯示區的第一行都是大大的網頁標題
    除了網頁標題留白不填的方法之外,請問有辦法不顯示網頁標題嗎?
    謝謝

    回覆刪除
    回覆
    1. 直接用 CSS 設定為隱藏就行囉,請參考「三、修改各區塊字型」→「1. 網站標題」,多增加一行 CSS 參數:

      display: none;

      這樣網站標題就隱藏了。

      刪除
  3. Wayne,您好!
    我的blogger左邊網址存檔,標籤等的字體突然變得很小,不知道如何改大,請問可以幫忙看看嗎?感恩!
    http://ourfashland.blogspot.hk/

    回覆刪除
    回覆
    1. hi, 你提的 "網址存檔" 等,應該參考「三、修改各區塊字型」→「6. 側邊欄(小工具)標題」來修改即可

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。