Create  Edit  Diff  FrontPage  Index  Search  Changes  RSS  Login

リンク元をたどっても、どこの話題かわからないんですけど

ほぼすべての日記システムに言えることですが、日記間リンクで相手の日記に飛んでも、どこで自分の日記が話題にされているのかわかりにくいことがあります。よく見るとアンカーにフォーカスが当たっていたりするのですが、識別しにくいことが多いです。

tDiaryに限ったTipsではありませんが、JavaScriptがサポートされているブラウザを対象にしたよいアイデアがあるので紹介しておきます。以下のスクリプトがそうです。これをtDiaryの場合には@footerにでも入れておくと、ジャンプした先のサブタイトルや段落がが赤い背景で一目瞭然になります。最初の方にあるhiliteStyleをいじると色などを変更できます。

※なお、このJavaScriptはtDiaryではプラグイン化されています。1.5.6以降ではhighlight.rb?という名前です(それ以前はnazo.rb?)。

<script language="JavaScript"><!--
var hiliteStyle = new Object();
hiliteStyle.color = "#fff";
hiliteStyle.backgroundColor = "red";

var hiliteElem = null;
var saveStyle = null;

function hiliteElement( name )
{
  if( hiliteElem ) {
    for ( var key in saveStyle ) {
      hiliteElem.style[key] = saveStyle[key];
    }
    hiliteElem = null;
  }

  hiliteElem = getHiliteElement( name );
  if ( !hiliteElem ) return;

  saveStyle = new Object();
  for ( var key in hiliteStyle ) {
    saveStyle[key] = hiliteElem.style[key];
    hiliteElem.style[key] = hiliteStyle[key];
  }
}

function getHiliteElement( name )
{
  for ( i = 0; i < document.anchors.length; ++i ) {
    var anchor = document.anchors[i];
    if ( anchor.name == name ) {
      var elem;
      if ( anchor.parentElement ) {
        elem = anchor.parentElement;
      }
        else if ( anchor.parentNode ) {
        elem = anchor.parentNode;
      }
      return elem;
    }
  }
  return null;
}

if( document.location.hash ) {
  hiliteElement( document.location.hash.substr( 1 ) );
}

hereURL = document.location.href.split( "#" )[0];
for( var i = 0; i < document.links.length; i++ ){
  if( hereURL == document.links[i].href.split( "#" )[0] ){
    document.links[i].onclick = handleLinkClick;
  }
}

function handleLinkClick()
{
  hiliteElement( this.hash.substr( 1 ) );
}
// --></script>

このスクリプトのアイデアはあづみさん、上記のコードはZnZさんのスクリプトをりゅうさんが改良したものを、ただがtDiary向けに少しシンプルにしたものです(ややこしい)。ちなみに執筆現在、このスクリプトの名称は「謎JavaScript。最終形態」で、正式名称募集中らしいです。

Last modified:2007/04/12 22:19:06
Keyword(s):
References:[FAQ] [PluginList]