今天阿暶教我要把部落格弄寬，看起來比較賞心悅目，但我發現弄寬了之後，我的封面照就會變得扁扁長長的，所以就研究了一下怎麼用css調整，還真的給我研究出來了呢XD 來分享一下~~~
左圖的封面圖片大小是950*300px，用自訂樣式很方便：『管理後台→自訂樣式→自訂樣式簡易版』插入主視覺圖片就行了，可以自己決定主視覺跟背景圖片，而今天主要要分享的是更改主視覺的大小，我比較喜歡像右圖這樣，頁面打開就是一張大大的圖，這樣的封面圖片是1100*400px，但這就要從css原始碼編輯去改了。
【更改網頁背景圖片】
首先呢，先分享一下改背景圖時容易遇到的問題，就是圖片的選擇必須要上下對稱、左右對稱，因為這背景是一張一張拼起來的，沒有辦法用一大張圖涵蓋整個頁面。
例如我的背景想要呈現在海裡的感覺，用左圖那種漸層的海就會不連貫，必須要用右邊那種，上下、左右都要對稱的圖！
【頁面拓寬】
從這裡開始就要進入css的世界了~~但其實一切都很簡單的！想要讓整體看起來比較清楚，首先要將整個部落格的頁面拓寬，再改主視覺的照片，首先拓寬有兩個步驟:
一、#article content /*文章內文*/：在width(寬)把650px改成800px
二、#container3 /*所有內容區塊3*/：在width(寬)把950px改成1100px
但是改完就會發現，雖然頁面變寬了，但圖片沒有，所以再來要先調主視覺頁面的高度，再將圖片放大安插進去。
【更改主視覺頁面高度】
如果沒有改主視覺頁面的高度，將改好的寬1100的圖片放上去只會是一張放大的圖。
另外，如果要改主視覺高度的話，有一項也要跟著改，就是"頁面導覽"，總共有三個步驟：
一、#header /*橫幅*/：在height(高)把300px改成400px (可以自行調整想要的高度)
二、#banner /*橫幅主要內容*/：在height(高)把300px改成400px (這個高度要跟#header改的一樣)
三、#navigation /*其他服務頁面導覽*/：在top(頂端距離)把315px改成415px (#header, #banner都把高多加了100，所以這裡也要加100)
改好之後，主視覺的頁面就會變得比較高了！
【將改好的主視覺圖用css安插進去】
一、首先，先將改好的寬約1100px的圖片上傳至相簿，再按右鍵『複製語法』
注意！複製語法中會有兩串網址，要選第二串，從pic.pimg開始，到.jpg結束
二、到『部落格管理後台→自訂樣式→css原始碼編輯』中找到#banner, background 貼上網址
注意！最後要將 _n 刪除
最後按儲存就完成囉！！
附上最一開始的比較圖！！
BTW這個網址教我在css原始碼裡面一些英文對應的中文意思，懂了就可以自己研究css怎麼改囉！
http://lovejie2005.pixnet.net/blog/post/9095842-%E7%97%9E%E5%AE%A2css%E6%9E%B6%E6%A7%8B%E8%A1%A8
留言列表
