如何置換新版部落格範本的背景圖案

之前綸太郎有寫過一篇Blogger template模板教學課程---CSS外觀解說，不過目前新的範本推出後，這篇就形同廢文，派不上用場，之前土人有問過關於部落格背景的問題，所以就把如何置換背景的方法跟大家分享。

在過去的版本中，通常我們都是在body這個定義設定我們的背景圖案，如
body {
color:#333;
background:url(圖片網址);
}
而在新的範本中，卻是如下的設定
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
都是用變數來帶領這個定義，所以我們才能在後台利用所見即所得的點選方式來拼湊成我們要的版面，所以如果你嫌麻煩，通常是可以把程式碼改成以前那個樣子，在body直接定義即可，但我想大家應該還是喜歡可以隨時變換畫面的部落格，尤其對新手而言，所以麻煩些是必要的。

如何找到圖片置換的位置呢?
我以"圖片視窗"第一個模版為說明，


進入後台→設計→修改HTML，然後找到/* Variable definitions這區，中文應該翻成變量定義，屬於背景圖案的設定是body.background(看上面的body定義也可知道，background: $(body.background);)

原先的圖樣程式碼如下，我們找到變數名稱Variable name為body.background的敘述，

<Variable name="body.background" description="Body Background" type="background"
default="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center"/>

預設圖片我改成熊熊的圖案，

<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="#111111 url(http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#ffffff url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMODVmMDIxNTQtYjk3MC00M2FkLTlmZjctYjVhY2JiYzRlNzE1) repeat scroll top center /* Credit: sasimoto (http://www.istockphoto.com/googleimages.php?id=6422184&platform=blogger) */"/>


你可以看到後面那段的語法不同，就是圖片變更了，所以如果你要置換圖片只要修改後面那段url背景圖的綠色網址即可。

在這個模版中default=是屬於預設的背景，而value=就是實際部落格的背景圖案，我們只要修改後面這對value的網址即可，另外畫面要定住不動或是隨調整桿移動，則是在以下語法，
repeat-x fixed top center，這是畫面定住，不隨調整桿移動
repeat scroll top center，這是畫面隨調整桿移動
都可以在圖片網址後面修改你的設定。

另外有點要注意的就是你要置換的背景圖案大小，最好參考你使用模版圖片的大小，顯示時比較不會有太大差異。



至於這段
/* Credit: sasimoto (http://www.istockphoto.com/googleimages.php?id=6422184&platform=blogger) */
這是這張圖片的來源圖庫註解，可以作為參考。

但不是每個模版設計的背景語法都如同上面那樣，也有以下這樣的，語法類似，

<Variable name="body.background" description="Body Background" type="background"
default="$(color) none repeat-x scroll top center" value="#ffffff url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMODVmMDIxNTQtYjk3MC00M2FkLTlmZjctYjVhY2JiYzRlNzE1) repeat scroll top center /* Credit: sasimoto (http://www.istockphoto.com/googleimages.php?id=6422184&platform=blogger) */"/>

他沒有像前面的分兩個網址敘述，只在value定義，所以我們只要改這裡面的圖片網址(橘色的)即可。

以上就是修改部落格背景圖案方式，其實很簡單，別個定義也可以如此套用，大家可以試玩看看。

2010.7.31更新，
Blogger in Draft已經推出可以在後台直接更換自行上傳的背景圖功能，請看
可自行置換新版模版背景功能---部落格測試版推出說明。

延伸閱讀：
新版Blogger範本設計工具正式啟用