記事タイトルの行頭（H3のspan.sanchor）にマークを表示

cssで記事タイトル（H3）のspan.sanchorにアスタリスク風マークを表示させました。ここは本来■にPermalink（個別記事）がリンク先として設定されている部分（参考）。これをFahrner Image Replacement（cssで文字を画像に置き換える方法）を使って、■をに置き換えています。

.section h3 .sanchor {
display: block ;
width: 17px ;
background: url("http://saito-kazuo.pupu.jp/hatena/images/bg_sanchor.gif") no-repeat left center ;
color:#fff ;
text-indent: -9999px ;
float: left ;
clear: left ;
cursor: pointer ;
}

これまではspan.sanchorに"display: none"と設定して何も表示させていませんでした。でもこれだとPermalinkに移動するためには記事下の「Permalink | コメント(0) | トラックバック(0) 」のどれかのリンクをクリックしなきゃいけない。まーそれもイマイチかな？と思いまして。

ところでアスタリスク（*、asterisk）という文字は、書体によって足が5本だったり6本だったりすることに気が付きました。キーボードに刻印されているのは6本ですが私が使った書体では5本でした。