ヘッダーのブログ説明下に画像を置くと記事にかぶる

質問

シーサーブログですが、画像をヘッダーのブログ説明の下に配置すると、メインの記事や両サイドバーのコンテンツにかぶってしまいます。
これはスタイルシートの編集だな、と思い、スタイルシート内の各種場所(banner、marginなど)の数値を色々いじって試行錯誤してみるのですが、どうもうまくいきません。
私の使用テンプレートは、ライトグレー(両サイドバー)です。

スタイルシートのどこをさわればよいのでしょうか？

回答No.3

Muller3 · ベストアンサー

＞その下に画像が配置され下のコンテンツにかぶりました
その画像表示部分前後のHTMLソースはどうなっていますか？
<div id="banner">
<h1><a href="http://sps-v.seesaa.net/" accesskey="1">ブログタイトル</a></h1>
<span class="description">ブログ説明</span>
<img src="画像イメージ" alt="" width="1200" height="200" border="0" />
</div>
自由形式に普通に入れるとこんな感じになると思うのですが…
（ブラウザからのソースの見方はわかりますか？右クリックか何かでソースを表示して、どうなっているか見てみて下さい）
上記のようなソースなら、bannerの高さを調整することが対策としてわかるのですが、それが効かないとなると、違うところに画像が入っているのかもしれません。場合によっては自分でクラスセレクタなどを設定する必要があるかも。
…なんかseessaa、扱いやすいのか扱いにくいのか、微妙…（笑）

＞幅1200の画像
containerの幅が100％になっているので、レイアウト的には大丈夫かな…
一般的な話ですが、いろんな環境の人がいて、17インチの画面で1280*1024の解像度で見ている人もいれば、15インチで800*600の解像度で見ている人もいるので、画像を扱う時はそのあたりも配慮した方がいいかな、と。

banner部分に背景画像として埋め込んでいらっしゃる（background-image:url(​http://daikaiun.up.seesaa.net/image/top01.bmp)）のは関係ないんですね。この下にまた画像を配置したい、ということですよね。

お礼

大変お手数をおかけいたしました。どうもありがとうございました。
ご指摘のとおりにして、うまくいったブログと、だめだったブログとがあり、完全消化というわけにはいきませんでしたが、大体の雰囲気はつかむことができました。その他画像サイズへの配慮等大変参考になりました。
ソースを見ながら直接htmlをいじれるようなブログの方が、いいのかもしれませんね。その点ではシーサーブログは弱いのだろうと思います。

回答No.2

Muller3

ヘッダーのブログ説明の下に自由形式で画像を配置した場合、
<div id="banner"></div>
の中に入るようです。
#bannerのheightの値に画像の高さ分をプラスしてやれば、下のコンテンツにかぶらないと思います。

余談ですが、幅1200の画像をそのまま表示させるのですか？
#containerのwidth（幅）の値はどうなっていますでしょうか？
1200より小さい値なら、#containerの幅（正確に言うなら、containerの幅からbannerのpadding-leftとrightを引いた値）に合わせないと、レイアウト崩れの原因になるかもしれません。
どういった画像かはわかりませんが、幅1200というのはあまりしない設定なので…

補足

#containerは以下のとおりです。
#container{
margin:0px auto 0px auto;
width:100%;
color:#5D5D5D;
font-size:12px;
font-family:Verdana;
text-align:center;
}
また、#bannerは以下のとおりです。
#banner{
margin:0px;
text-align:left;
height:140px;
background-image:url(http://daikaiun.up.seesaa.net/image/top01.bmp);
background-repeat:no-repeat;
background-position:top right;
}
実は質問する前に、#bannerのheightの値をプラスしても見ましたが、#banner部分が縦に広がり、その下に画像が配置され下のコンテンツにかぶりました。
しかし、今日別のブログで試してみたら、今度は不思議とうまくいきました。理由はわかりませんが。

なお、幅1200の画像は、高層ビルから東京を眺めた景色ですが、画像加工ソフトでどのようにでも縮小できます。

回答No.1

Muller3

どんな大きさの画像ですか？
また、どのように画像を配置したいんでしょう？
ヘッダーのブログ説明の下に配置、ということは、
「デザイン」-「コンテンツ」-「ブログ説明」-「挿入テキスト」の「ファイルの追加」欄で画像を配置しているんだと思うのですが、
ヘッダーの背景として設置したいわけではないのですね？

補足

ご質問ありがとうございます。
1200×200ピクセルの横長画像です。これを自由形式でヘッダーのブログ説明の下に配置すると、下のメインやサイドバーのコンテンツとかぶってしまいます。
背景であれば、banner　の数値を変えれば画像をおけることは分かっているのですが・・・
背景としての用途ではありません。