最近幫一些攝影朋友把 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 文章主體寬度”