livedoorブログのヘッダの変更のしかた・・・

livedoorブログのヘッダの変更のしかた・・・



livedoorブログをはじめて、カスタマイズをしようと思って、livedoorブログカスタマイズのしかたなどが載ってるサイトをいろいろ探してみたのですが、サイトに書いてある、CSSと、はじめのlivedoorブログのカスタマイズの変更で見たCSSが全然違います。


ヘッダ画像の変更などは
サイトに書いてあるのは
body{
margin:0;
padding:0;
color:#d7d3c4;
background:#000 url(http://image02.wiki.livedoor.jp/img/usr/gothic/h … no-repeat center 20px;
font-size:80%;
}
こんなのや他にもいろいろありますが、livedoorのカスタマイズではじめのCSSを開いてタイトルエリアを見ても

div.blog-title-outer {
background: #dedede url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7 … no-repeat right top;/* 背景画像：右上 */
text-align: left;
margin-bottom: 10px;
padding-right: 10px;
}
div.blog-title-outer-2 {
background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7 … no-repeat;/* 背景画像：左上 */
padding: 10px 0 0 10px;
}
div.blog-title-outer-3 {
background: #63abec url() no-repeat;/* 背景画像：左上 */
}

h1#blog-title {
background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7 … no-repeat right top;/* 背景画像：右上 */
margin: 0;
padding: 35px 30px 0;
font-size: 150%;
font-weight: bold;
}

div.blog-description-outer {
background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7 … no-repeat bottom left;/* 背景画像：左下 */
}

p#blog-description {
background: url() no-repeat bottom right;/* 背景画像：右下 */
margin: 0;
padding: 10px 30px 35px;
line-height: 135%;
}


こんなので背景画像右下や左下・・・

これすべてにアップロードした画像のURLをいれてもちゃんと背景になりません。


どうすればいいのでしょうか？

No.2 回答者： 756co 回答日時： 2010/08/13 10:53

#1です。

スタンダートの3カラムですね。

このテンプレートのHTMLを見ると、ヘッダ部分は以下のように書かれています

<div id="banner">
<h1 class="blogtitle"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
<div class="description"><$BlogDescription$></div>
</div>


ですので、スタイルシート（CSS）で
#banner の部分の背景画像を変えればいいと思います。


例：
#banner{
border:solid #3d78f9;
border-width:1px 1px 0;
background:#fff url('背景画像のアドレス') repeat-x;
text-align:left;
margin:0 auto;
clear:both;
}


質問のアドレスにある画像が使いたい画像なんですよね？
このままのサイズだと一部分しか表示されません。

ですので、高さの指定を書き加えます。
以下のようになります。


#banner{
border:solid #3d78f9;
border-width:1px 1px 0;
background:#fff url('画像のアドレス') repeat-x;
text-align:left;
margin:0 auto;
clear:both;
height:404px;　　　←←←←←　高さの指定（適宜変更してください）
}


しかしこれだけでは横幅が足らず、画像全体は表示されません。
横幅を変えるには、スタイルシートもまだ手を加えなければならなくなりますし
レイアウトが崩れる可能性があります。

使う画像のサイズを調整した方がいいかもしれません。

No.1 回答者： 756co 回答日時： 2010/08/06 21:40

どのテンプレートを使っているのですか？

この回答への補足

初期です・・・

補足日時：2010/08/10 12:01