ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

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

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

themeダウンロードサイト
​http://www.7graus.com/tech/wordpress/leopress/​
質問投稿日時：08/03/31 12:34
質問番号：3909808
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：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"の画像を編集してやる必要がある、という事ですね（レイヤーが使える画像編集ツールがあれば簡単な修正です）。
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/04/12 02:44
回答番号：No.2
この回答へのお礼非常に分かり易い説明ありがとうございます。
勉強になり今後の参考にさせていただきます。
実はこのwordpressのテーマはWP2.5ではIEとの相性が悪く、
IE6でコンテンツ自体が表示されないと言う最悪の事態になりました。
そのため棚上げになっています。
今後もアドバイスを頂けたら非常に嬉しいのですが、一旦締め切ります。
ありがとうございました。

回答

 
回答者：mocalhost もしかしたらこの部分を変えればいいかもしれません。

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

ただこれを変えると他も調整しないといけないような気がします。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/31 12:49
回答番号：No.1
この回答への補足回答ありがとうございます。
詳細情報が抜けていましたので、
抜粋したわかっている情報を補足します。

以下の部分の「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;
}
この回答へのお礼この回答にお礼をつける(質問者のみ)
 
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ