どうも、solobochiです。
雑記系の記事はともかく、ナレッジ・ノウハウ系の記事、私でいうとプログラミング系の記事は目次があったほうが見やすいです。
っていうのを、最近いろいろなブログを見ていて思ったので、目次をつけることにしました。
で、いろいろ調べているとプラグイン（Table of Contents Plus）でカンタンにできるらしい。
けど、プラグインなくてもカンタンにできるらしい。
だったら、プラグイン無しで実装できた方がいいでしょう。
ということで、プラグイン無しで実装してみたら、本当にカンタンでした。
では、早速。
目次
【やりたいコト】
- 記事に目次をつけたい
- プラグインを使わずに実装したい
参考にした記事：http://wispyon.com/tableof-contets-noplugin/
以下の２Stepで作成できます。
step
1目次部分のコードを作成する
step
2リンク先部分のコードを作成する
-
手順１：目次部分のコード作成
テキストエディタで目次部分を作ります。
以下のコードを貼り付ければOK。
|
1 2 3 4 5 6 7 8 |
<span style="color: #545b63;"><h2>目次</h2> <ol> <li><a href="#title1">見出し１</a></li> <li><a href="#title2">見出し２</a></li> <li><a href="#title3">見出し３</a></li> </ol></span> |
〜全行解説〜
・<h2>目次</h2>
👉目次エリアを作ります
・<ol>〜</ol>
👉番号付きリスト
※番号無しリスト：ulタグ、番号付きリスト：olタグ
└番号なしリストを使う場合は、「ul」のボタン
└番号付きリストを使う場合は、「ol」のボタン
・<li>〜</li>
👉リストの中身を記載する部分
<li><a href="#title1">見出し１</a></li>
<li><a href="#title2">見出し２</a></li>
<li><a href="#title3">見出し３</a></li>
👉目次のリンク先を設定する
・<a href=xxx>〜</a>
👉リンクボタンを作成する
※参考：HTMLタグリファレンス
これで目次部分は完了。
手順２：リンク先部分のコード作成
テキストエディタで目次部分を作ります。
作成した目次と整合性が取れるようにして以下のようにコードを作成すればOK。
|
1 2 3 |
<span style="color: #545b63;"><h4 id="title1">見出し１</h4></span> |
|
1 2 3 |
<span style="color: #545b63;"><h4 id="title２">見出し2</h4></span> |
|
1 2 3 |
<span style="color: #545b63;"><h4 id="title3">見出し3</h4></span> |
・<id="xxxxxx">
👉目次のリンク先に当たる、"xxxxxxが目次と合うようにする。
プラスα
特に無かったです。笑
以上。
カンタンですね。
これで１つ不要なプラグインのインストールを避けることができました。
