読者です 読者をやめる 読者になる 読者になる

はてなスターのユーザー名をCSSだけで強引に表示

なんとなくブログの見た目を少しいじった(テスト前になると部屋を片付けたくなるアレ)。
シングルカラムだと横に間延びするのは前から気になってたので、max-widthを1000pxで設定して、あとフッターをシンプルに。

で、はてなスターってデフォルトだとマウスを乗せるまで誰のだかわからないのが気になってて、自分ではGreasemokey Scriptでユーザーのアイコンに置き換えてるんですが(hatena big profile star)、そういうことをしてない多くの人はが並んでいるだけで、わかりにくいなーと。
ってことで、装飾してやろうと思ったけど、CSSだけだとやはり厳しい。まあ、IEを考えなければ(IEだと普通の表示のまま)ってことで、afterとか使って強引にIDを表示してみた。
CSSはこんな感じ(ネガティブなtext-indentとoverflow:hiddenというよくあるバッドノウハウ)。

span.hatena-star-star-container a[href^="http://d.hatena.ne.jp/"]:after{
  font-size:11px;
  color:#666;
  content:attr(href);
  display:inline-block;
  overflow:hidden;
  text-indent:-11.5em;
  font-family: "Consolas", "Inconsolata", "Menlo", monospace;
}

追記:リンク先がはてなダイアリー以外だと残念なコトになるのにも対策した
で、こんな感じに。
f:id:os0x:20110103025409p:image
おっと、グリモンが効いてた。
f:id:os0x:20110103031021p:image
IEも8-9で標準モードを強制すればちゃんと見える。Operaはちょっと変…。
しかし、有料オプションでもいいからDOCTYPEの選択ができるようになってほしいな。