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

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

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

4a76b8e321014 (1)  

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

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

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

3-3  

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

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

1  

 

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

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

就打開整個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,例如甚麼是CSSHTML與CSS基本概念

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

最後改完後畫面

3-4  

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

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

以上

祝您玩得開心~

 

 

二楞子 發表在 痞客邦 PIXNET 留言(0) 人氣()