修改是根據偶目前在用的樣式:側邊攔在左邊,內文在右邊。修改後側邊攔寬度不變,內文寬度增加。
樣式名稱為「來更換自己的圖片吧」,此樣式的內文寬度為 635 像素。於公告版位放置 728x90 像素的 Google AdSense 廣告組,公告版位寬度與內文寬度相等亦為 635 像素。但是廣告寬度為 728 像素,偶們都知道 Google AdSense 廣告組的寬度固定無法改變,為了讓廣告寬度同內文寬度持平,只得增加內文寬度。將內文寬度增加 95 像素至 730 像素,大於廣告寬度 728 像素,這樣廣告就不會被隱藏一部分,可以完整顯示。
如果只是單純地將內文寬度增至 730 像素,整個版面就會跑掉。還需要對整個模板的寬度進行相應調整。
步驟如下:
在管理後台 » 樣式設計精靈 » CSS 原始碼編輯,分別找出 #content 同 #container2
#content{
width: 635px;
float: right ;
overflow: hidden ;
}
#container2{
width: 900px ;
margin: 0 auto ;
position: relative ;
}
#content 對應內文寬度,#container2 對應模板寬度。將內文寬度增加 95 像素,模板寬度也要相應增加 95 像素。
#content{
width: 730px;
float: right ;
overflow: hidden ;
}
#container2{
width: 995px ;
margin: 0 auto ;
position: relative ;
}
至此 CSS 修改全部完成。
部落格文章標題的背景圖片寬度與內文寬度相同,通過修改 CSS 增加內文寬度後,文章標題的背景圖片寬度並未增加,看上去就像是圖片斷掉。所以偶們還需將圖片修改使之與內文寬度相同。
本樣式原本的文章標題背景圖片,635x36 像素。
通過修改 CSS 之後的內文寬度為 730 像素,為此需要將文章標題背景圖片修改至 730 像素,使它同內文寬度一致。修改圖片需要使用繪圖軟體,偶用的是 Fireworks CS3,不維持圖片比例,高度不變,寬度直接拉伸至 730 像素,得到現在使用的文章標題背景圖片,730x36 像素。
留言列表