スタイルシート ページ左右の余白幅 設定

質問

Seesaaブログを利用しています。
テンプレート「ガーベラ」のページ左右の余白幅を狭くしたいと思っています。

やりたい事は、例えばWord文書の左右余白は規定値で35mmになっているが20mmに変更したい　という感じです。

初心者なので少し調べましたが
スタイルシートのpadding、marginの設定を変更する必要がありそうな事しか分かりませんでした。

以下、スタイルシートの一部をコピーしたものです。
具体的に、どの部分を変更すればいいのか教えて下さい。

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-color:#FFF;
color:#666666;
}
#container{
text-align:center;
margin: 10px auto 0px auto;
padding:0px;
width:769px;
}
a{
text-decoration: underline;
color:#87B400;
}
#banner{
font-family:arial, Helvetica;
height:275px;
margin:0px;
padding:0px 0px 0px 160px;
text-align:left;
background-image:url(http://blog.seesaa.jp/img/bg/gerbera/header.jpg);
background-repeat:no-repeat;
}

回答No.2

mamo2005 · ベストアンサー

ちょっと説明不足の部分がありましたね。

（１）#container{ のwidthの値を増やす（初期値769px）
→　769pxを850pxにしてみた所、左余白が狭くなりました。
　というより、「全体的に左側に寄った」感じになりました。

これは正常な状態です。

（２）#content { のwidthの値を増やす（初期値500px）
→　500pxを600pxにしてみた所、右サイドバーが、画面右側から消えて、画面下（記事の下の位置）に移動してしまいました。

この部分なのですが実は右サイドバーの幅が#links { のwidthで設定されているのです（初期値226px）
つまり全体（container）の幅から右サイドバー（links）の幅を引いた値が設定できるコンテンツ（content）の最大幅となりそれ以上の値を設定するとスタイルが崩れてしまいます。
初期値の状態だと769－226＝543pxとなります。実際にはさらにマージンが30pxほどあるのでもう少し小さくなります。
containerのwidthを850pxにしたとき設定できるcontentのwidthは850－226－30＝594pxくらいまでになります。ですのでもうちょっとだけ値を小さくしてみると右サイドバーがずれないで表示されると思います。

#banner{ のmarginですが

#banner{
font-family:arial, Helvetica;
height:275px;
margin:0px;

↑の部分をmargin:0px 0px 0px **px;とします（**に任意の値）
4番目の値が左余白に当たります。

ブログタイトルが切れるというのはちょっとわかりませんが（タイトルが長いのでしょうか？）、1行下のpadding:0px 0px 0px 160px;の160の数値を小さくすると収まるかもしれません。

細かい調整はプレビューを見ながら試してみてください。
また差し支えなければブログを教えて頂けるともう少し的確なアドバイスが出来るかもしれません。

お礼

お礼が遅くなって申し訳ありません。
再度アドバイスありがとうございます。

具体的に教えて頂けて、参考になりました。
回答を元にして、余白調節をしてみます。

回答No.1

mamo2005

Seesaaブログはあまり詳しくないのですが、ガーベラのCSSを見てみるとcontainerで全体の幅、contentでメインの記事、コンテンツの幅を設定しているようですね。

左右の余白部分を減らしたいということはこれらの幅を広げればよいと思います。

具体的なCSSの変更は

#container{ のwidthの値を増やす（初期値769px）
#content { のwidthの値を増やす（初期値500px）

とすれば余白部分が調整できると思います。
なお、これだけですとタイトルのbackground画像の位置が左に寄ってしまうと思うので、そのときは#banner{ のmarginで左余白を増やして位置を調整してください。

テンプレートの初期状態からコンテンツを変更していたりすると場合によってはその他の設定が必要になるかもしれませんが、プレビューを見ながら値を調整すればうまくできると思います。

参考URL：

http://css.seesaa.net/

お礼

ご回答ありがとうございます。
丁寧に教えて頂き、嬉しいです。

補足

回答を拝見し、早速やってみました。

（１）#container{ のwidthの値を増やす（初期値769px）

→　769pxを850pxにしてみた所、左余白が狭くなりました。
　というより、「全体的に左側に寄った」感じになりました。

（２）#content { のwidthの値を増やす（初期値500px）

→　500pxを600pxにしてみた所、右サイドバーが、画面右側から消えて、画面下（記事の下の位置）に移動してしまいました。
　そして、ブログタイトル部分も切れた感じになってしまいました。

（３）これだけですとタイトルのbackground画像の位置が左に寄ってしまうと思うので、そのときは#banner{ のmarginで左余白を増やして位置を調整してください。

→　そこで、#bannerのmarginを調整しようと思ったのですが、どのmarginの値を増やすのか分かりませんでした。
　試しに、10pxとか100pxにしてプレビューで確認してみたのですが、どうも上手くいきませんでした。

大変申し訳ありませんが、再度教えて頂ければ幸いです。
宜しくお願い致します。
---------------------------------------------------

#banner{
font-family:arial, Helvetica;
height:275px;
margin:0px;
padding:0px 0px 0px 160px;
text-align:left;
background-image:url(http://blog.seesaa.jp/img/bg/gerbera/header.jpg);
background-repeat:no-repeat;
}
h1 {
margin:0px;
padding: 50px 10px 10px 0px;
font-size:18px;
font-weight:bolder;
}
h1 a{
color:#FFF;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}
h2 {
}
h3 {
font-size:12px;
font-weight:bolder;
font-family:arial, Helvetica;
margin-top:10px;
margin-bottom:5px;
padding:3px 0px 5px 20px;
background-image:url(http://blog.seesaa.jp/img/bg/gerbera/title.gif);
background-repeat:no-repeat;
}
h3 a{
font-weight:bolder;
color:#666;
}
.description {
color:#FFF;
margin:0px 10px 10px 0px;
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}
.navi {
font-size:12px;
text-align:center;
padding:0px 0px 5px 0px;
}