Qiitaでページ内リンクを使う方法（アンカーリンクの書き方）
Qiitaで記事を書くときにページ内リンクの設置を試みたのですが、思った以上に書き方のルールがあるようでかなり時間を使いました。（同じ経験をしたか、めんどくさくなってあきらめた人も多いのでは、、）
次回使うときのためにも、実例をふまえ書き方をまとめておきます。
基本の型
[アンカーテキスト](#リンク先の見出し)
└大枠の型は外部へのテキストリンクの設置と同じ
└（ ）の中が「#」＋「見出しテキスト」になる（*外部リンクはURL）
注意点
- アンカーテキストの部分が緑色になる （こんな感じ）
- 色が変えられない
- 大量の目次に使うと緑色が並び、視認性が悪い。
- リンク先に設定できるのは見出しのみ
- 見出し：#で始まる本文テキスト（h1~h6相当）
- h1～h6タグには使えない
- ( )の中に記述する「#」は常に１つ
- リンク先の見出し設定してある数に依存しない
- 例：「###h3タグ相当」のような見出しにリンクを設定する場合も「#」は1つ
- ( )の中で使えない記号がある
- ※本文中の見出しコピペ注意（コレでハマった、、）
- 記号は半角、全角によらず使えない ⇒ 記号は削除 ※一部例外あり
- 全角空白は使えない ⇒ 全角空白は削除
- 大文字のアルファベットは使えない ⇒ 小文字に変換
- 半角空白は使えない ⇒ 「-」ハイフンに置き換え etc...
- [ ]の中は文字列なので気にする必要なし
- [ ]の中の文字と( )の中の文字を合わせる必要はない
- markdownの記法（.mdファイル内）とQiita内では一部ルールが異なる
##書き方要点まとめ
- 「#」の数 ⇒ １個
- 記号 ⇒ 削除
- ハイフン ⇒ そのまま
- アンダーバー ⇒ そのまま
- 半角スペース ⇒ 「-」ハイフンに変換
- 全角スペース ⇒ 削除
- 数字 ⇒ そのまま
- 大文字アルファベット ⇒ 小文字に変換
- 小文字アルファベット ⇒ そのまま
>-▼全角・半角文字別の詳細 - 半角記号 ⇒ 削除 （※「-」「_」は例外） - 半角アンダーバー ⇒ そのまま - 半角ハイフン ⇒ そのまま - 全角記号 ⇒ 削除（※「ー」「＿」は例外） - 全角アンダーバー ⇒ そのまま - 全角ハイフン ⇒ そのまま - 半角スペース ⇒ 「-」に変換 - 全角スペース ⇒ 削除 - 全角数字 ⇒ そのまま - 半角数字 ⇒ そのまま - 全角大文字アルファベット ⇒ 小文字に変換 - 半角大文字アルファベット ⇒ 小文字に変換 - 全角小文字アルファベット ⇒ そのまま - 半角小文字アルファベット ⇒ そのまま
## 実例で解説 次のような目次にページ内リンクを設置する場合。
補足
-リンク先の見出しはh5相当 （「#」5つ）
-見出しテキストは目次と同じとする
####目次
１. 枠：背景色グレー、テキスト黒
２. 枠：背景色黒、テキスト白（黒板）
３. 枠上部のタブ
４. 引用
５. 見出しの種類
６. CSSスタイルは認識されない
７. markdownとは
８. テキストリンクの設置方法
９. 画像の埋め込み(外部サイト）
１０. 改行や空白
１１. 箇条書き・・・番号なし(Disc型)
１２. 箇条書き・・・番号付き(Decimal型)
１３. チェックボックス
１４. 折り畳み（アコーディオン）
１５. フォントスタイル
１６. 水平線
１７. 公式ヘルプ
参考ページ（こんな感じになります）
###①「１. 枠：背景色グレー、テキスト黒」への設置
ポイント
・「１」全角数字 ⇒ そのまま
・「.」半角記号 ⇒ 省略
・「 」半角スペース（ドットの後ろ）⇒「-」ハイフン
※ソースコード上のみ(実際の表示では半角スペース省略される)
・「：」全角記号 ⇒ 省略
・「、」全角記号 ⇒ 省略
**結果と実例**
１. 枠：背景色グレー、テキスト黒 ←ページ内リンク
[１. 枠：背景色グレー、テキスト黒](#１-枠背景色グレーテキスト黒)
▼インデックス番号を黒くする場合
１. [枠：背景色グレー、テキスト黒](#１-枠背景色グレーテキスト黒)
▼アンカーテキストは自由。
[１つ目の題目へのリンク](#１-枠背景色グレーテキスト黒)
###②「２. 枠：背景色黒、テキスト白（黒板）」への設置
ポイント
・「（」全角記号 ⇒ 省略
・「）」全角記号 ⇒ 省略
・「２」全角数字 ⇒ そのまま
・「.」半角記号 ⇒ 省略
・「 」半角スペース（ドットの後ろ）⇒「-」ハイフン
・「：」全角記号 ⇒ 省略
・「、」全角記号 ⇒ 省略
**結果と実例**
２. [枠：背景色黒、テキスト白（黒板）](#２-枠背景色黒テキスト白黒板)
###③「３. 枠上部のタブ」への設置
ポイント
・「３」全角数字 ⇒ そのまま
・「.」半角記号 ⇒ 省略
・「 」半角スペース（ドットの後ろ）⇒「-」ハイフン
**結果と実例**
３. 枠上部のタブ
３. [枠上部のタブ](#３-枠上部のタブ)
４～５も同じルールで適用可
###④「６. CSSスタイルは認識されない」への設置
ポイント
・「CSS」大文字アルファベット ⇒ 小文字に変換
・「６」全角数字 ⇒ そのまま
・「.」半角記号 ⇒ 省略
・「 」半角スペース（ドットの後ろ）⇒「-」ハイフン
**結果と実例**
６. [CSSスタイルは認識されない](#６-cssスタイルは認識されない)
###⑤「１１. 箇条書き・・・番号なし(Disc型)」への設置
ポイント
・「Disc」大文字と小文字 ⇒ 大文字を小文字に変換
・「(」半角記号 ⇒ 省略
・「(」半角記号 ⇒ 省略
・「・」全角記号 ⇒ 省略
・「１１」全角数字 ⇒ そのまま
・「.」半角記号 ⇒ 省略
・「 」半角スペース（ドットの後ろ）⇒「-」ハイフン
**結果と実例**
１１. [箇条書き・・・番号なし(Disc型)](#１１-箇条書き番号なしdisc型)
これまでの条件を使えば、他の目次もアンカーテキストにできる
##ページ内リンクテスト用
#####１. 枠：背景色グレー、テキスト黒
#####２. 枠：背景色黒、テキスト白（黒板）
#####３. 枠上部のタブ
#####４. 引用
#####５. 見出しの種類
#####６. CSSスタイルは認識されない
#####７. markdownとは
#####８. テキストリンクの設置方法
#####９. 画像の埋め込み(外部サイト）
#####１０. 改行や空白
#####１１. 箇条書き・・・番号なし(Disc型)
#####１２. 箇条書き・・・番号付き(Decimal型)
#####１３. チェックボックス
#####１４. 折り畳み（アコーディオン）
#####１５. フォントスタイル
#####１６. 水平線
#####１７. 公式ヘルプ