ブログに「目次必要かな？」と思ったのでサクッとローテクで作ってみた。
こんにちは！ あますた(@amaguristar)です。
最近ブログを更新してて思うのが、「目次付けた方が見やすい記事もあるよな」ってこと。無くても問題ないんでしょうが、「付けた方が親切だよな？」と思いサクッとローテクで作成しました。
とりあえずリストで目次っぽいものを作成
ローテクで作成するとなるとお世話になるのがhtmlのリスト。
<ul>
<li>目次１</li>
<li>目次2</li>
<li>目次3</li>
<li>目次4</li>
<li>・・・</li>
<li>まとめ</li>
</ul>
<li>目次１</li>
<li>目次2</li>
<li>目次3</li>
<li>目次4</li>
<li>・・・</li>
<li>まとめ</li>
</ul>
上記を実際に記述すると、
- 目次１
- 目次2
- 目次3
- 目次4
- ・・・
- まとめ
と表示されます。なんと無く目次っぽくなりましたよね？ リストのデザインは下記サイトで色々と紹介していたのでお好みで編集して下さい。
目次にリンクを貼る
あとは先ほど作成した目次にリンクを貼るだけ。これも簡単。
<ul>
<li><a href=”#”>目次１</a></li>
<li><a href=”#”>目次2</a></li>
<li><a href=”#”>目次3</a></li>
<li><a href=”#”>目次4</a></li>
<li><a href=”#”>・・・</a></li>
<li><a href=”#”>まとめ</a></li>
</ul>
<li><a href=”#”>目次１</a></li>
<li><a href=”#”>目次2</a></li>
<li><a href=”#”>目次3</a></li>
<li><a href=”#”>目次4</a></li>
<li><a href=”#”>・・・</a></li>
<li><a href=”#”>まとめ</a></li>
</ul>
<a>タグ内のhref=”#”の「＃」部分にリンク先のアドレスなりidなりを埋め込めば完了。
通常は<h3>タグあたりに「<h3 id=”mokuji1″>」等でidを指定する事が多いと思います。
まとめ
ローテクでしたが簡単に作成完了。一応、簡単ですがこのメモの目次を下に作成したので、確認して下さい。
それっぽいと思いませんか？ 面倒なときは便利な「プラグイン」もありますので、下記サイトを参考にして下さい。とても分かりやすいです。
※リンク切れになってたので削除しました。
