如何修改Google Blogger的CSS樣式 以網誌標題為例

本篇簡單說明如何修改Google Blogger的CSS樣式。

閱讀本篇前你應該先具備基本的CSS知識。

例如我想修改網誌標題的高度，覺得目前的高度了太高了想要變窄一點。

首先用Chrome瀏覽器開啟你部落格的網頁。

然後按鍵盤的f12開啟Chrome的開發人員工具，開啟後點選開發人員工具左上方的圖案，點選後會進入HTML元素選擇模式

然後將滑鼠移到你要修改CSS的地方，本範例為網頁標題。

當滑鼠移到網誌標題時，在下方的開發人員工具的[Element]頁籤下可看到被選擇的HTML元素，而右側的[Style]視窗可看到該HTML元素目前套用的CSS樣式。

從右側的[Style]欄位得知，目前控制網頁標題的CSS為.header-inner .Header .titlewrapper設定為padding:11px 0;。

.header-inner .Header .titlewrapper {
    padding: 11px 0;
}

因為上下11px的padding讓整個網頁標題區塊的高度太高了，所以我想改成上下5px就好。

在Blogger後台的功能選單選擇[主題]，然後點右邊的[自訂]進入Blogger主題設計工具。

在Blogger主題設計工具選擇[進階] -> [新增 CSS]，加入以下CSS設定來覆蓋原有的設定。

.header-inner .Header .titlewrapper {
    padding: 5px 0;
}

修改完後按畫面右上方的[套用至網誌]儲存修改就完成了。