閉じる
閉じる

あまめも

ブログに「目次必要かな?」と思ったのでサクッとローテクで作ってみた。

こんにちは! あますた(@amaguristar)です。

最近ブログを更新してて思うのが、「目次付けた方が見やすい記事もあるよな」ってこと。無くても問題ないんでしょうが、「付けた方が親切だよな?」と思いサクッとローテクで作成しました。

 

とりあえずリストで目次っぽいものを作成

ローテクで作成するとなるとお世話になるのがhtmlのリスト。

<ul>
   <li>目次1</li>
   <li>目次2</li>
   <li>目次3</li>
   <li>目次4</li>
   <li>・・・</li>
   <li>まとめ</li>
</ul>

上記を実際に記述すると、

  • 目次1
  • 目次2
  • 目次3
  • 目次4
  • ・・・
  • まとめ

と表示されます。なんと無く目次っぽくなりましたよね? リストのデザインは下記サイトで色々と紹介していたのでお好みで編集して下さい。

目次にリンクを貼る

あとは先ほど作成した目次にリンクを貼るだけ。これも簡単。

<ul>
   <li><a href=”#”>目次1</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を指定する事が多いと思います。

まとめ

ローテクでしたが簡単に作成完了。一応、簡単ですがこのメモの目次を下に作成したので、確認して下さい。

それっぽいと思いませんか? 面倒なときは便利な「プラグイン」もありますので、下記サイトを参考にして下さい。とても分かりやすいです。

※リンク切れになってたので削除しました。

関連記事

  1. 09152021-thumbnail

    phpで日本語urlをエンコードorデコードする簡単な方法

  2. edit

    「Git」のコミットメッセージを間違えた、そんな時の修正方法

  3. MarkdownのHタグにクラスを追加する簡単な方法

  4. リストテンプレートも作っておいた方がいいかな?と思ったので作成!…

  5. 【HTML】サイトにテキストボックスを付けたいって時の設定方法

  6. WordPressで『Twitter Cards』を設定するプラ…

こんなメモもありますよ♪

  1. 頂いたお酒

Twitter

ページ上部へ戻る