【完整教學】Blogger 導覽列字體大小修改（Navigation Menu Font Size）

想調整 Blogger 導覽列（Navigation Menu）的字體大小嗎？ 本篇教你透過 CSS 修改字體大小，快速打造更符合網站風格的版面設計。

📚 目錄

• 為什麼要修改導覽列字體
• 修改方式（CSS）
• 範例程式碼
• 常見問題

❗ 為什麼要修改導覽列字體

預設 Blogger 主題的導覽列字體可能過小或不符合整體設計， 調整字體大小可以提升使用者體驗與可讀性。 

🛠️ 修改方式（CSS）

進入 Blogger → 版面配置 → 主題設計工具 → 進階 → 新增 CSS → 儲存

💻 範例程式碼

/* 調整頂部導覽列字體大小 */
.top-nav ul li a, 
.header-menu ul li a {
    font-size: 18px !important; /* 原本可能約 14-16px，可自行調整數值 */
    font-weight: bold;         /* 讓字體加粗，看起來更顯眼 */
    padding: 10px 15px;        /* 增加點擊區域與間距 */
}
  

👉 可依需求調整字體大小（例如 16px / 20px）

👉 下載詳細步驟教學

【補充上方首頁、關於本站字體調整】 

導覽字體放大後，上方首頁、關於本站字體顯得過小。為了版面一致性我們可增加下方CSS來調整。

💻 首頁、關於本站字體修改 (CSS碼)

/* 調整頂部選單字體大小 */
#top-bar nav .widget ul li a,
#top-bar .top-bar-nav ul li a,
.top-bar-nav .widget ul li a {
    font-size: 20px !important;  /* 可調大到 20px 測試是否生效 */
    font-weight: 700 !important; /* 加粗 */
    display: inline-block !important;
}

/* 確保容器高度不會擠壓字體 */
#top-bar, .top-bar-nav {
    line-height: normal !important;
}

  

進入 Blogger → 主題 → 自訂 → 編輯HTML 

搜尋 → ]]></b:skin>，並在其上方加入上方 CSS 代碼。

⚠️ 常見問題

• 修改後沒變 → 清除快取或重新整理
• 不同主題 class 不同 → 使用 F12 檢查元素

📌 參考學習

👉 Google Blogger 說明中心：變更網誌外觀設計