自製Blogger標題圖片(橫幅)

標題圖片的DIY，比設計背景圖來得簡單(不是說設計圖，而是在瀏覽器的呈現上)，dnowba也從設計標題圖片來細訴一些結合css語法的方式。

&了解自已blogger版面設定方式：

標題橫幅在設計前一定要注意寬度，瀏覽者習慣是在看網頁利用滑鼠滾輪來完成上下捲動的需求，所以網頁長度是不設限的，但是寬度上若是太寬常會造成瀏覽的不便，所以我們在設計網頁(尤其是需美工的網頁)，在寬度上是斤斤計較的。同樣為了兼顧使用者瀏覽解析度，我們必須先適當的取好寬度，寬度取捨的問題在套用blogger設計範本的時候，我們會發現版面配置→調整寬度中已經設了1000px的上限，像筆者在部落格上放了較多的圖片，所以我後來放棄解析度800*600的瀏覽群…以17吋螢幕來說調成1024的解析度自已覺得還能適應。
 

這也說明了blogger認識的目前市場主流，瀏覽器在23吋以下大家會調用的解析度還是1000上下…畢竟太高的解析度配不到大螢幕觀看的舒適度也不好。而這1000px指的是文字區域而不是背景圖(背景圖我們把瀏覽器比例縮小來看會發現大了許多)，所以在做橫幅時我們最好設計在1000px以下(視你版型調整的寬度)。
 

再來是了解一下blogger放橫幅的方式和可使用的檔案類型…早期我記得是只可以放純文字的，現在blogger可以選擇從本機、網路的方式來放圖，圖片的位置有三種放置方式，其中「輸入標題和說明之後」的意思譯得不好，應該翻成「文字在前、圖片在後」(word上我們習慣的敘述方式)，最後面還有個「縮減以符合頁面(圖片將會縮減為760像素)，恩…google在預設是760…照顧了800px寬的群眾。

至於可以放的檔案類型在google說明上沒有很清楚…我們在瀏覽裡面可以找到上傳格式的限制…目前可以用的是gif、jpg、jpeg、png、htm、html這些…不過後面我們在放圖片的時候是不用blogger這個工具放圖，因為橫幅在製作好後的調整都得到html裡去修css，偏偏用這個工具貼上去的圖，dnowba在html編輯器裡遍尋不找，索性就直搗黃龍進html放圖了，前提是你要有圖床，若是你要用上傳圖片到blogger空間裡就只能乖乖用這個功能。

&設計的思維：

設計面上我們可以有二種思維搭配不同模式來製作。

以下分別說明…

①簡單可省頻寬的方式，當然就是用一張小圖無限延伸的方式
．在PI裡開一張2×150px的圖，用百寶箱裡的填充工具來作就可以

．作好的圖存成jpg，看是要上傳還是放到圖床裡，然後我們進html編輯器裡修改些東西
   在html裡找到h1，其中應該會有三個字項，行1-6是標題、行10-14是標題下的敘述文字。我修改了

把標題、敘述字給置中：預設是靠左…我填加了如行4、12的語法
在標題、敘述字後加背景：預設是沒有，我填加了行5、13，這裡注意後面加了個repeat-x意思就提x軸無限延伸

.Header h1 {
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  text-align: center;
  background: url("圖床位置") repeat-x;
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: 130%;
  text-align: center;
  background: url("圖床位置") repeat-x;

}

．成果如下…陽春，

如果要妙用的話就設計圖的寬度加寬，放一些不規則圖型，如下，dnowba是在photoimpact拉一張150×90的圖來做，無限延伸後可以接在一起(雖然還是看到接縫)

②給有點設計概念適用，photoimpact製作，dnowba也不是學設計的，所以每次都是拉拉別人的圖仿製一下，像下面就是用用PI上的幾何圖然後設邊緣透明色。


．製作完後的圖還是到html裡修改css，因為是不規則的圖型，所以在背景和文字分離的狀況下，我們要適當的把文字放到圖的中間位置，以下是程式碼。行4是背景圖位置(不設背景顏色，圖片不重複)，行5是整個h1這塊的高度，比較不同的時因為圖文分離的原因，所以我們最後要協調一下圖和文，理想是垂直置中，但在css語法是沒有像html的valign，這塊不是div而是單行也不可以用vertical-align，在有設高度的情形下用padding、margin也不適合，只好用line-height…也不知道這觀念對不對…如果有css高手路過也請指導一下。

.Header h1 {  
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  text-align: center;  background: url("圖的位置") no-repeat;
  height:263px;
  line-height:263px;
}

最後的成果如下…勉強過得去，圖和字不能配合是敗筆…圖文分離的原因，是因為這標頭字是帶連結的。