テーブル構成ではないlightframeで、左右のカラム幅を固定、記事カラム幅はブラウザサイズにあわせた可変にするカスタマイズを紹介します。
HTMLを編集します。
初期状態のlightframeは次のような構成になっています。
~
<div id="center-left">
<div id="center">
~
</div><!--/center-->
<div id="left">
~
</div><!--/left-->
<br class="c-both">
</div><!--/left_center-->
<div id="right">
~
</div><!--/right-->
~
これを次のように並べ替えます。~の部分も含めて並べ替えてください。
~
<div id="right">
~
</div><!--/right-->
<div id="center-left">
<div id="left">
~
</div><!--/left-->
<div id="center">
~
</div><!--/center-->
<br class="c-both">
</div><!--/left_center-->
~
左メニュー、右記事の2カラムにしたい場合は
<div id="right">
~
</div><!--/right-->を、
右メニュー、左記事の2カラムにしたい場合は
<div id="left">
~
</div><!--/left-->をそれぞれ削除してください。
次にスタイルシートを編集します。
/******** ▼ サイトの幅 ▼ */
#outline {
width:1000px;
margin:0 10px;
}
#center {
width:526px; /* 削除 */
float:right; /* 削除 */
margin-left:230px; /* leftの幅+間隔 */
}
#left {
width:217px;
float:left;
}
#right {
width:217px;
float:right;
}
#center-left {
width:763px; /* 削除 */
float:left; /* 削除 */
margin-right:230px; /* rightの幅+間隔 */
}
/******** ▲ サイトの幅 ▲ */
灰色の部分を削除、茶色部分を追加してください。ただし
左メニュー、右記事の2カラムにしたい場合は
margin-right:230px; /* rightの幅+間隔 */を、
右メニュー、左記事の2カラムにしたい場合は
margin-left:230px; /* leftの幅+間隔 */をそれぞれ削除してください。
これで左右のメニューカラムは固定、記事部分の中央カラムはブラウザに合わせた可変幅になります。
少々難しいカスタマイズなので「複製」でコピーをバックアップしてからカスタマイズしてください。