為blogger換背景圖案

自從blogger推出創意範本功能後(詳見dnow文BLOGGER創意範本Templete)，多樣主題式的部落格樣式我想可以符合初學者的需求，但是對饕客而言，能實現自我風格才算錦上添花，若是想為blogger換背景圖案不是難事，只是一些基本觀念還是要有。

&前備觀念：

❶背景和瀏覽解析度的關係：
在製作blogger背景就像自製桌面圖片一樣，在diy桌面一定要先看看你的解析度來設計底圖，不然在使用「圖片充滿背景」時，圖本身太小、太大都會有鋸齒。blogger背景當然也需考量解析度，不同的是你要思量的是大家螢幕的解析度，現在一般至少都是800*600的環境，有錢一點的寬度在1024、1280甚至以上。如何符合大眾需求?背景太小；使用者解析度大時圖片會用填充的方式來處理(圖1)，背景太大，使用者解析度小圖片邊緣會被裁剪(圖2)，如何取捨端看你設計概念。

煩惱背景圖大小的同時，我覺得不妨參考一下blogger範本，以dnowba套用三欄式的版型時，其實從預設版型最大寬度是1000px可見端倪，google在處理預設值時一定也有想過這件事，所以我們姑且就把背景的大小預設為1024吧。

❷製作工具和背景圖參考：
製作的軟體我都是用簡單的photoimpact來處理，而背景圖的參考還是仰頼google大師來處理，要小弟無中生有太折磨人了。我都是找現成的後製。

❸要有免費空間上傳圖片，這是很現實的事情= =

&修改程式碼：

在blogger後台修改程式碼，找到「body.background」這個標籤，其後的程式碼如下

<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="#f4af52 url(http://themes.googleusercontent.com/image?id=1jBzZZhWmESbxpWuz4_KYI1iPRIJPfZVbhagMxWcJWDsBoLRejCvAeTWImo0USEiGpD5G) repeat fixed top center /* Credit: molotovcoketail (http://www.istockphoto.com/googleimages.php?id=1794602&platform=blogger) */"/>

點點程式碼的連結你就知道要修改哪串了，不妨也看一下人家設定的大小是多少。

程式碼中default是預設的背景，而value是實際的背景圖案，所以只要修改value後的網址，
另外畫面要定住不動或是隨調整桿移動，則是在以下語法，
repeat-x fixed top center，這是畫面定住，不隨捲軸移動
repeat scroll top center，這是畫面隨捲軸移動
一般說來，我們在設計牽連資料庫、web2.0的網頁設計，最好都是背景不動，因為很難知道你呼叫的那頁會有多少的資料量，當然除非我們為每個版都固定好高度及文字行數那又是一回事了。

&心得分享：

我們試著在ie上縮放網頁就可以知道你的這個圖可以給哪些人看了，但是寬度是沒問題，長度你又得考慮一下了，因為螢幕有4:3和16:9…也就是說你顧到了寬度，比方說設定成1600px，你的長度要怎麼設計呢，是要4:3=1600:1200還是16:9=1600:900哩…碰到短版的小筆電、mobile的長螢幕…你要怎麼處理。所以結論就是，連google都沒辦法解決的問題，我們還是不要想太多。dnowba也只是提供方法，其實我最後還是調回blogger原來提供的背景了。因為要把背景設成有主題是不大可能的事情。