編輯CSS

已經選了喜愛的佈景主題,但還是想要改變標頭圖片以及一些版面設定(例如字型大小)嗎?編輯CSS 新功能推出囉!

製作自己喜愛的標頭圖檔(header image)並上傳至媒體檔案櫃

iNove預設佈景主題為例,建議先製作一張標頭圖檔(936 X 90),利用增添新檔案功能上傳至您部落格的媒體檔案櫃,儲存後擷取標頭圖檔的URL 路徑。

到媒體檔案櫃編輯你的header image

確認你的Header Image的絕對路徑,拷貝下來。

展開外觀區塊

這裡的範例適用預設的佈景主題-iNove,不同的佈景主題通常會提供額外的設定選項,像這裡的iNove主題設定。您可以先使用這些額外的設定選項,若仍不符需求時,編輯CSS 功能會是您的終極武器。

CSS Stylesheet編輯器

1. 複製右邊說明文字的這一段CSS 碼(使用iNove預設佈景主題者)。
2. 貼至左邊的編輯區(首次使用是空白文字區塊)。
3. 修改 header background : 將自己的圖檔路徑取代這裡的預設值。
4. 儲存。
5. 按下檢閱網站,檢視部落格目前的視覺風格。
6. 進階功能:您可以參考原始佈景主題的stylesheet,將欲修改的樣式拷貝附加到左邊編輯器中,再修改參數即可。別忘記儲存。
7. 進階功能:想要更了解CSS,請參考W3Schools

示範範例:教學研究組部落格

1. 標頭圖檔更換了。
2. 部落格名稱字體放大了1.5倍,字體顏色也改變了。還有,原來的部落格敘述(tagline)也拿掉了。
3. Menu List字體放大了1.5倍。
4. 文章內容字體放大1.2倍。
5. 拿掉footer有關佈景主題的敘述及連結。

小祕訣:想要修改某部份的樣式,卻不知從何找起?建議您用瀏覽器開啓部落格,在頁面上按下右鍵,檢視原始檔,您就可以找到相關資訊。例如:某區塊的HTML tag id, class 等。

Previous Lesson: 寄送郵件 Table of Contents Next Lesson: 編輯文章中插入的圖片大小