搜尋此網誌

工商服務

2009年2月3日 星期二

如何加大網誌文章版面的顯示寬度?



Google的Blogger部落格系統有不少精美範本可供套用,但是其中有些的版面顯然有些過窄(大概忘記現在大多數的螢幕都是寬版的了吧,小筆電除外),導致文章過長必須捲動網頁數次才能夠看完,再者圖片也經常會因此貼得太小張而看不清楚細節。

以我目前選定的Douglas Bowman所設計的Rounders 3為例,它的網誌文章版面的顯示寬度只有485像素,扣除必須留白的邊邊部分,實際上張貼的圖片最大寬度也大約才390像素寬而已,害我經常被朋友唸說照片太小張讓他們看不清楚,XD。

其實嚴格說來,要修改這個寬度設定一點都不難,我也搞不懂為何我自己要拖了一年半載如今才想到要動手來弄這個部分。

總之,許多人選擇Blogger部落格系統都是因為喜歡它的高度可自訂化,包括HTML、JavaScript和CSS的部分,基本上都是可以想怎麼改就自己DIY動手改的。甚至很多人乾脆就買個網址名稱(xxx.com或xxx.idv.tw之類的),直接把部落格架到這個系統上面來了。

進入今天的主題:如何加大網誌文章版面的顯示寬度?

首先來到「版面配置」的「修改HTML」頁面,以便針對我們想要修改的網誌文章版面寬度進行微調,至於240像素寬的邊欄(sidebar)則還堪用,所以先不更動。後續的修改步驟如下:
  1. 在「/* Page Structure */」區段內找到關於整體版面外圍邊角的「#outer-wrapper」定義,其width寬度設定原本為740px,將之修改為983px,調升幅度為243px,原因請見稍後的第2點。這項設定影響的是部落格標頭(header)和底部(footer)的那兩列,因為總不可能網誌文章的版面加寬了,上下兩列卻沒跟著延伸的道理吧,除非那種不對稱是你想要的版面配置效果。
  2. 在「/* Page Structure */」區段內找到關於網誌文章版面下方外圍邊角的「#main-wrap1」定義,其width寬度設定原本為485px,將之修改為728px(配合之後要在網誌文章之間放置728x90大小的Google AdSense頁首廣告看板),因此調升幅度為243px是基於這個考量。
  3. 在「/* Page Structure */」區段內找到「#main-wrap1」定義,其background底圖設定的url網址http://www.blogger.com/rounders3/corners_main_bot.gif需要換掉,因為那張圖片是原本在寬度485像素時用來顯示下方弧角的,現在版面加大了,弧角的位置勢必對不上邊,所以我用「小畫家」動了手腳修圖,放於http://jarsing.com/gallery/rounders3/corners_main_bot.gif。
  4. 在「/* Page Structure */」區段內找到關於網誌文章版面上方外圍邊角的「#main-wrap2」定義,其background底圖設定的url網址http://www.blogger.com/rounders3/corners_main_top.gif需要換掉,改為http://jarsing.com/gallery/rounders3/corners_main_top.gif,原因同第3點。
  5. 在「/* Page Structure */」區段內找到關於網誌文章版面主體的「#main」定義,其background底圖設定的url網址http://www.blogger.com/rounders3/rails_main.gif需要換掉,因為那張圖是原本在寬度485像素時用來顯示左右兩側邊框的,所以我再次用「小畫家」動了手腳修圖,放於http://jarsing.com/gallery/rounders3/rails_main.gif。
  6. 在「/* Page Structure */」區段內找到關於網誌文章版面上內嵌widget(Blogger中文版稱為「小裝置」,XD)的「.main .widget」定義,其width寬度設定原本為468px,將之調升243px修改為711px。
  7. 在「/* Page Structure */」區段內找到關於網誌文章版面主體的「.main .Blog」定義,其width寬度設定原本為484px,將之調升243px修改為727px。
  8. 在「/* Blog Header */」區段內找到關於網誌標頭上方外圍邊角的「#header-wrapper」定義,其background底圖設定的url網址http://www.blogger.com/rounders3/corners_cap_top.gif需要換掉(因為版面尺寸已經變了),改為http://jarsing.com/gallery/rounders3/corners_cap_top.gif。
  9. 在「/* Blog Header */」區段內找到關於網誌標頭下方外圍邊角的「#header」定義,其background底圖設定的url網址http://www.blogger.com/rounders3/corners_cap_bot.gif需要換掉(因為版面尺寸已經變了),改為http://jarsing.com/gallery/rounders3/corners_cap_bot.gif。
  10. 在「/* Footer */」區段內找到關於網誌標頭上方外圍邊角的「#footer-wrap2」定義,其background底圖設定的url網址http://www.blogger.com/rounders3/corners_cap_top.gif需要換掉(因為版面尺寸已經變了),改為http://jarsing.com/gallery/rounders3/corners_cap_top.gif。
  11. 在「/* Footer */」區段內找到關於網誌標頭下方外圍邊角的「#footer」定義,其background底圖設定的url網址http://www.blogger.com/rounders3/corners_cap_bot.gif需要換掉(因為版面尺寸已經變了),改為http://jarsing.com/gallery/rounders3/corners_cap_bot.gif。
總計需要修改5張邊框的底圖(我都放到http://jarsing.com/gallery/rounders3上面去了),以供7處url網址替換之用(有2張圖是標頭和底部所共用的),以及調升4處CSS版型的寬度設定。

呼,大功告成,現在照片要擺640像素寬都不是問題了,看來要把之前的網誌文章通通改成大圖得再花上一番功夫了,哈。

另外一個缺點則是:現在看起來版面變得好空曠,顯得文章都變短了,字體都變小了似的,Orz。

4 則留言: