はじめに
Qiitaでは見出しを#を使って書くと思いますが、
投稿するとこれを検知して、ページ右側に自動で目次を作ってくれます。
（モバイル版だと出ないとかの記述も見られますが。）
それとは別にページ内に目次を作りたい人へ。
実際には目次というより、見出しへのハイパーリンクを利用するというイメージ
目次
1.目次の書き方
2.特殊ルール
2-1.アルファベットに関するルール
2-2.スペースに関するルール
2-3.特殊文字に関するルール
3.現状まとめ
4.今後この記事を見なくてよくなる方法
目次の書き方
基本的には以下のような形式です。
[目次に表示したい文字列](#実際の目次の文字列)
-------------------------------------------------------------------
# 実際の目次の文字列
1行目が目次部分で、2行目が実際の見出し部分。
例えば
[１．第1章](#いちばん)
-------------------------------------------------------------------
# いちばん
と書くとこんな感じ。
↑ これを押すといちばんという見出しのところへ飛ぶと思います。
[]の中はなんでもよくて、()内の#以降の文字と見出しを合わせればいいです。
特殊ルール
自分がこのリンク生成作業をやっていて発見したルールを共有します。
見つけ次第どんどん追加していきます。
アルファベットに関するルール
見出しがアルファベットで
# SECOND
だった場合、リンクは以下のように小文字で書きます。
[２．第2章](#second)
２．第2章 ← #SECOND
２．第2章 ← #second
つまり
見出しでアルファベット大文字を使った際は、リンクに書く#以降の文字列はすべて小文字にする必要があります。
スペースに関するルール
見出しが半角スペースを用いて
# さん-ばん
だった場合、リンクは以下のように半角スペースを-に置き換えて書きます。
さっきのおさらい、Cは小文字ですよ！
[３．第3章](#さん-ばん)
３．第3章 ← #さん-ばん
[３．第3章](#さん ばん) ← #さん ばん
つまり
見出しで半角スペースを使った場合、リンクでは-に置き換える
見出しで全角スペースを用いた場合のリンクの作り方は分かりませんでした。
できなそう？
特殊文字に関するルール
見出しが特殊文字(+ , % , $ , ドット 等)を用いて
# 4.よんばん+よんばん&よんばん
だった場合、リンクでは特殊文字をすべて消去します。
[４．第４章](#4よんばんよんばんよんばん)
見出しで特殊文字 を使った場合、リンクでは特殊文字を消去する
ハイフン(-)に関しては消去しない！！！
いちばん
SECOND
さん ばん
4.よんばん+よんばん&よんばん
現状まとめ
| 見出しに含む文字 | リンクを書くときのルール |
|---|---|
| アルファベット大文字 | 小文字で書く |
| 半角スペース | -で補完する |
| 特殊文字 | 消去する(例外あり) |
今後この記事を見なくてよくなる方法
実はどんなリンクにすればいいのかは自分で分かってしまうんですよね。
Qiitaって書いているときに右側にプレビュー画面が出てくると思います。
で、エディタ側で#を使って見出しを作っている場合、見出しの文字列がそこに表示されますね。
プレビュー画面でその見出しにカーソルを合わせると、見出しの左側に小さく
こんな感じのマークが出ると思います。
それを押すと、ブラウザ上でURLが表示されます。
例えば
https://aiita.com/drafts/xxxxxxxxxx/edit#title
のように出ます。この最後の#以降が、いわゆる目次に書くべき文字列なのです。
これさえ知ってれば、もう「リンクに見出しが飛ばない！」なんてことにはなりません！