[ F2blog ] 修改 F2blog 文章主體寬度

最近幫一些攝影朋友把 blog  系統轉換成 F2blog 。你或許會問,怎麼我現在又變成在推 f2blog 了?這個不是這一篇要討論的對象,有機會再來談談吧 🙂 。在 F2blog  上面,正如之前我在「一個攝影人的作品怎樣在 blog 上面呈現」 這一篇所談到的,也遇到相同的問題,就是文章內文欄的寬度不夠大。

對於一個攝影人的 blog 來說,內文欄的寬度不夠大,真的是一件很傷腦筋的一件事,因為無法很明確、有效率的表現出來自己的作品。這個時候,通常只有兩種方法可以處理:

  • 去找一個「更」適合的模版
  • 自己改文章主體寬度,也就是去動 CSS 的腦筋

對於我這一種懶人來說,第一個方式「去找一個「更」適合的模版」絕對是我最愛的處理方式,但是 F2blog 是一個蠻新的 blog 程式,針對 F2Blog 開發出來的專屬模版真的不多;雖然說他的模版可以跟 PJBlog 共用,但是那一段時間剛好 恆春地震 ,造成多條海底電纜中斷,導致東亞區內網際網路、國際電話服務受阻。要連到內地去找這些模版,真的是難上加難,於是就放棄了這個方式。

那要自己改寬文章主體欄的寬度,第一個動腦筋的對象,就是 F2blog 預設的模版。

有這麼多模版可以用,為何要從F2blog 預設的模版著手呢?

因為這個模版是 F2blog 官方釋出的,所以相對的錯誤的情形應該會少很多,所以改起來應該會比較輕鬆愉快一點。至少,不用花很多時間在除錯。

在開始改模版之前,對於 F2blog 所使用的 CSS 你得有一點基本的認識,如果你要改動的話,他要改的檔案,通常是這五個,底下是一些基本的介紹:

  • skin.css
    紀錄模版名稱、設計者、設計日期等等資訊
  • global.css
    模版整體規範,包括 body, img, p, th 等等 
  • layout.css
    最重要的部分,所以整體的規範,大概都在這裡
  • link.css
    針對側邊欄, blog 最上方的導航欄的規範
  • typography.css
    最主要的是月曆等等

那這一次我們想要改寬的是文章主體欄的部分,所以我們要改的就是 layout.css  這個檔案

首先我們來看一下,在  F2blog 預設的模版裡面,文章主體的預設寬度是 480 px,那我們期望的寬度是 700 px,於是增加的寬度是 220 px

接著,我們分別改以下 css 的值就可以了

#container
原來為 780 px 改為 1000 px
#container #header
原來為 745 px 改為 965 px
#container #Tbody
原來為 740 px 改為 960 px
#mainContent
原來為 510 px 改為 730 px
.content-width
原來為 480 px 改為 700 px
#MsgContent
原來為 450 px 改為 670 px

當然囉!改寬了文章主體欄的部分,相對的 banner 的寬度就不太夠囉!所以這個時候,您需要去找一個新的 banner,或是把F2blog 預設的模版的 banner 放大喔!

One thought on “[ F2blog ] 修改 F2blog 文章主體寬度

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *