MovableType3.2のデフォルトテンプレートの横幅をいじる

MT3.2の横幅がどういう要素で決まっているのか調べてみました。
文章で説明すると限りなくややこしいので、図にまとめてみました。





デフォルト・テンプレートでブログの横幅に関連する要素と、その幅(px)。






デフォルト・テンプレートでサイドバーの横幅に関連する要素と、その幅(px)。





お分かりいただけましたでしょうか?(^^;

自分ではなんとなくわかったつもりになったので、思いっきり横幅を広げてみました。

body(min-width)、#container 720px900px
#alpha 480px600px
#beta 200px260px


#beta-inner padding 10px5px
.module-content padding 10px5px
.module-list margin 15px(右側の方)5px


一応、上記のような感じに変更するよう計画を立て、
変更すべきであろうスタイルシートの該当部分を、下記のように変更していってみました。




----------------------
#container
{
position: relative;
margin: 0 auto; /* center on everything else */
width: 720px;900px;
text-align: left;
}


----------------------
body{
min-width: 720px;900px;
color: #333;
background: #36414d;
}


----------------------
#container
{
width: 720px;900px;
margin-bottom: 20px;
background: #fff;
}


----------------------
#banner
{
width: 710px;890px; /* necessary for ie win */
background: #a3b8cc;
}


----------------------
#alpha { margin: 15px 15px 0 15px; width: 480px;} { margin: 15px 15px 0 15px; width: 600px;}
#beta { width: 200px; background: #e6ecf2; } { width: 260px; background: #e6ecf2; }


----------------------
#beta-inner,
#gamma-inner,
#delta-inner
{
padding: 10px 10px 0 10px;10px 5px 0 5px;
border-width: 2px 2px 2px 0;
border-style: solid;
border-color: #fff;
}


----------------------
.module-content
{
margin: 0 0 10px 0;
border-top: 1px solid #cfd4d9;
padding: 10px 10px 0 10px; 10px 5px 0 5px;
font-size: 10px;
line-height: 1.2;
}


----------------------
.module-list
{
margin: 0 15px 10px 15px; 0 5px 10px 15px;
list-style: disc;
}


----------------------
.layout-one-column body { min-width: 520px; 640px; }
.layout-one-column #container { width: 520px; 640px; }
.layout-one-column #banner { width: 510px; 630px; } /* necessary for ie win */


----------------------
.layout-two-column-left #alpha
{
margin: 0;
width: 200px; 260px;
background: #e6ecf2;
}


----------------------
.layout-two-column-left #beta
{
margin: 15px 15px 0 15px;
width: 480px; 600px;
background: none;
}





なぜか、右サイドバーでも .layout-two-column-leftの中身をいじるだけで大丈夫でした。





ついでにコメント欄が狭かったので、広げました。

#comment-author, #comment-email, #comment-url, #comment-text
{
width: 240px;450px;
}






検索窓も狭かったので、広げてみました。

.module-search #search { width: 100px;180px; }



@ 2006年02月11日