こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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/header.jpg) 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/877e770f.jpg) 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/877e770f.jpg) 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/877e770f.jpg) 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/877e770f.jpg) no-repeat bottom left;/* 背景画像:左下 */
}

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


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

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


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

投稿日時 - 2010-08-06 10:47:02

QNo.6090526

困ってます

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

#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;   ←←←←← 高さの指定(適宜変更してください)
}


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

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

投稿日時 - 2010-08-13 10:53:05

ANo.1

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

投稿日時 - 2010-08-06 21:40:23

補足

初期です・・・

投稿日時 - 2010-08-10 12:01:25

あなたにオススメの質問