ブログヘッダ画像差し替え（マウスが乗ったら動く画像にする）［その３］
６：今回の編集②（ＣＳＳ－paddingの設定－）
５（今回の編集①）の設定をしても、イラストの画像が少しずれてしまいました。↓
↑少し分かりにくいのですが、イラストの上部分と左部分に４－①でセットした過去画像がはみ出して表示されています…。(;_;)
原因は、ＣＳＳソースの中ほどにあるタイトル（h1タグ）の設定にありました。
↓以下が、ＭｙブログのＣＳＳタイトル設定部分（抜粋）です。
（1行目：…という部分は、説明のためにつけた行数なので、実際のソースにはありません！！）
1行目：div#header h1{
2行目：margin:0;
3行目：/*padding:0 5px 8px 5px;*/
4行目：padding:8px 5px 8px 5px;/*20080430追加*/
5行目：font-size:3em;
6行目：font-weight: bold;
7行目：line-height:1.2;
8行目：}
３行目が、元々のＣＳＳ（ベーシックスキンのみの設定？？）で、
４行目が、私が４－②で編集した部分です（３行目をコメント にして無効化してあります）。
paddingというプロパティが、タイトル部分をずらして（正確には膨らませて）いるみたいです。
※２行目のmarginというプロパティも、いじると危険そうなニオイがします…。(^_^;;)
３行目を復活させてもイラストのずれはなおりません。
↓両方ともコメント 化してpadding設定を削除してみます。
3行目：/*padding:0 5px 8px 5px;*/
4行目：/*padding:8px 5px 8px 5px;20080430追加*/
↑これでイラストが正しい位置にセットされました。(*^O^*)/
７：今回の編集③（ＣＳＳ－ヘッダ部分の領域確保－）
私は４－①で同サイズ（幅800×高さ300ピクセル）のヘッダ画像をセットしていたので気づきませんでしたが、ヘッダ画像をセットしていない場合、ヘッダ部分の高さは最高100ピクセルまでしか設定できないみたいです（アメブロ管理画面の「ブログ→デザインの変更→スキンのカスタマイズ」）。
ヘッダ画像を削除してみると、イラストが大きすぎて、ブログの頭部分まではみだしてしまいました！！↓
イラストはタイトル（h1タグ）として表示されているので、タイトルとは別にヘッダ部分の領域（この場合は高さ300ピクセル）を確保しないといけないみたいです…。(;_;)
ＣＳＳはさっぱり分からないので苦労しましたが、↓の記述を追加することで、↑の現象を回避することができました。(^-^;;A)
/*---------- 20090108追加 ----------*/
#header{
height:300px;
}
/*---------------------------------*/
↑をＣＳＳの末尾に追加しました。
これで、何とかヘッダ画像の差し替えが完了しました。(^o^;A)
拙い文章だし、後から説明を追加したりと、非常にわかりにくい記事になってしまい、すみませんでした～。m(_ _;;)m