Bonjour!

« サイドバーの見出しの下線や枠も非表示にするjavascript:修正しました | トップページ | 使用容量:9カ月で5.44MB(18.13%) »

2004-09-01

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

ページの途中にあるアンカー部分にリンクを張りたいんだけど、いちいち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の方は、それもあった方が便利かもしれませんね。

« サイドバーの見出しの下線や枠も非表示にするjavascript:修正しました | トップページ | 使用容量:9カ月で5.44MB(18.13%) »

ウェブログ・ココログ関連」カテゴリの記事

コメント

おぉぉお!
(ノ゜ω゜)ノ*.
これ、むちゃくちゃ便利ッすねぇ♪

>でも、いちいちソースを見るのが面倒ですよね。

↑えぇ。まさしくそう思っておりました。
これからは訪問者さんのコメントに直リンクを張りたい時とか大活躍しそうですよ。

facet さん。いつもお世話になります。
(人-)謝謝

ろぷさん、お役に立てて良かったです。さっそくブログにも適用していだいたようで。_(._.)_

それで、気がついたんですが、そういえばトップ(メイン)ページの記事タイトルの上にもアンカーが隠れてるんでしたね(拙作「本文の折り畳み」を使っていると消えるので忘れてました)。

今回のスクリプトをサイドバーに仕込む場合、トップ(メイン)でも顕在化してしまうのは、ちょっと問題ですね。時間が経つと、その記事タイトルの上にあるアンカーを使ったURLは存在しなくなってしまいますからねぇ。

どうしようかな。ちょっと考えてみます。

いろいろ考えた結果、Typepad系のブログでサイドバーにこれを埋め込む場合、記事別ページ以外では不要だろうという結論に達しました。

ということで、差し替える場合は、スクリプトをコピー&ペーストしなおして反映させてください。_(._.)_
# スクリプト→http://facet.cocolog-nifty.com/divers/2004/09/post.html#showHiddenAnchors

また、外部ファイルを呼び出す方式の場合は、コピペするのは下記だけでOKです。

script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/showHiddenAnchors01b.js"
/script

という感じでどうでしょうか?>ろぷさん

# と、このコメントを書いていて気がついたんですが、idが一意になるようにすることさえ気をつければ、本文にもアンカーを仕込んで飛ばせて便利かも。

どもです。
一応、コピペし直してみました。
その場合はやっぱりトップページのアンカーは変わらず表示されてたみたいです。

んで今日、この記事の本文中でおっしゃられてる「三行目あたりの//」を消してみたらトップがすっきりしました。

理由はわかりませんが、「//」を直接消す方が効果あるみたいですね。

ろぷさん、ごめんなさい。

後から//を記事の方に書き足したのに、こちらのコメントの方を書き直すのを忘れていました。_(._.)_

javascriptでは、//があるとその行のそれ以降の命令が無効になっちゃうんですけど、「記事別ページ」以外を対象外にするために付け足したその一行が無効になってるんだから、挙動が前と全く同じだったというわけで……。てへへ(^^;。お手数お掛けしました。

この記事へのコメントは終了しました。

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/1941/1334924

この記事へのトラックバック一覧です: 隠れているアンカーをリンク化して表示:

« サイドバーの見出しの下線や枠も非表示にするjavascript:修正しました | トップページ | 使用容量:9カ月で5.44MB(18.13%) »

contact

検索

無料ブログはココログ
2017年3月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

BANNERS