■ヘッダー全体をリンクさせる方法 | 「ヘタレの独り言 独断と変見」by Ameba

■ヘッダー全体をリンクさせる方法


最近はアメブロをご自分なりのデザインに

カスタマイズされてる方も多く

あてくしの読者の方々にも数名いらっしゃいます。

参考になれば。



ヘッダー(↑当ブログでいうところのチーターと私↑)の部分を

ご自分の好きな画像に変えておられる方が多い気がしますが

この画像全体をクリックしたらトップページに戻る方法をご紹介。



通常はタイトルが文字リンクになっているのですが

せっかくの画像がいまいちになりますからね。





CSSの編集画面で下記を書き込むだけです。

----------▼ここから下をコピペ----------

#header {
width:800px;
height:300px;
margin-right:auto;
margin-left:auto;
background-image:url(http://….jpg);/*ヘッダー画像のURL*/
background-repeat:no-repeat;
}

↑これはすでにされていることでしょう。


#header h1, #header h2 {
margin:0;
padding:0;
text-indent:-9999px;
}

#header h1 a {
display:block;
width:800px; /*ヘッダー画像の幅*/
height:300px; /* 〃 画像の高さ*/
}

----------▲ここまでをコピペ----------

ちなみに↑text-indent:-9999px;というのはその文字を

画面ずっと下に追いやってしまう指示です。



ヘッダー画像の大きさ指定は、ご自分の画像に合わせてみてね。