解決済

clip!clip!
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が
可変か不可変かまでは把握してませんが
企画ものとかは不可変そうな気はします。

トラックバック(2)

トラックバックURL: