隠れているアンカーをリンク化して表示

ページの途中にあるアンカー部分にリンクを張りたいんだけど、いちいちHTMLソースを見るのは面倒だよなあと思ったことはありませんか？

そんな時に役立つbookmarkletを作ってみました。下のリンクをブックマークに登録して、隠れているアンカーを表示させたいときに使ってください。

隠れているアンカーをリンク化して表示

このbookmarkletを使うと、隠れたアンカーのある所に「■」が現れると同時にリンクが張られるので、それをクリックしてアドレスバーからURLをコピーしたり、右クリックメニューからアドレスをコピーできるようになって便利です。

# ただし、aタグしか見てないので、divに設定されているidなんかには反応しません。

また、これは、自サイトのHTMLソース内に埋め込むことも可能です（このブログでは、右サイドバーに埋め込んでみました）。サイトに埋め込みたい場合は、以下のようなスクリプトを、できるだけ最後の方に埋め込んでください。

# ココログやブログ人などのTypePad系の場合に記事別ページだけで隠れているアンカーを表示させたい場合には、以下のスクリプトの三行目あたりの if の前にある // を消してから御利用ください。

<script type="text/javascript">
<!--
showHiddenAnchors();
function showHiddenAnchors() {
	if(!document.getElementById('more'))return;
	var E = document.getElementsByTagName('*');
	for(var i = 0,e; (e = E[i]); i++){
		if((e.nodeType == 1)&&(e.nodeName.match(/^a$/i))&&(!e.href)&&(e.id || e.name)&&(!e.firstChild)){
			var hash = '#';
			hash += (e.id) ? e.id : e.name;
			e.innerHTML = '■';
			e.title = hash;
			e.href = hash;
		}
	}
}
-->
</script>

# このサイトでは、外部ファイルを呼び出す形にしています。
→showHiddenAnchors01a.js
→showHiddenAnchors01b.js

bookmarklet、jsとも、マークの「■」は、お好みで変更してください。

# 「■」にしたのは単に私が「■Guild」の（似非）組合員だからです(^^)

---

（余談）

ココログなどの記事別ページにつくコメントには、冒頭に隠されたアンカーがついていてそれぞれ固有のIDが振られていているので、HTMLソースをみることでそこに直接リンクを張ることができます。でも、いちいちソースを見るのが面倒ですよね。

幸い、私が使っているブラウザ（Firefox）には、「View Selection Source」という右クリックメニューがあって、選択した部分だけのHTMLソースを表示させることができるので割合簡単なんですが、それでも面倒だなあと思うことはよくあります。

このブログでは、その手間を省いてもらうため、トラックバックやコメントの冒頭に隠れているアンカーを表示するjavascriptを埋め込んだりしたこともあったんですが、動作がとても重かったので外してしまっていました。

で、今回、新しく作りなおしてみたわけですが、結構良さそうな感じ。すごく単純なスクリプトにしたのが良かったみたいです。

その余波でbookmarklet化することも思い付いたんですが、これがかなり便利〜。これなら、どんなページででも、隠れているアンカーをとることができますからね〜。viva! bookmarklet!

また、divにあるidなんかも取れるともっといいかもとも思ったんですが、ココログだとサイドバーに埋め込んだ時にうるさくなりすぎそうなのでやめました。bookmarkletの方は、それもあった方が便利かもしれませんね。