（2013/5/19 追記）
※ この記事の書き直し記事を作りました。jQueryだけでWordPressプラグイン未使用版です。よろしければ 見出しを自動で目次化して クリックするとスムーズにスクロールさせる（見出し→目次編） | LogicA からどうぞ！

今回は この　↑　にあるような、目次を自動生成する方法をまとめます。いわゆるページ内リンクというやつです。

これがあると、ページの頭の段階で この記事がどれくらいの長さか、とか 欲しい情報がある記事なのか、とか いろいろとパッと見てわかるので個人的には設置しているブログは好きです。なので導入しております。ユーザビリティというやつです。

ページ内リンクのしくみ

通常の外部リンクの場合、aタグで囲って href という属性に URLを入力します。と、書くとややこしく見えますが、実際はこんな感じです。

[html]

<a href="http://logic-a.com/wp">ロジカのトップページです！</a>

[/html]

これを実際のHTMLで書き込むと、↓のように

ロジカのトップページです！

となります。普通のリンクのタグです。URLに指定しているのが 今居るページではない、外のサイトのURLを指定しているので もちろん指定された外のサイトへつながります。

このURLの指定を 今居るページの中の場所を指定することで、そこへジャンプさせます。コードはこんな感じです。

[php]

<a href="#irasshai">ここをクリックすると飛びます</a>

<p>コンテンツがいっぱい入ります　コンテンツがいっぱい入ります</p>
<p>コンテンツがいっぱい入ります　コンテンツがいっぱい入ります</p>
<p>コンテンツがいっぱい入ります　コンテンツがいっぱい入ります</p>
<p>コンテンツがいっぱい入ります　コンテンツがいっぱい入ります</p>
<p>コンテンツがいっぱい入ります　コンテンツがいっぱい入ります</p>
<p>コンテンツがいっぱい入ります　コンテンツがいっぱい入ります</p>
<p>コンテンツがいっぱい入ります　コンテンツがいっぱい入ります</p>

<strong id="irasshai">いらっしゃい！</strong>

[/php]

これを実際にやると、 ↓のようになります。クリックしてみてください。

ここをクリックすると飛びます

コンテンツがいっぱい入ります　コンテンツがいっぱい入ります

コンテンツがいっぱい入ります　コンテンツがいっぱい入ります

コンテンツがいっぱい入ります　コンテンツがいっぱい入ります

コンテンツがいっぱい入ります　コンテンツがいっぱい入ります

コンテンツがいっぱい入ります　コンテンツがいっぱい入ります

コンテンツがいっぱい入ります　コンテンツがいっぱい入ります

コンテンツがいっぱい入ります　コンテンツがいっぱい入ります

いらっしゃい！

href属性で URLの代わりに頭に　#(シャープ)　を付けて、移動させたい要素の ID名を指定してあげると、そこまでワープするようになっています。

ちなみに 当ブログではページ内リンクに対して、スルスル動くアニメーションを別途使用していますが、通常はアニメーション無しで一瞬でワープします。

ページ内リンクの活用

その記事のおおまかな流れは、通常のブログであれば 見出しごとに区切ってあるはずです。このブログでは H3タグ を記事内の見出しにしており、目立つようにフキダシにしてます。

なので、見出しを集めれば おおよそのサイトでは目次になるはずだと思います。
要はこうしたいわけです　↓　。

[html]

<strong>目次</strong>
<a href="#midashi1">見出し その1</a>
<a href="#midashi2">見出し その2</a>
<a href="#midashi3">見出し その3</a>

<h3 id="midashi1">見出し　その1</h3>
<h3 id="midashi2">見出し　その2</h3>
<h3 id="midashi3">見出し　その3</h3>

[/html]

これでクリックすると そこまでワープできる Webならではの目次が完成するわけです！

こんなの毎回作ってられないので自動化する方法を

ですが、記事を書く度にコレを自作するのは忍びないわけです。
そこでこちらの記事と出会いました！

jQueryでページ内リンクを自動作成 | WEBプログラム覚書

こちらで紹介されているコードをほぼそのまま使用させていただきました！ありがとうございます (੭ु ˃̶͈̀ ω ˂̶͈́)੭ु⁾⁾

それがこちらです

[javascript]

var prefix = ‘inline’;
var list = ”;
$("#content h3").each(function(i){
aname = prefix + i;
$(this).before(‘<a name="’ + aname + ‘"></a>’);
list += ‘<li><a href="#’ + aname + ‘">’ + $(this).text() + ‘</a></li>’;
});

if ($("#content h3").length){
$("#content p:first").append(‘<ul id="inLink"><strong>- 目次 -</strong>’ + list + ‘</ul>’);
}

[/javascript]

スクリプトの流れはこんな感じです。

見出し(h3)を全て一つずつ取得
↓
それら一つ一つに name属性で連番を割り振る
↓
aタグで囲ってページ内リンクを連番で付ける
↓
さらに liタグで囲って、変数 list　に配列として入れ込む
↓
それらを挨拶文のあとに展開する

というふうに使用しています。これで、毎回 ページ内リンクを作らなくてもjQueryが勝手に作ってくれちゃうわけです。
スクリプトとは、楽をするために苦労することと見つけました。私見です。

以上、4連休中ずっとブログばっかり書いていた @dutchisover でした。