サイドバーには最新コメントや最新トラックバックのリンクがあるのですが、このURLは
http://matatabi.homeip.net/blog/setomits/466#comment571
と、あるエントリのコメントなりトラックバック自体のアンカーをさすようになっています。この場合、リンクをクリックしてページが遷移して途中までスクロールされているけど、どこが該当箇所なのかわからないことがあります。
そんなおり、ハテナオヤさんのtDiary は未来を先取りした日記ツールにて、tDiaryのhilightプラグインWeb Interface Design Tip: The Yellow Fade Techniqueに行き当たったので、JavaScript を使って The Yellow Fade Technique 風なUIにしてみました。例えば、上記のhttp://matatabi.homeip.net/blog/setomits/466#comment571を見てみると、
Re: コメントスパム弾き実験 2
の部分の背景色が徐々に変わります。

追記: 19:40
タイトルの部分だけだとちょっとわかりにくいかなと思い、コメント全体の背景色が変わるように変更しました。
ということで、したこと。
COREBlog インスタンスのコンテンツから、次の3つを変更しました。

- comment_body
<div class="comments-title">

<div class="comments-title" id="#comment<dtml-var id>">
に。

- trackback_body
<div class="trackback-title">

<div class="trackback-title" id="#trackback<dtml-var id>">
に。

- entry_html
<dtml-in comment_list> や <dtml-in trackback_list> が終わった後(僕はサイドバーの後に持ってきてますが)に、
<script type="text/javascript">
var fcs = window.location.hash;
if(fcs.length) {
  var colors = new Array("#FF5511", "#FF6622", "#FF7733", "#FF8844", "#FF9955",
                         "#FFAA66", "#FFBB77", "#FFCC88", "#FFDD99", "#FFEEAA");

  function change_color(num) {
    if (num == colors.length)
      return;

    document.getElementById(fcs).style.backgroundColor = colors[num];
    setTimeout("change_color(" + String(num+1) + ")", 300);
  }

  change_color(0);
}
</script>
というコードを挿入。

この例では色は10色用意していて、切り替えは300ミリ秒ごとに行っています。
このあたりは使用する環境に応じて。

追記: 19:41
タイトルだけでなく、コメント全体の背景色が変わるようにしました。ということで、

- comment_body
<div class="comments-title">
ではなく、1行上の
<div class="comments-body">
の方を
<div class="comments-body" id="#comment<dtml-var id>">
に。

- trackback_body
<div class="trackback-title">
ではなく、1行上の
<div class="trackback-body">
の方を
<div class="trackback-body" id="#trackback<dtml-var id>">
に。

- entry_html
また、色合いもスタートの色をもうちょい薄いところから始めるように変更しました。
まあそれぞれで環境は違うし、どうでも良いことですね。
Posted by setomits at 02:37 | Comments: 0
Leave a comment
Required fields are marked with *
search
calendar
Jul 2009
SunMonTueWedThuFriSat
   1234
567891011
12131415161718
19202122232425
262728293031 
archives
photos on flickr
www.flickr.com
bookmarks on delicious