【ブログ豆知識】カスタムしたアメブロヘッダーにリンクを貼る方法！

今日はカスタムしたアメブロヘッダーのヘッダー部分。
CSSカスタムでただ画像を貼るだけではリンクが飛びません！

アメブロデザインCSSの編集

なぜなら
ヘッダー画像はヘッダーDIVの中の背景に配置されていて
画像として配置されていないからです。

その代わり簡単な作業でヘッダー画像をダウンロードされたりすることはありませんが。。。。

ここからホームのページへリンクが飛んでたら楽なのになあ。。。

そんな時！









現在使用中のブログデザインCSSの
いちばーーーん最後に

h1.skinTitleArea a{
width:ここにヘッダー画像の横サイズを入れる;
height:ここにヘッダー画像の縦サイズを入れる;
display:block;
position:absolute;
text-indent:-9999px;
}
h2.skinDescriptionArea{
display:none;
}
.skinHeaderArea2,.skinBlogHeadingGroupArea{
padding:0;
}

を入れてみてください☆

全部の文字が半角になっていることを確認してくださいね♪

以下ちょっと専門的なことを答え合わせします☆
ご興味のある方だけどうぞ！

h1.skinTitleArea a
というのがヘッダーに入るタイトル【リンクされている文字】
に当てられるスタイルと言う意味です。

本来　aって縦も横もないテキストの形に沿った形になるんだけど
これを入れることで実態がでます！
【display:block;】

そのサイズをヘッダー画像のサイズに合わせて

【width:ここにヘッダー画像の横サイズを入れる;
height:ここにヘッダー画像の縦サイズを入れる;】

【position:absolute;】
どこにでも飛んでいける位置情報のない子になります。

ので、
text-indent:-9999px;
ではるか彼方に飛ばして

文字は見えないけどリンクは残ってるという形なりました。

【h2.skinDescriptionArea{
display:none;
}】
これでブログの説明も見えなくなります～
ブログの説明を残したい場合はこれは省いてもOKです。



ハッピーなデザインはハッピーデザインまで♥