Think of Joe

看到熱血的唐朝寫出這麼經典的一篇樂多入門文章，拚著寒流來襲、下週要與老闆meeting，無論如何也要在這個Friday Night來Blog一下，這陣子實在手邊太多事，有好多有趣的網上雜七雜八訊息想跟大家分享，一定一定!!ok~慢慢來，就從樂多這邊blog換banner聊起。(註：我真的不是高手，僅就我所知道的與大家分享學習討論，本篇教學重點為最基本簡易之更換banner法，高手及進階使用者可略)

首先，為了使這篇文章有重點且不失焦，就先談改CSS語法的部份，不討論影像處理及banner製作的技巧，唐朝推薦hugocc的留言討論區可以進行類似影像方面的討論。

話說之前因為iron問了我如何換banner，我才一直想要寫篇文章教大家，但後來發現樂多這邊每個樣式版型的banner語法設定都有所不同，談起來會有點複雜，不過我想了想，就將教學定位在最簡便快速清楚的設定，應該不會太難，對許多看到複雜的語法會不敢亂動的朋友，別擔心，就是try下去直接改，大不了再改回來嘛，踏出第一步才會感受到那種樂趣。大家可以先到SoundandFury這裡看看，就是一個最簡單的更換banner例子，點一下，這是原本SimpleGreen的樣式，所有的頁面樣式都不更改，光換了banner就與原本的預設樣式產生了很不一樣的感覺，原諒我偷懶，下面我先原文轉載我是怎麼在iron的留言版說的：

hi~iron
換banner我之前是有想要寫~但是沒有寫!!因為後來發覺樂多這邊每個版型都有不同的css語法，很難一次說清楚!
我看了你的版型語法，你去找一段語法(進「網頁樣式設定」選Custom，再讀取你現在的版型語法來改)(註：iron的原設定版型為Simple_Green)
#banner {
MARGIN: 3px auto 0px auto;
WIDTH: 734px;
HEIGHT: 100px;
background-color: #669966;
TEXT-ALIGN: center;
}

把整段語法用下面取代
#banner {
background-image: url(http://....banner圖檔的網址); HEIGHT: 100px
}

這是我想到最快的方式，圖檔依你原版型請製作寬為734px、高為100px，寬最好維持原SIZE，才不會兩旁多出來!高若是加長，則新的語法HEIGHT:...px也要記得改!

這是以你現在的版型來改，若是你更換別的版型，在Custom讀取樣式後找語法#banner部份再做更動圖片位置語法即可，(建議找原本上面就有banner圖的版型來改最快!!把新的banner圖案大小設和原本一樣即可)

我簡單寫這樣，改完語法記得確定"個人化設定"樣式變更，
試試看~希望對你有幫助!!小小的技巧啦，還希望有高手能指正!

這樣講，大家能懂嗎，我再說清楚一點，#banner{ ......}就是控制banner的語法，iron用的Simple_Green版型原本是用色彩控制碼background-color直接設定banner顏色，更改後的語法background-image就是改成用圖檔來當banner，我下面再舉一個更簡單更快的例子。
以樂多日誌cafe館最近剛換上的新裝彩色鉛筆樣板來看，同樣進入網頁樣式設定的Custom讀取colorpen這個樣式，會找到banner的語法如下：
#banner {
WIDTH: 740px;
HEIGHT: 141px;
background-image: url(http://blog.roodo.com/theme/colorpen/top.gif);
background-position: 1px;
}
直接製作一個寬740px、高141px的banner圖檔上傳，把http://blog.roodo.com/theme/colorpen/top.gif這個圖檔的位換成自己的banner圖檔位置，儲存設定後再確定選取「個人化設定」變更樣式，即大功告成。(圖檔上傳不另教學，可用樂多上傳或Flickr空間皆可，知道url位置就好，請看唐朝)

但是有沒有發現這個彩色鉛筆樣式若換了banner會出什麼問題，沒錯，那就是整體感，樂多有些樣式版型是有整體搭配感的，若是以這樣的版型為基本架構來改banner就會產生整體不協調感，例如像City_light這個樣式，banner在此，點一下，若要只更換banner就必需跟著整個樣式的風格走紫色的感覺，不然就會很突兀，所以一些頁面較單純乾淨的樣式，例如Simple系列、colorful_cup、city_build等都是不錯的換banner基本樣式，至於換banner的方法都一樣。
當然，若是除了banner之外，還想要更進一步去調整個blog的色調、背景、鏈結...等樣式，那就當然完全不受任何限制，不過那樣就必需要更多懂一些css語法，但也已經超出本文範圍，可自行研究，許多書及網站都有相關討論及教學，或是我再想想還有什麼方法可以最簡單地讓樂多這邊的使用者輕鬆學會一些簡單樣式設定，日後再整理。

先聊到這，希望寫得還算清楚易懂，有什麼問題歡迎留言討論，也請各位高手指教，我也還在學習中。
另外推薦工頭在Flickr開的Flickr Blog Banner Group，多看看這些高手們自己設計的banner，也可刺激靈感喔!

最後，還是老話一句，Content is King，其它的樣式啦、花樣啦...會玩就玩一玩，不然樂多這邊也不必讓使用者多廢心於此，一百多種樣式，挑一個套用，然後就是一直Blog就對了啦!...持續不間斷Blog才是王道!...寫就對啦!

PS.有些樣式版型的#banner語法部份只設HEIGH及WIDTH或是border，其它什麼都沒有，那種樣式通常就是直接用背景圖襯底，不另做banner圖，如bandage boy，這種樣式就不建議加上banner把背景圖蓋過去，那看起來會有點奇怪，不過倒是可以直接改背景圖案，若是悟性高的使用者，應該可以在語法中找到地方更改背景圖片，不過本文不討論，改背景另外再聊!

【延伸閱讀】
還有興趣繼續研究banner的朋友，可以到下面參考，比較進階一點。
如何製作彈性招牌?
如何換Banner?

【再補充】
把我在留言版回應網友關於樂多BLOG這邊的版位設定標籤簡單補充過來：
用下面這幾個標籤設定，搭配前面講的#banner{......}標籤，可以對樂多的版型配置有所掌握及變化!
進入Custom讀取目前的樣式後找下列語法修改，

#container{...}標籤裡的WIDTH是設定整個內容的寬(含主欄及邊欄)，這裡的WIDTH通常和#banner{...}標籤是一樣寬，

#content{...}標籤中的WIDTH是設定主欄位寬，FLOAT是設定靠right or left，

#link{...}標籤中的WIDTH是設定邊欄寬，FLOAT是設定邊欄靠right or left，在二欄位版型下通常是和#content裡FLOAT相對，

至於PADDING是設定向內留白，MARGIN是設定向外留白，BACKGROUND是背景底圖，可用顏色碼color設顏色或用url圖案連結。
我自己摸樂多這邊關於欄位的css設定最主要是這幾個，大概是這樣，還請高手指教補充，先掌握這幾個標籤應該就可以把欄位樣式設到自己想要的感覺，試看看囉!!更細部就再自行研究!~又獻醜了~~

【2005/5/9補記】
發現樂多這邊真是高手如雲喔!
一個針對Blog設計、CSS語法介紹很詳細的站：Learning Girl
推薦幾篇好文章閱讀：Blog 學習、CSS 語法〝小〞解析 ( 上 )、CSS 語法〝小〞解析 ( 下 )
還有，新誌這篇文章製作了一個關於引用通告的教學影片檔供下載，大推！

您可能有興趣的文章：

無名小站之超視覺暴力

#生日快樂Flickr與Oui-Blog

Blog參與動機之研究問卷調查

2005上半年台灣地區的blog相關學術研究問卷調查