読者です 読者をやめる 読者になる 読者になる

Noblesse Oblige 2nd by iGCN

湘南生まれ湘南育ちだけどサーファーではありません。しぞーかじん歴4年。最近アラがとれたアラフォーのおっさんです。サザンオールスターズと加山雄三が好きです。でも横山剣さんの方がもっと好きです。

はてなブログで(手動で)記事に目次をつける方法

さて

はてなブログでいろいろな方の記事を読むにつけ、格好良いなぁと思っていたのが記事の冒頭に挿入される目次だ。

自分の書く記事は大体800-1000文字くらいのものが多いからさして必要でもないのだけど、時たま興が乗ると3000文字近くのながーい記事を書いてしまうこともあり、そういうときは目次があると読む人は読みやすいだろうなぁと思っていたのだ。

Markdown記法でブログ執筆

自分ははてなブログで真剣に記事を書き出して(毎日更新チャレンジを始めて)からは、Markdown記法で記事を書いている。

具体的には、OSX用のMacDownというMarkdownエディタを使って記事を書いている。

このアプリは、Markdown記法で文章を書きながら、リアルタイムでプレビューが表示されるので重宝している。

目次の書き方

Markdown記法で、なんとか「目次」を作れないかといろいろ検索、試行錯誤した結果、たどり着いたのがこちらの記事だった。

gigatype.net

そもそも目次で実装したいことは、読みたい項目の部分をクリックすれば、ページ内の該当する箇所に飛ぶということで、これを専門用語でアンカーリンクと言うらしいと知った。

具体的な記法としてはこうだ。

まず、目次に該当する部分は以下のように書く。

[第1章](#anchor1)
[第2章](#anchor2)
[第3章](#anchor3)

次に、目次をクリックした際に飛ぶリンク先は以下のように設定

<a id="anchor1">第1章</a>
記事本文:あるところにおじいさんとおばあさんが住んでいました。

<a id="anchor2">第2章</a>
記事本文:こうして桃太郎は鬼退治をしました。

<a id="anchor3">第3章</a>
記事本文:僕のお父さんは桃太郎というやつに殺されました。

実際にどう見えるか

実際にはこう見えます(飛んでいる様子が分かりやすいようにスペースを空けるために画像を挿入しました)。

目次

第1章
第2章
第3章

本文

第1章
あるところにおじいさんとおばあさんが住んでいました。 f:id:iGCN:20150620194211j:plain

第2章
こうして桃太郎は鬼退治をしました。 f:id:iGCN:20061230102537j:plain

第3章
僕のお父さんは桃太郎というやつに殺されました。 f:id:iGCN:20150620194302j:plain

面倒だけどちゃんと動いている

正直手動でやるのは面倒くさいのだけど、チャンと動いているようだから良いかなと。

はてなブログ x 目次」で検索すると、目次を自動で作成する方法はいっぱい出てくるのだけど、CSSとかJAVAとか難しいことがいっぱい書いてあって自分には無理目だなと思ったので手動でやる方法を模索した結果の、自分メモ的記事でした。

htmlやプログラミングに精通している方には無用の記事かも知れません。何か間違っている所があったらご指摘いただければ幸いです。

では