極光森林秘境書匣

但凡有心想修改痞克邦部落格的同仁們，一定找過架構圖表了吧!

 如果還沒有，請看上一篇文章[修改]痞客邦三欄式部落格樣式調整 

幸運的是，在這一大堆令人眼暈的div裡，調整三欄式內文寬度的Css只需要修改很小一部份就好了。

1.首先是#container3

/*所有內容區塊3*/
#container3 {
overflow:hidden;
position:relative;
width:1035px; 增加版面寬度
background:#fff;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
margin:15px auto 30px;
padding:25px 0 10px;
}

在這一串Css中，只要改width寬度的數值就好了，這樣版面就會變廣了，除了版首的圖片會出一點問題外，其餘的都不必修改。

2.再來就進入主題調整內文寬度了

/*文章列表回應區塊*/
#article-area {
position:relative;
z-index:500;
width:550px; 調整成想要的寬度
margin:0 auto;
}

這個時候，文章的版面可能長到將側欄重疊了。

3.於是，接下來就要調整側欄。

這時候要說到重點了。由於#content和#links是併行的，所以兩者的寬度width不能超過#container3，否則側欄就會被擠下去。

曾經綠傘天真的以為只要增加#container3的寬度width，再調整#content和#links的寬度width就可以了，殊不知，這其實是個誤區。

因為#content的寬度width最主要影響的是#links的寬度width而非內文的位置，因此想要側欄好好的排好，如果只調整#content和#links的width比例，那無論如何都會回到原點。

#content的寬度width比較不重要，可以調小一點，主要是配合#links所需要的寬度width，只要不超過100%就可以了。

#content的Css和.refer,.history放在一起，可以摘出來獨立。

/*主要內容區*/
#content {
float:left;
width:45%; 配合調整側欄的寬度
}

再來不管內文位置的偏差，先配合新版面，讓兩個側欄的位置合理，可以適當修改左移left的數值。

/*側欄功能列*/
#links {
float:left;
width:53%; 影響兩個側欄的相距
position:relative;
left:-820px; 讓右邊的側欄往右移
_height:1%;
overflow:hidden;
_overflow:none;
}

4.最後調整內文的位置，回到#article-area
/*文章列表回應區塊*/
#article-area {
position:relative;
z-index:500;
width:550px; 調整成合適的寬度
margin:0 auto;
left:80px; 適當調整到合適的位置
}

這樣，版面的修改，除了一些圖片的瑕疵外，就大致完成了。

什麼？這樣就完結了嗎？……還沒有喔!

為什麼要調整內文寬度？當然就是要讓文章的寬度變長一些，可是點進文章一看!咦!明明內文的寬度調過了，可文章還是遵循著以前的長度!

5.於是，修改.article-content內文裡的寬度width

.article-content {
width:550px; 調成和#article-area一樣
overflow:hidden;
line-height:200%;
padding:0 0 20px;
}

 這樣，才算是大功告成!

只要細心調整數次就可以了，是不是很簡單呢？

至於其他的細節微調，這裡就不再敘述了，各位加油。