2009-02-01

はてなダイアリーの脚注をその場で表示する UserCSS

はてなダイアリーの脚注機能は簡単で便利なのだが，簡単なあまり多用しがちである。脚注が多いと下に行ったりまた戻ったり面倒この上ないので，なるべく少なくするように心がけている。
a 要素に title が付いているのでマウスを乗せるとツールチップが出るのでその場でも読めるが，やたらと横長になって読みにくい。というわけで，脚注をマウスでポイントすると右下の方に内容が出るようにする UserCSS。Opera で動く。Firefox ではなんだか期待通りに動かない。
（09/2/4追記）CSSのコメントを少し変更。
（09/03/03追記）":after"を"::after"に変更。z-indexを追加（サイドバーに隠れたりしないように）。

/* はてなダイアリーの脚注を画面右下に表示 */
/* http://d.hatena.ne.jp/a27sst/20090201#p1 */
@charset "utf-8";
span.footnote a:hover::after {
  content: attr(title);
  display: block;
  position: fixed;
  right: 0px;
  bottom: 20px;
  width: 300px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.2;
  background-color: #333;
  color: #fff;
  opacity: 0.9;
  z-index: 100;
}