誠堯行銷工作室- 公關、網路行銷、活動行銷、網路開店教學

這主要是自己筆記用，以後如果要改時會比較快進入狀況。

因為是做官網，需要帶有品牌獨特性，所以不想要用公版，但重點是先選一個構圖架構符合自己要的(比如說版頭、兩欄還是三欄)

一路爬文中，在痞客邦找到這個版型: 

(以上圖片引自痞客邦模板基本樣式，連結請按我)

看上這架構是因為上面有個大版頭，可以充分表現品牌概念，乾淨畫面可以方便修改。

在這介紹文裡面，就有CSS，

把它整個COPY起來，回到部落格後台-樣式管理-自訂樣式-CSS原始碼編輯，把原本的整個選取起來，貼上去

剛貼完，把版頭放上照片後，畫面就變成這樣

看起來好像已經完成八成，其實...地獄才開始，

因為接下來的每個字體大小、底色、標題，全部都要配品牌的色系，

就打開整個CSS指令，然後開始去"猜"這指令是哪個的。

先從自己看得懂的開始

其實CSS主要也就是英文，我用我看得懂得FONT(字體)、還有COLOR(顏色)、背景(background)去一個個改，其他看不懂得就先不動

我的猜法，像字體就是把某個CSS自己，上面寫"FONT SIZE 15PX"，表示字級是15，那我就改成40，然後用預覽去看畫面的哪一個字變大了，

以此類推，顏色就換完全不同的顏色、每改一個就預覽一次，OK就馬上儲存。

至於顏色方面，顏色的HTML，如果要細一點的顏色，還是要寫程式碼，於是上網搜尋顏色HTML表，找到這網頁(請按我)

上面選出自己要的顏色，把HTML碼COPY起來，比如說原本是#333 ，我選後可能改#1F1F1F，至於三碼跟六碼，只要瀏覽器讀得懂即可

另外，同時開一個筆記本的畫面，把原本的CSS原始碼先貼上，

然後把修改的部分，找出他的標題，看是標題、還是內文，自己在那個CSS旁邊做筆記

例如: 

#banner {
height: 350px;
border-top: 5px solid #fff; 大圖上面細線顏色
border-bottom: 5px solid #fff; 大圖下面細線顏色
}

這些中文就是我自己寫的筆記，以防以後如果要改，可以馬上找到。

另外剛剛在找之前的參考資料時，看到痞客邦有介紹相關CSS，例如甚麼是CSS，HTML與CSS基本概念

但，說真的這要自己改過之後，大概才看得懂，

最後改完後畫面

而且，痞客邦原本的樣式設計裡，標題裡的字是白色的，在淺綠色的背景下會看不到，但這些都被我給搞定了(小驕傲~~~)

玩到最後，其實不只是字體、顏色，連間距、位置全都改了。

以上

祝您玩得開心~