ブログヘッダ画像差し替え（マウスが乗ったら動く画像にする）［その２］
４：関連記事（前回の編集）
２００８年４月に、初めてブログのヘッダ部分をカスタマイズ（改造）した時の記事を書きました。
↑の画像ですが、
でヘッダ部分に画像をセットし、
②ブログのＣＳＳソースを編集（ヘッダのタイトル・概要部分）［その１］
ブログのＣＳＳソースを編集（ヘッダのタイトル・概要部分）［その２］
でタイトルと概要部分を編集しました。
あまり参考にならないかもしれませんが…。(^o^;A)
５：今回の編集①（ＣＳＳ追加）
前回（４－②）では、ＣＳＳ の記述（ソース）内から<h1><h2>タグを探して、タイトルと概要を設定している箇所を直接編集しました。
今回は、アメブロ向上企画書 様の教えに沿って、ＣＳＳの一番最後に自分の記述したソースを付け加える方法にしました。
このやり方だと、いちいち自分が修正した箇所を探さなくても、ＣＳＳの末尾に付け加えた部分を削除するだけで、ブログを元の状態に戻せるみたいです。(*^_^*)
↓以下が、ＭｙブログのＣＳＳ末尾に追加した記述です。
（アメブロ向上企画書 様の CSS タイトル画像のロールオーバー2 の丸写しです！）
（1行目：…という部分は、説明のためにつけた行数なので、実際のソースにはありません！！）
1行目：/*---------- 20081229追加 ----------*/
2行目：#header h1 a{
3行目：width:800px;
4行目：height:300px;
5行目：display:block;
6行目：position:absolute;
7行目：text-indent:-9000px;
8行目：text-decoration:none;
9行目：background-image: url(http://stat.ameba.jp/user_images/e8/75/10124578527.png);
10行目：background-repeat:no-repeat;
11行目：}
12行目：
13行目：#header h1 a:hover{
14行目：background-position: 0 -300px;
15行目：}
16行目：/*---------------------------------*/
イラストは、連続する２枚の絵を連結させた画像（800×600ピクセル）をアメブロにアップロードしました。↓
上記ＣＳＳ の内容ですが、
（ｈ１タグ）
２行目、１３行目で「h1」の記述があるように、今回の編集は全てタイトル部分（h1タグ）に対して行われています（↑のイラストも）。
４－①でセットした画像や、４－②で編集した概要（h2タグ）はそのままの状態で残されています。
今回の編集で、元々あるヘッダ画像や概要の上に↑のイラストがタイトル（h1）としてかぶさるため、見えなくなるだけです。(^_^;)
（ａタグ）
また２行目、１３行目についてですが、「h1 a」のように記述されています。ａタグはリンク の設定になるので、これはタイトルのリンクに対しての編集をする…という意味になるのでしょうか？？
ＣＳＳの書き方はよく分かりません。(^_^;;A)
ここでａタグが記述されているからなのかどうか分かりませんが、結果として↑のイラスト全体がブログのトップページへリンクしています。
私にとっては、このリンクはありがたい設定です。(*^o^*)
（各プロパティ）
３～４行目：幅と高さを設定して、通常の状態ではイラストの上半分のみ表示するようにしてあります。
５～６行目：ボックスというものに関係した設定のようですが、
さっぱり意味が分かっていません…。f(^_^;;A)
７行目：タイトルのテキスト「えろびブログ～ 素人Inkscapeマンガ～」を
左に9000ピクセルずらして見えなくしてあります。
８行目：タイトルのテキストに下線などの装飾をしないという設定のようです。
９行目：タイトルの背景画像のＵＲＬ （この場合は↑のイラスト）を指定しています。
※画像のＵＲＬ取得方法は、
を参照してください。
※↑のイラストのＵＲＬは
http://stat.ameba.jp/user_images/e8/75/10124578527.png
です（サムネイル表示「_s」ははずしてあります！）。
１０行目：タイトルの背景画像を１回だけ表示（繰り返さない）するという設定です。
１３行目：タイトル（↑のイラスト）部分にマウスが乗った時に、
１４行目：背景画像（↑のイラスト）を上に300ピクセルずらすという設定です。
この時、イラストの下半分が表示されます！(*^o^*)
→その３ に続きます！