目次っていりますか？ ちなみに僕は 必要派 です。
見出し一覧があると、だいたいどんな記事かが想像つきますし、とくにウチみたいな自称技術系ブログだと、知りたい部分だけ（コードとか）見れればいんだよ！っていうかたも多々いらっしゃると思います。

僕も他のサイトさんでお世話になるときなんかで、とくに良記事だとなんどもなんどもアクセスし、都度必要なところだけ記事内検索かけたりもするんですが、やっぱり目次があるブログさんだとその手間も若干省けるしいいんですよね。
そして目次を毎回自動で作ってくれて、かつ今まで書いた記事も全てかってに作ってくれたらいいですよね！ね？

ということで、以前も似た記事は書いたんですが、ブログ新装にともなって、よりスマート版になったオートマティックMOKUJIをどうぞ！

サンプルコードです

[javascript]

/* =========================================================
【ページ内リンク】 と 【目次】 を自動生成
========================================================= */

var list; // 目次を入れる変数

jQuery("h3").each(function(i){
var idName = "mokuji" + i;
jQuery(this).attr("id", idName);
list += ‘<li><a href="#’ + idName + ‘">’ + jQuery(this).text() + ‘</a></li>’;
});

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

/* =========================================================
スムーススクロール
========================================================= */
//クリックイベント発火
jQuery("[href*=’#’]").click(function() {
var t = jQuery(this).attr("href");
var off = jQuery(t).offset().top;

jQuery(‘html, body’).animate({
scrollTop: off
}, 800, "easeOutQuart");
return false;
});

[/javascript]

見出しに連番でIDを振る

まずは記事内の各見出し（サイトによってはh2だったりh3だったりすると思います。ここでは見出しをh3とします。）を順繰りで抽出して、それぞれのh3にIDを振ります。

ID割り振りのルールは
【mokuji】＋【連番】
とします。

[javascript]

jQuery("h3").each(function(i){
// ~~~~~~
});

[/javascript]

h3を全て取得します。【each】で繰り返し文を行い、h3を上から順にひとつずつ 無くなるまで処理します。

[javascript]

var idName = "mokuji" + i;

[/javascript]

変数【idName】に、「mokuji」 の文言と 末尾に連番の数字を付けます。

[javascript]

jQuery(this).attr("id", idName);

[/javascript]

先ほどの【each】でh3をひとつずつ順繰りに処理させているので、【jQuery(this)】 で現在処理中の【h3】を指定しています。そして【現在処理中のh3】の【ID】を【変数 “idName”】に入れ替えています。（元々ID指定が無ければ新規でIDを指定します。）

これで全ての見出しにIDを振ることができました。

見出しリスト（目次の項目）をつくる

ここでは目次を作成するにあたっての リストを作成します。要点としては、クリックしたときに見出しにジャンプするように、IDの頭に【#】をつけ、先ほど見出し（h3）に付けた連番のIDとリンクするようにします。

[javascript]

list += ‘<li><a href="#’ + idName + ‘">’ + jQuery(this).text() + ‘</a></li>’;

[/javascript]

【jQuery(this)】に【text()】をメソッドチェーンでつなげると、【現在処理中のh3】のテキスト、つまり見出しの文章を抽出できます。

それを【a要素】で囲みます。IDは先ほどh3本体に付けたID【idName】と 頭文字に【#】を付けます。

そしてそれらを【li要素】で囲みます。

最後に、今つくったHTML要素を【変数 list】 に入れます。このあとも次々とh3要素が無くなるまで繰り返しする作業なので、【+=】で次々に【変数 list】へ足していけるようにしておけば完成です。

目次 をつくる

[javascript]

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

[/javascript]

あとは目次の本体をつくります。【if】で見出し（今回はh3）があるかどうか判定し、見出しがあれば目次を生成します。

先ほどつくったリスト【変数 list】を【ul】で囲みます。お好みでタイトル的なものを入れてもいいと思います。（このブログでは【<strong>- 目次 -</strong>】のところ）

このブログでは、本文の頭に目次をつくりたかったので、最初のp要素の前に生成するようにしました。（append）

あとは適宜 CSS等で見た目を調整してみてください！

以上、こんな感じでニューLogicAテーマの見出しを作っております！実物の目次はこの記事の頭にありますので、よければ参考までにどうぞ。

スムーズスクロールは次回書きます

ちょっと長くなってきたので、スムーズスクロール編は次回へ分けます。

次は 見出しを自動で目次化して クリックするとスムーズにスクロールさせる（スムーズスクロール編） | LogicA で解説していますので、よろしければお願いします！

以上、@dutchisover　でした！