1363501783 wordpress3.5のレイアウト(CSS)に関する質問です。


http://dca-labo.info/demo8/

上記サイトの左端 コンテンツエリアと再度バーの間、右端

各自の空白のエリアをもっと狭くしたいと思っています。
スタイルシートのどの部分の修正が必要か教えて欲しいです。

関係しているであろうstyle.cssの記述を下記に抜粋しました。
結構修正しているので(かなり苦し紛れに)
その修正がまずい可能性も考えられます。

#page {
margin: 2em auto;
max-width: 1100px;
}

#main {
clear: both;
padding: 1.625em 0 0;
}


#primary {
float: left;
margin: 0 -20.4% 0 0;
/* margin: 0 -26.4% 0 0; */
width:650px;
    /* width:70%; */
}
/* 20130303修正 */
#content {
/* margin: 0 34% 0 7.6%; */
margin: 0 24% 0 7.6%;
/* width: 58.4%; */
/* width: 88.4%; */
width:82.4%;
}

#secondary {
float: right;
margin-right: 5.6%;
/* width: 18.8%; */
width: 20.8%;
/* width: 300px; */
}

/* Singular */
.singular #primary {
margin: 0;
}
.singular #content,
.left-sidebar.singular #content {
margin: 0 7.6%;
position: relative;
width: auto;
}

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/03/23 15:17:28
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:rouge_2008 No.1

回答回数595ベストアンサー獲得回数351

ポイント150pt

「#content」と「#secondary」に対する指定を変更します。

#content {
/* margin: 0 24% 0 7.6%; */
margin: 0 24% 0 4%; /* 左側の余白を小さく ※値を4つ指定した場合は、上、右、下、左の順番になっています。※ */
/* width: 82.4%; */
width: 90%; /* 幅を大きく */
}


#secondary {
float: right;
margin-right: 3%; /* 右側余白を小さく */
width: 20.8%;
}


それから、「#primary」の幅をpxによる固定値ではなく、%指定にした方が良さそうです。(ブラウザの幅を変更して確認してみてください。)

#primary {
float: left;
margin: 0 -20.4% 0 0;
width: 73%; /* %で指定 */
}
他8件のコメントを見る
id:mkusume

ありがとうございます。ほぼ解決しました。1点だけご教授頂ければと思います。

http://dca-labo.info/demo8/testimg/031903.jpg

現状上記のような感じになっています。
左端がつまっているので若干空けたいのですがどこを調整したら良いでしょうか?
CSSは上記回答と同じにしている前提でお願いします。

2013/03/19 21:30:09
id:rouge_2008

「上記回答と同じにしている前提」とはどういう事でしょう?
元の質問の「狭く」の逆ですから、左側の余白に指定している値を大きくするといいのですが・・・

#content {
/* margin: 0 34% 0 7.6%; */
/* margin: 0 24% 0 7.6%; */
margin: 0 24% 0 5%;
/* width: 58.4%; */
/* width: 88.4%; */
/* width:82.4%; */
width:90%;
}

元の「7.6%」で空きすぎで回答の「4%」では狭すぎるのでしたら、「5%~6%」程度の間で調整するといいのではないかと思います。

2013/03/20 03:02:20

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません