お待たせしましたヘッダー画像です
ごめんなさいm(_ _)m 8/2 23：00
ＣＳＳ修正しました（少し短くなりました）
ロールオーバーのやり方を書き加えました
ごめんなさい
8／3 9：15 またまたＣＳＳ訂正しました
h1 a{ → .skinTitleArea a{
ｈ1って1ページに1個だけって頭がありましたから・・・・
なんで記事タイトルにもh1が・・・
1ページ10記事だったら1ページにh1が11個？おかしくないですか？
すみません m(_ _)m
8/8 19:30 またまた修正です
h2{ → .skinHeaderArea h2{
他のページでもh2を概要以外に使っていました・・・
/*ヘッダー*/
.skinHeaderArea{
width:980px;/*画像の横*/
}
.skinTitleArea a{
background-image:url(画像のＵＲＬ);
width:980px;/*画像の横*/
height:200px;/*画像の縦*/
background-repeat:no-repeat;/*繰り返さない*/
background-position: center top;/*中央上に*/
display:block;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
outline:none;
}
.skinHeaderArea h2{
display:none;/*概要を非表示*/
}
※画像の横幅がブログの横幅と同じ980pxでしたら水色部分
skinHeaderArea{
width:980px;/*画像の横*/
}
は・・・書かなくても大丈夫です
画像の横幅が980pxより狭い場合は（中央に画像＆クリック部分を表示するために）画像の横幅を入れて絶対に必要です
↑ココまでのＣＳＳはロールオーバーをするしないにかかわらず必要なＣＳＳです
ヘッダー画像のロールオーバーをするには（マウスがのったときに画像を変える）
もう1枚別の画像を使う方法
上で設定した画像とまったく同じサイズの別の画像が必要です
で・・・ＣＳＳの最後に
.skinTitleArea a:hover{
background-image:url(画像のＵＲＬ);
}
ただし・・・
マウスを乗せた瞬間に画像を読みに行きますので一瞬時間が空く場合があります
もし・・・画像合成で2枚の画像を上下にくっつけて1枚に出来れば（こちらの方がお勧めです）
.skinTitleArea a:hover{
background-position:center bottom;/*中央下に*/
}
こちらでしたら一瞬で画像が切り替わります
この方法を使う場合は・・
height:200px;/*画像の縦の1/2*/
表示させたい画像の縦を設定します
2枚同じサイズの画像を上下合成していますから画像の1/2が表示させたい画像のサイズになります
そして・・普段は
background-position: center top;/*中央上に*/
で・・上の画像を表示しておいて
マウスがのったら
background-position:center bottom;/*中央下に*/
下の画像を表示します
この方法でしたらタイムラグは発生しません
精神衛生上からもお勧めします
Ａ Ｂ Ｃ のスキマを変更するためには
↓赤字部分を変更してＣＳＳの最後に追加します
.headerBnrArea{
padding-bottom: 15px;/*Ａ*/
}
.skinBlogHeadingGroupArea{
padding: 20px 0 30px;/*Ｂ Ｃ*/
}
↓水色のＣＳＳ部分に画像の横幅を入れることでこのようになります
今度の「ＣＳＳ編集用デザイン」は・・・
入れるところがたくさんありすぎて・・・
おまけにそこらじゅうにclassが付いているから・・・
どうやっても良いし・・
いろんなやり方が出来るし・・・
どのようにでもなっちゃうので逆に難しいのかな？
たぶん新しいデザインの解説をされているみなさま違った方法でＣＳＳを書かれるのではないでしょうか？
結果的には同じことなんですがそれだけいろんなやり方が出来ちゃうってことです
いろんなサイトでバラバラのＣＳＳが公開されるから戸惑わないようにしてくださいな・・
次はここのブログのようにヘッダー画像を使わないで・・
ブログの背景を使ってクリックできるようにしてみます
つづく・・・・