ライブドアブログのサイドバー幅の変更について

質問

色々調べてわからなかったので質問します。
ライブドアブログでサイドバーの幅を変更したいのですがどこを
いじればいいのか分かりません
具体的にはサイドバーの幅を大きくし画面に背景などいらない感じに
したいのです。

使用デザインはブログメディア（2ch,コバルトブルー,3カラム）を使用しています。

人さまのサイトなのですがこのブログ↓のサイドバーの幅にしたいです
http://blog.livedoor.jp/togurotogenkai/
この人はメイン(真ん中)の大きさも変更してるみたい…？

下の部分の数値のどこをどういじればいいのでしょうか？

/* =============================================== */
/** 02. Layout - レイアウト（全体の枠組み） */
/* ----------------------------------------------- */

body {
margin: 0;
padding: 0;
background-color: #fff;
}

#container {
width: 996px;
margin: 0 auto;
}

* html #container {
position: relative;
top: -1px;
}
*:first-child+html #container {
position: relative;
top: -1px;
}

#content {
background-color: #fff;
padding-top: 6px;
padding-bottom: 6px;
}

#main,
#sub,
#extra {
overflow: hidden;
}

/* 3col */
.message-board-outer {
margin: 0 215px;
background: url.message-board-outer-2 {
padding: 10px;
background: url
}
#main {
float: left;
display: inline;
width: 100%;
}
#main .column-inner {
margin: 0 215px;
padding-top: 2px;
}
#sub {
float: left;
display: inline;
width: 206px;
margin-left: -100%;
background: url

#extra .column-inner,
#sub .column-inner {
background: url}
#extra .column-inner-2,
#sub .column-inner-2 {
padding: 7px 6px;
background: url
#extra {
float: left;
display: inline;
width: 206px;
margin-left: -206px;
background: url

.calendarheadbody,
.sidetitlebody {
margin-bottom: 10px;
background: url
;
color: #fff;
}
.calendarheadbody .calendarhead,
.sidetitle {
padding: 5px 0 7px 15px;
text-align: left;
background: url

font-weight: bold;
}
.side {
margin: 0 0 30px 10px;
text-align: left;
}

/* ----------------------------------------------- */
/** clearfix */

#container:after,
#content:after,
ul.article-navigator:after,
ul.archives-navigator:after,
.article-body:after,
.article-body .article-body-more:after,
#trackback-form ul:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

/** hasLayout */
.blog-title-outer,
.archives-title,
.article-body,
.article-footer,
.article-title,
.pager,
ul,
.index-navigator-outer {
height: 1%;
}

/** peek-a-boo bug */
#trackback-form,
#trackbacks-list,
#comments-list,
#comment-form {
height: 1%;

作るのは乙女ゲーとかワンちゃんのブログです
調べてもかなり難しかったのでどうかよろしくお願いいたします(>_<)！

回答No.1

kobliha

例示ブログはサイドバーは既定のものであり、変更を加えていない。
例示ブログのレイアウトに関する部分は
div#container { /* ブログ全体は無指定 */
}
div#content { /* 三コラムの部分 */
width: 1060px;
margin: 0 auto;
padding-top: 6px;
padding-bottom: 6px;
}
で全体幅を拡げただけのこと。

リキッドスタイル（画面幅に応じて表示）という方法はあるが、閲覧者が小さめの画面の時、記事中の画像サイズにより、下にヨコ・スクロールバーが出現する可能性があること。（重要）
#container や #content の幅を 100% にすることは短絡すぎ。それらには右端のスクロールバーの幅は除外されるから。97 ～ 98% とするのがよいだろう。

サイドバーの幅についてはこんな例から類推するとよいだろう。
デフォルトでは #sub と #extra 　の幅 206px と #main .column-inner の余白 215px との「差」 9px が各コラムの間隔となっている。
ここでは左サイドバーを 180px 幅に縮め、右サイドバーは 300px 幅の画像が収まるように 310px 幅に拡げるとする。
しかし 310px の外側に枠線が付くので、 #main .column-inner の右余白は 310 + 6 + 9 = 325 でなければならない。
#main .column-inner {
margin: 0 325px 0 189px;
padding-top: 2px;
}

#extra {
float: left;
display: inline;
width: 310px;
margin-left: -316px; /* 枠線（シャドウ）幅を加算 */
box-shadow: rgba(60, 36, 12, 0.5) 0px 0px 3px; /* シャドウ付き枠線 */
border-radius: 15px;
}
#sub {
float: left;
display: inline;
width: 180px;
margin-left: -100%;
box-shadow: rgba(60, 36, 12, 0.5) 0px 0px 3px; /* シャドウ付き枠線 */
border-radius: 15px;
}

メッセージボードを使っているなら
.message-board-outer {
margin: 0 325px 0 189px;
background: #ffe9a8;
border-top: 2px solid #e4c679;
border-left: 2px solid #e4c679;
}

デフォルトではサイドバーの枠線は「画像」を用いているので、その辺の対処は必要。
自分でサイドバー・サイズに応じたものに作り変える手はあるが。
「角丸」は画像を使うしか手段がなかった時代のテンプレートだから。IE が遅れていたから。

お礼

教えてくれてありがとうございます！(>_<)
もっとCSSを勉強します。