Webデザインする女子☆リンです。
このたび、ブログヘッダー画像をワイドな940×300pxに変更しました。全体的にゆったりなサイズになって、余裕感のあるブログになりました。
ところで、通常このヘッダー部分にある「タイトル」文字をクリックすると、そのブログのトップページに戻ることができるのはご存知でしょうか？
ヘッダー部分に画像を設定しただけでは、この機能がなくなってしまうのでとても不便です。そこで、ブログCSSに以下の記述を追加して、ヘッダー画像をクリックすることによりトップページに戻れるようにします。
/* ヘッダーに画像を設定する */
#header {
background-image: url(画像のURL);
background-repeat:no-repeat;
}
/* ヘッダー画像をクリックしてTOPに戻る */
#header h1,
#header h2{
margin:0;
padding:0;
text-indent:-9999px;
}
#header h1 a{
display: block;
width: ●●●px;/*画像の幅*/
height:●●●px;/*画像の高さ*/
}
青い部分の記述で、ブログタイトルとブログの説明文を表示されないようにして、緑色の部分の記述で、画像のある箇所をリンクにするわけですね。
CSSの一番最後に、上記の記述を「コピー＆ペースト」」すれば「ヘッダー画像をリンクにする」ことができます。
＜ここから記事訂正＞
さて、今回私は、940px×300pxのヘッダーにしようと、上記CSSの記述を「height:300px;」に設定したわけですが、「Firefox」で表示したところ、なんとこのようなことに…
↓
↓
なんだこりゃ(≧∇≦)！！！
このとき、Internet Explorerでは正常に表示されていましたので、ブラウザによる違いもあるのでしょうが、どうやらCSSのどこか他の場所を変に書き換えてしまったようです。
ただ今原因調査中ですが、ひとまず高さの数値を「280px」に減らすことにより解決しました。
また、以下の記述をCSSの最後の追加することにより改善されることもあるようです。
#header {
margin:0px;
padding:0px;
height:300px;
width:940px;
}
#wrap {
clear:both;
display:block;
}
ただ、この方法だと私の場合は、Firefoxでの表示は正常になったものの、Internet Explorerで不具合が出たので、見送りに…いっそのこと、イチから書き直したほうがいいのかしら＾＾；
「CSSのほかの箇所で余白などを設定していたための不具合」であるかのような記事を一時的に書いてしまいましたが…訂正してお詫び申し上げます。
ホームページもそうですが、ブログも大幅にデザインを変更したときは、複数のブラウザ「Internet Explorer」「Firefox」などで表示を確認するのが無難ですね。