ヘッダーのリンクについて | ジャック卿のCSS

ヘッダーのリンクについて

オリジナルのヘッダー画像をトップへのリンクにする方法について・・・

元々アメブロはヘッダー内に二つの要素(って言うのかな?)がある模様。
h1の要素がブログトップへのリンクがあるブログタイトルで
(このブログで言う”ジャック卿のCSS”)
h2の要素がサブタイトルのテキスト。
(このブログで言う”ノルウェージャンフォレストキャットのジャック卿の・・・”)

元々リンクが埋め込まれてるh1の要素をうまく使えばよいのでは?
というわけで以下↓

#header h1 a {
font-family: "HGP創英角ポップ体", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
margin: 0px;
display: block;
width: 800px;
height: 252px;
text-decoration: none;
color:#339900;
}

赤字の部分がheaderそのものの広さ、
もしくは貼り付けたい画像の大きさにすればたぶんOK。
青字の a が一体何なのか、はっきり分らなかったものの、
h1のテキスト色を指定する部分(黄色)に付いてたので
そのままそれを使用。
これで画像にリンクが張られているように見える状態になる。
(実際は画像は背景になっているだけ)

h1を一杯に拡大すると問題になるのがh2要素がはじき出されること。
それを解決するために以下↓

#header h2{
position:absolute; top:135px; left:100px
margin:0px;
padding:0 5px 45px 5px;
font-size:12px;
font-weight: normal;
font-family: "HGP創英角ポップ体", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
line-height:1.2;
}

赤字の部分で、むりやりポジションをh1要素に重ねるようにすればOK。
topの数値が上下方向、leftの数値が左右方向。

もしテキストそのものを消したいのであれば、以下を追加↓

text-indent: -10000px;

要するに大きい数値を入れてテキストを弾き飛ばすということ。

以上