MovableType 4.2 2Column HTML5の解説（幅の調整）

ユーザーの方から「MovableType 4.2 無料テンプレート 2Column HTML5」でコンテナの幅を調整したいというご要望がありましたので、予定を変更してCSSでの調整を解説します。

コンテナやカラムの幅の調整方法

Layout部分36行め以降のheader#branding・div#content・footer#copyで全体の幅を指定し、div#mainとdiv#subでカラムの幅を調節します。＊ノーマルな状態ではメインコンテンツには468pxのバナーがぴったりと入るように設計されています。

740pxの幅を960pxに広げ、メインコンテンツに640pxが入るように調整する例

640px+20px+20px（div#main .innerの左右padding）=680px（div#main）
960px（全体の幅）-680px（上記数値）-2px（IE用調整）=278px（div#sub）

サイドバーが48px増えてるが、このままではアイテムのサムネイルが横に3つ入らずおかしな余白ができる。3つ並べるには240px必要となるのでdiv#sub .innerのpadding-leftを2px減らす。

header#branding {
    color: #333333;
    background-color: #ffffff;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    overflow: hidden;
}
div#content {
    font-size: 100%;
    color: #333333;
    background-color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}
div#main {
    font-size: 80%;
    color: #333333;
    background-color: #ffffff;
    text-align: left;
    padding-bottom: 20px;
    width: 680px;
    float: left;
}
div#sub {
    font-size: 100%;
    color: #333333;
    background-color: #ffffff;
    text-align: left;
    margin-bottom: 20px;
    width: 278px;
    float: right;
}
footer#copy {
    font-size: 100%;
    color: #333333;
    background-color: #ffffff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    clear: both;
}
/* サイドバー余白調整 */
div#sub .inner {
    line-height:1.5;
    padding-left: 18px;
    padding-right: 20px;
}
Posted

Tags