Markdownでのアンカーリンクの活用と目次の作成方法（テンプレ）
追記：本記事ではHTMLの基本に従って目次を付ける方法を記していますが、 2015年9月9日から新しく簡単にはてなブログに目次をつける記法が追加されました。 その点については emeraldwar.hatenablog.com
で新しくまとめ直しました。よければ御覧ください。
ちょっとした自分用のTipsです。 ただ、もしかしたらもしかしたら同じような部分で迷ってらっしゃる方がいて、 もしかしたら自分のようなHTML初学者にもすぐにわかるように書かれたサイトが見つからずに 困っている人がいるかもしれないので、テンプレ化して載せておく次第です。
実際のレイアウト
完成形は以下の様なレイアウトとなります。
あとややこしいのでこの記事には目次つけません
================================================= =================================================
目次
第1章
第2章
================================================= =================================================
上記のような感じになります。
テンプレ
テンプレは以下。これをそのまま貼っつけて適宜改変してください。
<a id="index"></a> ## <a href="#index">目次</a> * [目次](#index) * [第1章](#anchor1) * [第2章](#anchor2) <a id="anchor1"></a> ## <a href="#anchor1">第1章</a> <!--この下に第1章の内容を書きます。--> どうも、谷村新司です。 それでは聴いてください。[「サライ」](#SingTanimura) <!--この上に第1章の内容を書きます。--> <a id="anchor2"></a> ## <a href="#anchor2">第2章</a> <!--この下に第2章の内容を書きます。--> <a id="SingTanimura"></a> <a href="#SingTanimura">さくらふぶきのぉ〜</a> サライの空はぁ〜 <!--この上に第2章の内容を書きます。-->
初心者向けのちょっとした解説
要は「どこでもドア」を
[どこでもドア](#ikisaki)
で設置して、到着地点に
<a id="ikisaki"></a> ## <a href="#ikisaki">到着地点！！</a>
を書いておけばいいというだけの話です。注意すべきなのは、この「どこでもドア」のほうを「アンカーリンク」と呼び、到着地点を「アンカー」と呼ぶのですが、到着地点である「アンカー」の方はmarkdownでは書けないのでこのようにHTMLで書く必要が出てきます。
（タイトルでMarkdownで目次をつくるというように書いていますが厳密にはHTMLとMarkdownを合わせて作っています。）
と、ここまで書きましたが、実はなんと、上のテンプレではテキストがアンカーになっていますが、これはわざわざテキストで指定しなくても良いのです。なので目次の作成例としては下のようにも書けますし、こっちのほうが使いやすいって人が多いのではと。（というか自分はこっちのほうが使うのですが、説明は上の方が簡単？なので先ずは上のようなテンプレを載せました。） この方がHTMLの記述にMarkdownの##をかぶせるという気持ち悪い書き方にならなくてスッキリする気がします。 同様に工夫すれば簡単に「目次へ戻る」なんてのも作れますよね♪
<a id="index"></a> <a href="#index"></a> ## 目次 * [目次](#index) * [第1章](#anchor1) * [第2章](#anchor2) <a id="anchor1"></a> <a href="#anchor1"></a> ## 第1章 <!--ここに第1章の内容を書きます。--> <a id="anchor2"></a> <a href="#anchor2"></a> ## 第2章 <!--ここに第2章の内容を書きます。-->
どうでもいいですけどはてなブログでMarkdownでインラインコード書く時にmarkdownって指定できたんですね。知りませんでした。ちなみに最近確かswiftも対応されました。
追記。。。
実はちょっとした落とし穴があって（
自分でもやってみてから気づいたとか言えない）、もし自分のブログのトップページに複数の記事を表示されてる方は、全てのブログのアンカーの名前を異なるものにしておかないと、同一名のアンカーが同一ページに複数存在することになり、クリックした時に望み通りの場所に飛ばないなんて事件が発生します。これを防ぐにははてなブログの設定でトップページに1件しか記事を表示しないようにするか、ブログの全ての記事の中で使うアンカーの名前を異なるものにするしか無いっぽいです。例えば、記事Aの一章は<a id="Aanchor1"></a>で、記事Bの一章は<a id="Banchor2"></a>にするとか。JavaScriptとか使えばいけるかもですがそのへんはまた試してみます。
