http://blog.hatena.ne.jp/doyaling/
このブログなのですが、本文の表示領域を広くしたいと思っています。
CSSの中に、
/* メニュー部分と本文部分の幅を調節 */
#main {
width: 680px; /* ← 620px */
}
#box2 {
width: 260px; /* ← 320px */
}
という部分がありますが、これは本文部分はデフォルトで620pxだったのを680にし、サイドバー部分は320だったのを260にしているという意味です。
単純にmainのところのwithを大きくすると、サイドバーが押し出されるような形になって、本文の下(つまりページのものすごく下の方)に来てしまいます。本文とサイドバーの幅の合計を制限するような何かが入っているのだと思いますが、それをどうやれば変えられるのかがわかりません・・・。
どなたかアドバイスお願いします。
CSS のセレクタで、#main は、id="main" という要素(タグ)を指すのですが、id="main" や id="box2" を囲むように、id="content" という DIV タグがありまして、これが width: 960px に指定されています。
http://blog.hatena.ne.jp/-/blog_style/12921228815722328540/47f170bdc7d484bb9ab156d44534701c7a9842c6
これが、テーマのスタイルを決めている外部 CSS の URL ですが、この 526行目に、その #content の幅の指定があります。
#content { width: 960px; /* これ! */ margin-left: auto; margin-right: auto; display: block; *zoom: 1; }
#content の幅が決まっているので、#main の幅だけを大きくしていくと、#box2 が横に入りきらなくなって、下の方に押し出されます。
他にもヘッダの部分とか幅を決めているところが何か所かあるので、#content の幅だけ広げれば良いというわけにはいかないと思いますが、その辺りを調べて広げていくような感じになります。
ありがとうございます!!
2015/02/04 21:06:00うまくいきました。