トップバナーを画像に
小粋空間：CSS でヘッダーに画像を表示する for Movable Type 4
ブログ別！作成・カスタマイズ講座：ブログタイトルのロゴ画像化（MT編）
一連のカスタマイズに伴いトップバナーも変えることに、またブログタイトルを画像にしたくて色々試行錯誤しました。参考にしたのは上記サイト。本当はブログタイトルを画像にしてもブログへのリンクは残したかったのですが、上手くいきませんでした。
#header {
padding: 15px;
border-bottom: 1px solid #669;
color: #999;
background: #8fabbe;
text-align: left;
}
#header a,
#header a:link,
#header a:visited {
color: #fff;
background: transparent;
font-size: 32px;
text-decoration: none;
}
#header a:hover {}
#header a:active {}
#header {
background: url("http://www.x.com/x/x.jpg") no-repeat top left;
小粋空間テンプレートのCSSを以上のように修正、テキストファイルの上にタイトル画像がきて、テキストファイルが隠れ、一見テキストファイルへのリンクはあたかも画像にリンクされたように見え、上手く成功したように見えます。 しかしIEでブログ画面を開き、画面をスクロールすると、トップバナーの真ん中付近、ちょうどタイトルと同じ高さの白い線が入ってしまいます。 画面をリロードするとその白い線は直るのですが、またスクロールすると同じ結果。
テキストとタイトル画像の重なりの影響でしょうが、色々検索してみても解決策が見つかりません、従い小粋空間さんのアドバイスを仰ぐことに。
#header {
padding: 15px;
border-bottom: 1px solid #669;
color: #999;
background: #8fabbe;
text-align: left;
height:100%;
text-indent:-9999px;
小粋空間さんのアドバイスに従い、以上のようにheightとtext-indentを追加、これで画像へのリンクはなくなりましたが、例の白い線は解決しました。 さらに色々検索してみるとtext-indent:-9999pxは避けるべきというような記事もありますが、当方にとってはなにが問題か理解不能、とりあえずこれで様子を見てさらに勉強したいと思います。
コメントする