如何調整blogger的欄寬及其他版面配置間距

本文是針對「推薦一個很棒的blogger三欄式範本(template)」，調整版面的工作記錄，也許不能完全適用其他範本，不過應該大同小異吧！

版面總寬度記錄在#blog-wrapper裡

將padding的值減少可增加內文的可用欄寬。如果要調整左右側欄及中間欄，欄寬總和不得超過這個值。
#blog-wrapper {
margin: 0 auto; /* auto - to make the template lay in the screen center */
padding: 3px;
margin-top: 0px;
margin-bottom: 15px;
text-align: center;
position: relative;
width: 982px;
background: $blogframeColor;
border: 3px solid $blogBorderColor;
}

中間欄的欄寬 在#main-wrapper及#main中設定（兩者要同步調整）

#main-wrapper {
float: left;
width: 562px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
width: 557px;
margin: 3px 3px 3px 0px;
padding: 20px 0 0 0;
color: $textColor;
font: $textFont;
background: $postbgColor;
border: 1px solid $postBorderColor;
}

中間欄的邊界及間隔，在#main .widget中設定

如果想讓可用區域變大，可減少padding的值，如下例左右兩側的間距減少為5px(原來好像是25px)。
#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 5px 20px 5px; (上右下左)
}

左側欄寬，調整#side-wrapper1及#sidebar1 （兩者要同步調整）

(如果是兩欄式的範本，好像是調整#side-wrapper及#sidebar )

#side-wrapper1 {
width: 199px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar1 {
width: 150px;
margin: 7px 0px 7px 7px;(邊界亦可調整)
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
border-bottom: 0;
line-height: 1.6em;
}

右側欄寬，調整#side-wrapper2及#sidebar2（兩者要同步調整）

#side-wrapper2 {
width: 219px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar2 {
width: 230px;
margin: 7px 7px 7px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
border-bottom: 0;
line-height: 1.6em;
}

左右側欄widget(小工具)的邊界及間隔在#sidebar1 .widget, #sidebar2 .widget設定

#sidebar1 .widget, #sidebar2 .widget {
margin: 0px 0px 0px 0px;
padding: 15px 5px 20px 5px;
border-bottom: 1px solid $postBorderColor;
}

附帶一提調整blockquote，可調整縮排的距離。

blockquote {
margin: 10px 20px 10px 20px;
padding: 10px 20px 10px 20px;
font: $quoteFont;
line-height: 1.6em;
color: $blockQuoteColor;
background: $blockquotebgColor;
border: 2px solid $blockquoteBorderColor;
}