livedoor ナレッジ

ブログの幅を固定し、中央（センター）に表示するには？

２カラムのBlackframeを使用しています。
デフォルトでは幅が可変であったため、CSSを修正し何とか固定にしました。
そして今度は中央に表示されるよう以下のように修正しました。

※トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブそれぞれを修正

修正前
　<div id="container">

修正後
　<center>
　<div id="container">

しかし、再構築後に確認してみると背景のみ中央表示となり、リンク部と本文は左寄せのままとなっていました。他にも修正が必要なのか、修正箇所自体が間違っているのか、どなたか教えてください。お願いします。

※content、links部も載せておきます（デフォルト値）

　#content{
　}

　#links{
　　position:absolute;
　　top:110px;
　　left:20px;
　　width:190px;
　　padding:25px 0px 30px;
　}

<center>タグは使わず全て削除して、CSSの#containerに

margin-reft: auto;
margin-right: auto;

を加えてください。

「#container」には#contentと#linksの横幅を合計したサイズを「width: ○px;」で指定してください。

#linksの

position:absolute;
top:110px;
left:20px;

はというID名のレイヤーを上から110px、左から20pxの位置に表示するという指定です。
したがって、この指定を全て削除して、代わりに「float: left;」を追加してください。

同様に.blogの

position:absolute;
top:97px;
left:230px;
right:0px;
margin:0 auto 30px;

を削除して、#contentに「float:right;」「margin:0 auto;」を追加してください。

これで幅を固定して全体を中央に表示できると思います。

ところでどこの背景をどう修正したのでしょうか。
最短のCSSカスタマイズですと、bodyの「width:100%;」「height:100%;」と背景指定を削除し、
「#container」の「width:100%;」に、指定したい全体の横幅をpx指定し、元はbodyに指定してあった「background:#fff url('sidebg.gifのURL') repeat-y 0 0;」を追加して、
#content」に「#containerの横幅-#linksの横幅（190px）-余白の横幅（20px）」のサイズを「「width:○px;」で指定します。

判らなくなったら、元のデザインに戻して再構築してから、改めてやり直すと楽だと思います。