Blogger無腦改版面教學



*圖與本文依然無關。

基本上Blogger跟Pixnet一樣,在版面樣式的修改上也是沒有樣式小幫手一類的東西,所以想改版面就要自己在樣式表裡編輯,這邊提供簡單的改版頭教學,如果你有什麼圖想放在版頭,照這篇的步驟來就可以解決了。

首先,在所有部落格平台的後台中,你應該都可以找到一個CSS樣式表,裡面有一堆你光看就覺得霧煞煞的語法,但是它們基本上的構造其實都是差不多的,拿Pixnet的樣式表來說,它在版頭的語法是長成這個樣子(點圖可放大):



在Pixnet的樣式中,「版頭」這一塊的開頭標示是"Top",別家的話,有的是標示為"Banner",至於在Blogger的樣式中則是標示為"Header",所以要改版頭,就要先找到標題為"Header"的這一塊。

以我所使用的這個版面來說,版頭本來是沒有圖片的,所以在修改HTML的樣式表裡面也不會有圖片的語法,這時就要自己把它放進去,個人因為之前是在用Pixnet,所以就直接把Pixnet樣式表的那一段插入背景圖片語法複製下來,再貼進Blogger的樣式表裡,如下圖所示(同樣點圖可放大):



用粉紅色框起來的那一區,就是原本沒有,而我把它加上去的東西。

在這個語法中,網址當然就是你想放在版頭的圖片網址(可以先把圖片上傳到Blogger有附送的Picasa相簿,或是任何可以外連網址的相簿),height是調整版頭的高度,數字可以隨便你填,right top是讓圖片置右上角,如果你要讓圖置中就寫center,置左就改成left,置底就寫bottom,置頂就寫top,如果是置右下或左上之類的就以此類推。

至於no-repeat就是圖片不重複,想讓圖片重複的話就把前面的no-拿掉,如果想讓圖片垂直重複則是repeat-y,水平重複則為repeat-x

在這串語法底下有個原本就有的width,這個東西就是版頭寬度,最好對應你整個版面的寬度設定(通常預設寬度都是跟你的版面一樣),如果你想改更寬一點,就順便連整體版面寬度都一起改,這樣看起來會比較美觀。

等你把上述的東西都搞定後(可以邊調整邊用預覽觀看你的成果),如果你使用的是跟我一樣的版面,你可能會跟我遭遇到一樣的問題,就是版頭會有個框線遮到你弄好的圖片,這方面應該可以把它調整到跟版頭一樣大小,但是我不會(爆),所以我的作法就是把那個框線變不見~在"Header"區同樣的這一塊當中找到border,把它的數字設定為0,框線就會自動不見啦~

以上就是更換版頭圖片的作法,再者,如果你嫌版面看起來太窄,你也可以把它調寬,只要改下圖這一塊的width數字就可以了:



把整版調寬後,美觀起見,版頭寬度、內文與邊欄的寬度也要橋一下,一樣是在Outer-Wrapper這一區,你應該可以找到下圖這兩塊語法:



也是一樣,改掉標示部份的width就可以了,其中,main-wrapper是內文區塊,sidebar-wrapper則是邊欄區塊,注意兩者的寬度加起來不要超過整體版面的寬度,否則版型會跑掉,就不好看。

以上大致就是更換版頭跟調整整體版面的方法,我的版面也只有改這兩個地方而已,其實上述方法會了之後,也可以拿去改邊欄背景、整體版面背景或內文背景,原理是一樣的,改整體版面的部份原則上不管是哪家部落格平台的樣式,都是樣式表中的第一個body區塊,而邊欄的開頭標示通常都是sidebar,留言區塊通常都是comment開頭,然後啥啥tittle就表示是那一區塊的標題欄位,這些看久了就差不多知道哪邊是負責哪塊欄位的語法,不過如果你並沒有很想把版面搞得很花俏,那大致上會改版頭跟欄位寬度之類的也就很夠用了,否則搞太花俏影響閱讀,老實說看了也礙眼,而且這東西會了,今後要搬去哪家部落格平台也都難不倒你哩~(喂)

留言

  1. 你也太有心了吧!還用教學~
    這是在招大家一起搬家嗎XDDD
    那個~這兒的留言實在有點麻煩= =

    噢~我要說的是~~
    瞎咪!!!霍爾是貝爾配音???
    我也要看阿阿阿阿阿阿~~~(失心瘋)

    回覆刪除
  2. 會很麻煩唷?!(驚)
    是說blogger預設的留言介面是跳轉到下一頁……
    我還特地設成跟PIXNET一樣是跳出視窗的說~~
    唔,好像看過有人寫過如何把blogger留言介面改成類似無名或天空那樣……
    改天再研究看看好了-_-"

    我也想聽貝爾配霍爾啊喔喔喔~~
    不知道DVD有沒有尬英配在裡面=..=
    是說上次看到終棘警探DVD好像有日配也=...=
    整個沒勇氣聽……(抱頭)

    回覆刪除

張貼留言

★ Blogger有時會誤把真人留言當成廣告擋掉,過很久我才會發現有留言,建議登入再留言比較不會被擋(つд⊂)

★ 因為Blogger擋太兇,所以現在設成只有兩週前的文章才會審核留言,新文章沒有審核制,先試營運一陣子看看,歡淫大家留言~ヽ(゚∀。)ノ

隨機文章(踩雷區)

熱門文章