簡單使用firebug調整blogger版面CSS

這篇沒有要說很高深的使用方式，畢竟現在blogger已經有很方便的版型調整工具了（就是它自己出的那個），但是我的範本是之前自己亂弄（加了一堆網路上的hack）過了，所以不能套用它的版面調整工具，那麼要調整版面某個區塊（或者稱作是頁面元素）寬度時要怎麼辦呢？以下介紹如何使用firebug來調整一些「簡單的」版面CSS（像是寬度、字型、顏色等），我個人並非相關的背景出身，只是當初有作過一點功課，大概知道margin,padding,font-size代表什麼意思，不過不知道也沒關係，網路上關鍵字一搜就一堆教學資源可以看了，這篇主要是要說使用firebug，你可以很方便的看到更改CSS之後的結果（但是不會影響到真正的範本，因為firebug會即時顯示你更改CSS後的結果），你可以在滿意之後，再到blogger的範本裡，照著firebug裡面最後的CSS更改就可以了。

好了說了一堆，首先必須要有firefox這個瀏覽器才能裝firebug，firefox可以在這裡下載。firebug是fx的一個套件，下載位置在這裡，裝了之後重新開啟fx就可以了。

假設我今天要改標題的字體大小要怎麼作呢？

1. 右鍵選擇 Inspect Element（中文應該是觀察元素）

2. 選擇標題的位置，框住它 ：
   這個意思是當你按了 Inspect Element 之後，畫面下方（預設是下方，可以更改設定值）會出現它的主視窗，畫面上方是blog主體。下方左側是html語法，右側是CSS，到時候更動這邊的CSS，相對應的區塊就會發生變化喔。這裡有個關鍵的地方是要再按一次下方主視窗的Inspect Element（見箭頭處），它就會跳出框框了，這時你再選擇欲更動CSS的區塊就可以了。
   

3. 確定之後，更改下方右側的CSS視窗參數值即可
   我們要更改的是標題的字體大小，要注意不要選到「標題連結」的區塊，我們要的是「包含標題連結」的區塊（會比前者涵蓋範圍大一點），看圖就知道了。



標題連結區塊



「包含標題連結」的區塊



下方右側的CSS參數區




4. 直接更改CSS參數值，預覽即時結果
   比方說我要更改標題字體大小，就在font-size的地方調整，把30px改成50px，它就會即時顯示50px的大小喔！更改方式是直接在30px那邊點一下就可以了，你也可以改單位，比方說把 px改成 em等也會即時顯示更改結果喔！這邊有個應用，你可以在該區塊空白處連點兩下，它會跳出一個小框框，這裡你可以新加上新的參數，比方說像是 line-height（行距），而且你只要打 lin它會自動補完 line-height 喔，你可以在這裡測試一些新參數，方便你瞭解那些參數是什麼意思，改了之後對於版面會有什麼影響。

5. 等到CSS你滿意了，再到blogger裡面的範本更改即可
   這個應該不用多作解釋，這裡提醒一下，firebug顯示的CSS區塊名稱，可以讓你直接在blogger範本裡搜尋喔。比方說我們要改的是「.post h3」這個區塊（有時候會被擋住，沒關係在「.post h3」那邊點一下它就會浮出來了XD。意思是在blogger的修改範本框框裡點一下，按 ctrl+f搜尋 post即可找到「.post h3」這個CSS區塊了，把這裡參數按照 firebug的參數更改後儲存範本就OK了。不放心的話可以先備份範本再更改，另外這裡只是介紹一點firebug的基本功能，我想如果你是相關背景的話，這工具應該是相當強大的。