閉じる
閉じる

あまめも

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

こんにちは! あますた(@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. [甘]気になってしょうがないのでさっそく画像表示を直してみた。

  2. 文字

    【HTML】略語の正式名称を簡単に表示する方法

  3. 【HTML】ホームページから任意のファイルをダウンロードさせる方…

  4. [甘]WordPressにログインできない!?「.htacces…

  5. [甘]ブログに関連記事を追加しようと思って「WordPress …

  6. HTML

    サイトの情報を消した時は<del>タグで削除した部分…

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

  1. てんや 看板

Twitter

ページ上部へ戻る