網頁

2019/4/29

如何修改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;
}


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

沒有留言:

張貼留言