這篇沒有要說很高深的使用方式,畢竟現在blogger已經有很方便的版型調整工具了(就是它自己出的那個),但是我的範本是之前自己亂弄(加了一堆網路上的hack)過了,所以不能套用它的版面調整工具,那麼要調整版面某個區塊(或者稱作是頁面元素)寬度時要怎麼辦呢?以下介紹如何使用firebug來調整一些「簡單的」版面CSS(像是寬度、字型、顏色等),我個人並非相關的背景出身,只是當初有作過一點功課,大概知道margin,padding,font-size代表什麼意思,不過不知道也沒關係,網路上關鍵字一搜就一堆教學資源可以看了,這篇主要是要說使用firebug,你可以很方便的看到更改CSS之後的結果(但是不會影響到真正的範本,因為firebug會即時顯示你更改CSS後的結果),你可以在滿意之後,再到blogger的範本裡,照著firebug裡面最後的CSS更改就可以了。
好了說了一堆,首先必須要有firefox這個瀏覽器才能裝firebug,firefox可以在
這裡下載。firebug是fx的一個套件,下載位置在
這裡,裝了之後重新開啟fx就可以了。
假設我今天要改標題的字體大小要怎麼作呢?
- 右鍵選擇 Inspect Element(中文應該是觀察元素)
- 選擇標題的位置,框住它 :
這個意思是當你按了 Inspect Element 之後,畫面下方(預設是下方,可以更改設定值)會出現它的主視窗,畫面上方是blog主體。下方左側是html語法,右側是CSS,到時候更動這邊的CSS,相對應的區塊就會發生變化喔。這裡有個關鍵的地方是要再按一次下方主視窗的Inspect Element(見箭頭處),它就會跳出框框了,這時你再選擇欲更動CSS的區塊就可以了。
- 確定之後,更改下方右側的CSS視窗參數值即可
我們要更改的是標題的字體大小,要注意不要選到「標題連結」的區塊,我們要的是「包含標題連結」的區塊(會比前者涵蓋範圍大一點),看圖就知道了。
|
標題連結區塊 |
|
「包含標題連結」的區塊 |
|
下方右側的CSS參數區 |
|
- 直接更改CSS參數值,預覽即時結果
比方說我要更改標題字體大小,就在font-size的地方調整,把30px改成50px,它就會即時顯示50px的大小喔!更改方式是直接在30px那邊點一下就可以了,你也可以改單位,比方說把 px改成 em等也會即時顯示更改結果喔!這邊有個應用,你可以在該區塊空白處連點兩下,它會跳出一個小框框,這裡你可以新加上新的參數,比方說像是 line-height(行距),而且你只要打 lin它會自動補完 line-height 喔,你可以在這裡測試一些新參數,方便你瞭解那些參數是什麼意思,改了之後對於版面會有什麼影響。
- 等到CSS你滿意了,再到blogger裡面的範本更改即可
這個應該不用多作解釋,這裡提醒一下,firebug顯示的CSS區塊名稱,可以讓你直接在blogger範本裡搜尋喔。比方說我們要改的是「.post h3」這個區塊(有時候會被擋住,沒關係在「.post h3」那邊點一下它就會浮出來了XD。意思是在blogger的修改範本框框裡點一下,按 ctrl+f搜尋 post即可找到「.post h3」這個CSS區塊了,把這裡參數按照 firebug的參數更改後儲存範本就OK了。不放心的話可以先備份範本再更改,另外這裡只是介紹一點firebug的基本功能,我想如果你是相關背景的話,這工具應該是相當強大的。