スタイルシートの変更方法

質問

wordpressにて素敵なthemeを発見したので利用したいと思っています。
しかしメイン部分が若干狭いため広げるようにカスタマイズしたいのですが、
CSSの知識があまりないため何処をいじればよいのかわかりません。
真ん中の領域を広げるにはどうすれば良いのでしょうか？

Demoサイト
http://www.7graus.com/tech/wordpress/leopress/demo.html

themeダウンロードサイト
http://www.7graus.com/tech/wordpress/leopress/

回答No.2

abril · ベストアンサー

> 3ペインになっている後ろの縦線部分が、何処で広げられるのかわかっておりません。

「3ペインになっている後ろの縦線部分」は、「3ペイン」の親要素である"#content"にbackgroundで定義されている"img/bg-content.png"という画像に含まれるものです。つまり：
・#subcontentのブルーグレーの様な背景色領域と左側のドロップシャドウ
・#subcontentと#maincontentとの境界線
・#maincontentの白い背景色領域
・#maincontentと#extracontentとの境界線
・#extracontentの白い背景色領域と右側のドロップシャドウ
を、ひとまとめにしたW900px×H2pxの画像が"img/bg-content.png"です。各子要素はその親要素の背景画像が垂直方向にリピートしてレンダリングされた際に丁度収まりよくレイアウトされる様に、幅・表示位置・余白等を定義しているだけで、背景やボーダーの定義は含まれていません。
ですので、#maincontentを広げただけでは、背景画像とずれた形でコラムがレイアウトされてしまいます。

「タイトル部分の画像を広げないととも思っています。」ということは、幅900pxを変えずに左右のコラムから幅を減らして中央のコラムの幅を広げるのではなく、#maincontentの幅を広げた分、#docの幅も広げる、ということですね？
例えば、#maincontentの"width:454px;"を500pxに増やした場合、増加分の46pxを#docのwidthにも追加して、"width:946px;"としなければなりませんが、そうなると差分の46px分は、#maincontentの領域が現状の#extracontentの為の背景画像まではみ出し、押し出された#extracontentは46px分、現状の背景画像からはみ出して表示される、という事になります。

つまり、質問者様のご希望のレイアウトを実現するには、そのコラム幅変更の差分に合う様に"img/bg-content.png"の画像を編集してやる必要がある、という事ですね（レイヤーが使える画像編集ツールがあれば簡単な修正です）。

お礼

非常に分かり易い説明ありがとうございます。
勉強になり今後の参考にさせていただきます。
実はこのwordpressのテーマはWP2.5ではIEとの相性が悪く、
IE6でコンテンツ自体が表示されないと言う最悪の事態になりました。
そのため棚上げになっています。
今後もアドバイスを頂けたら非常に嬉しいのですが、一旦締め切ります。
ありがとうございました。

回答No.1

mocalhost

もしかしたらこの部分を変えればいいかもしれません。

#maincontent {
float:left;
padding-bottom:80px;
width:454px;
}

ただこれを変えると他も調整しないといけないような気がします。

補足

回答ありがとうございます。
詳細情報が抜けていましたので、
抜粋したわかっている情報を補足します。

以下の部分の「width」を変更すれば幅は変わるのですが、
3ペインになっている後ろの縦線部分が、
何処で広げられるのかわかっておりません。

後は、タイトル部分の画像を広げないととも思っています。

全体の設定
#doc {
background:url(img/bg-top.png) no-repeat center top;
margin:0 auto;
width:900px;
}
左の設定
#subcontent {
float:left;
padding:10px 0 80px 0;
min-height:400px;
overflow:hidden;
width:186px;
}

真ん中の設定
#maincontent {
float:left;
padding-bottom:80px;
width:454px;
}

右の設定
#extracontent {
float:right;
padding-bottom:30px;
width:235px;
}