祝Queenの日!フレディ・マーキュリーの年代別ファッション&ヒットソングまとめ

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;
}

A 回答 (2件)

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



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

これは正常な状態です。

(2)#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の数値を小さくすると収まるかもしれません。

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

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

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

お礼日時:2005/06/03 21:43

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



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

具体的なCSSの変更は

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

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

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

参考URL:http://css.seesaa.net/

この回答への補足

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

(1)#container{ のwidthの値を増やす(初期値769px)

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


(2)#content { のwidthの値を増やす(初期値500px)

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


(3)これだけですとタイトルの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;
}

補足日時:2005/05/27 20:13
    • good
    • 0
この回答へのお礼

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

お礼日時:2005/05/27 19:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qライブドアブログでトップページの表示記事数を増やすには?

ライブドアブログでトップページの表示記事数を増やすには?

ライブドアブログでトップページの表示記事数を増やすにはどうすればいいのでしょうか?
現状トップページで最新記事が3件表示されてますが、これを8件程度に増やしたいのです。

いろいろCSSをいじくって試行錯誤しているのですがうまくいきません。
よろしくお願いいたします。

Aベストアンサー

CSSを編集する必要はありません。


[ブログ設定]-[ブログ情報]の基本設定-[表示設定]のトップページの表示件数


人気Q&Aランキング

価格.com 格安SIM 料金比較