CALENDAR
S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< May 2019 >>
SPONSORED LINKS
ARCHIVES
CATEGORIES
Pookmark Airlines
MOBILE
qrcode
<< タイトル文字列を画像に置き換えてみる | main | アクセス解析が付きました >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
タイトル文字列を画像に置き換えてみる #2

背景透過画像をタイトルに貼るときは前のやり方だと、タイトル文字列が透けて見えてしまいます。

今変更したウチの例だと、下記の通り…。

この方法は、もちろん背景非透過の画像でも有効ですが、ユーザーが画像非表示のときにタイトルが全く表示されないとことになって、最初の例よりはユーザビリティの観点では劣ります。

尚、WindowsXPのIE6, Opera7.23, Firefox0.8の各ブラウザで表示確認を行っています。


テンプレート

<h1 class="site_title"><a href="http://kyorecoba.jugem.cc/">{blog_name}</a></h1>
<div class="titile_banner">
<a href="http://kyorecoba.jugem.cc/"><img src="http://kyorecoba.jugem.cc/?image=9" alt="titlebanner" width="320" height="60" border="0" /></a></div>


CSS

.site_title{
 position:relative;
 text-indent:-1000px;
}

.title_banner{
 position:absolute;
 top:10px;
 left:10px;
}
| Blog | 20:30 | comments(1) | trackbacks(1) |
スポンサーサイト
| - | 20:30 | - | - |
コメント
どうにか綺麗に訂正出来ました。
ありがとうございます。
修正しましたので、またご覧戴けると幸いです。
| ひろい | 2004/05/13 10:15 AM |
コメントする









この記事のトラックバックURL
http://kyorecoba.jugem.cc/trackback/31
トラックバック
ブログのタイトル設定修正
≪テンプレート≫ <h1 class=\"site_title\"> <a href=\"http://numb.jugem.cc/\">{blog_name}</a></h1> <div class=\"title_banner\"><a href=\"http://numb.jugem.cc/\"><img src=\"http://numb.jugem.cc/?image=21\"
| 呟 戯 | 2004/05/13 10:24 AM |