Ads By Google
記事の幅を変更したいです
記事本文の横スペースの大きさを変更したいのですが、どうすればよいのでしょうか?なお、%指定ではなくてpxで指定できればよいです。
使っているデザインは「デフォルト2008(ねずみ,3カラム)」です。
2009-09-15 22:14の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
回答(1)
1.
2009-09-16 17:56:54

div#main div.column-inner {
margin: 0 230px;
border-bottom: 1px solid #484848;
}
まず↑の230の数値を広げたいだけ増やす。div#sub {
float: left;
margin-left: -100%;
display: inline;
width: 220px;
background: #eaeaea url(http://parts.blog.livedoor.jp/img/usr/default_2008/gray/side_top.gif) no-repeat;/* 背景画像:上 */
padding-top: 15px;
}
次に↑の220の数値をさっき増やした数値と同じだけ増やす。(230px→250pxにしてるなら、ここは220px→240pxにする)
そしてurlからno-repeatまでを消す。
div#sub div.column-inner {
background: #eaeaea url(http://parts.blog.livedoor.jp/img/usr/default_2008/gray/side_bottom.gif) no-repeat bottom;/* 背景画像: 下 */
padding-bottom: 30px;
}
↑はurlからno-repeatまでを消す。div#extra {
float: left;
margin-left: -220px;
display: inline;
width: 220px;
background: #eaeaea url(http://parts.blog.livedoor.jp/img/usr/default_2008/gray/side_top.gif) no-repeat top;/* 背景画像: 下 */
padding-top: 15px;
}
↑は-220と220の数値を増やす。(例えば最初20px増やしたなら-240と240にする)
そしてurlからno-repeatまでを消す。
div#sub div.column-inner {
background: #eaeaea url(http://parts.blog.livedoor.jp/img/usr/default_2008/gray/side_bottom.gif) no-repeat bottom;/* 背景画像: 下 */
padding-bottom: 30px;
}
↑もurlからno-repeatまでを消す。なぜurlからno-repeatまでを消すかというと
サイドバーの枠の丸みは画像で出来ているので
サイドバーの幅を広げたり縮めたりすると
丸みの部分の画像だけがそのまま残ってしまい
デザインがおかしな事になるので
消す必要があります。
なので、サイドバーの幅を変えるという事は
枠の丸みが無くなるという事にもなります。
ありがとうございます。
ご指摘いただいた部分には気をつけるようにします。
Ads By Google
コメント(1)
#1. kavalier
2009-09-17 11:31:02
基本的にはdiv#content {に
widthを入れて数値を設定することになるんですけど
それをやると回答のように数値を書き換えたり
ちょっと消したりするだけじゃなく
根本的に全部を書き換えることになると思うので
そのようなデザインを作る時は
本文領域が可変する「デフォルト2008」ではなくて
本文領域が不可変の別のデザインから
カスタマイズすると良いんじゃないかと思います。
ただ、私もデフォルト2008しか使ってないので
他のデザインの本文部分のCSSが
可変か不可変かまでは把握してませんが
企画ものとかは不可変そうな気はします。




