ブログのヘッダーに背景画像を敷きたい（スキン）

■ブログのヘッダーに背景画像を敷きたい





CSSの中から　" (3-2) ブログヘッダー" の中の次の箇所を探します。

/* (3-2) ブログヘッダー
--------------------------------------------*/

その箇所の下の .skinHeaderArea
今回はここを修正するよ

.skinHeaderArea

CSSを書く

.skinHeaderAreaの　「 .skinHeaderArea{ 」から 「 } 」の間を下記のように修正してください
※ 「 .skinHeaderArea{ 」 から 「 } 」 の間にもともと書いてあった文字は全て消して、下記のように修正してください

.skinHeaderArea{
height: 画像の高さpxをここに書くpx;
background: url(画像のパスをここに書く) no-repeat 50% 50% ;
}

※画像のパスはCSS編集のページで、画像をアップロードすると、画像の下に表示されます。
※画像の高さはこの記事を参考にしてね
【Tips】 画像のサイズ（大きさ）を調べる


実際に画像の高さと画像のパスを入れるとこんな感じになるよ

.skinHeaderArea{
height:300px;
background: url(http://xxxxxxxxxxxx) no-repeat 50% 50% ;
}

できたかな？








■応用編　ブログのタイトルも含めて画像にして、画像全体を押せるようにしたい場合


タイトル文字も画像にして、画像全体が押せる


CSSの一番下にこのCSSを貼り付けます

/* ブログのタイトルも含めて画像にする */
.skinBlogHeadingGroupArea{
padding:0;
}
.skinTitle{
display:block;
text-indent:-9000em;
outline:none;
height:画像の高さpxをここに書くpx ;
background: url(画像のパスをここに書く) no-repeat 50% 50% ;
}
.skinDescriptionArea{
text-indent:-9000em;
height:0px;
}

青字の画像の高さと画像のパスも書いてください。



実際に画像の高さと画像のパスをいれるとこんな感じになるよ

/* ブログのタイトルも含めて画像にする */
.skinBlogHeadingGroupArea{
padding:0;
}
.skinTitle{
display:block;
text-indent:-9000em;
outline:none;
height:300px;
background: url(http://xxxxxxxxxxxxx) no-repeat 50% 50% ;
}
.skinDescriptionArea{
text-indent:-9000em;
height:0px;
}

応用編もできたかな？










｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ


CSS編集をやってみたけど、なぜかうまくできない。原因が分からない人
→この記事を見てみてね

CSS？カスタマイズ？って　何かよく分からない人
→この記事を見てみてね


※このブログのカスタマイズは、「CSS編集用デザイン」 を使ったもので、CSS編集用デザイン以外のCSS編集に対応していません。

※画面、仕様は記事が投稿された時のものです。

｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ