ヘッダーのリンクについて
オリジナルのヘッダー画像をトップへのリンクにする方法について・・・
元々アメブロはヘッダー内に二つの要素(って言うのかな?)がある模様。
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;
要するに大きい数値を入れてテキストを弾き飛ばすということ。
以上
元々アメブロはヘッダー内に二つの要素(って言うのかな?)がある模様。
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;
要するに大きい数値を入れてテキストを弾き飛ばすということ。
以上