CSS修正によるカラム幅の変更

デフォルトより、ほんのちょっと大きなスクリーンショットを載せたかったので、CSSを変更しました。

ブログの紹介文の横幅は、./mt/mt-static/themes/hoge/screen.css に定義されています。

#header-content {
/*    width: 770px;*/
    width: 900px;
    min-height: 74px;
    margin: 20px 0 116px 20px;
}

こんな感じで、130ピクセル分伸ばしました。

次に、インデックステンプレート→ベーステーマ（base_theme.css） を修正します。

#container-inner {
/*    width: 940px;*/
    width: 990px;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
}

このような感じで、画面の横幅を50ピクセル増やしました。XGAだと、このあたりが限界でしょう。

次に、カラムの幅変更です。

同じスタイルシートの　Thin-Wide-Thin　部分を変更します。

/* Thin-Wide-Thin */
.layout-twt #alpha {
    left: 190px;
/*    width: 560px;*/
    width: 610px;
}
.layout-twt #beta {
/*    left: -560px;*/
    left: -610px;
    width: 190px;
}
.layout-twt #gamma {
    width: 190px;
}

この状態で、テキストやウィジェットは適切に配置されるのですが、カラムを区切っている縦線がずれてしまいます。ずれると言うより、幅をいじる前の状態。

CSSかテーブルで実現しているんだろうという思い込みがあったので、あちこちぐぐってかなり調べました。が、わかってみると簡単なことでした。

私の場合は　Thin-Wide-Thin　なレイアウトなので、./mt/mt-static/themes/hoge/content-twt.gif を、適当な画像エディタで編集します。横940ピクセル、縦5ピクセルな画像を、横990ピクセルに伸ばし、縦線の位置を変更しました。

これで、幅530ピクセル程度の図まで表示できるようになりました。