閉じる
閉じる

あまめも

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

こんにちは! あますた(@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. リンク

    サイトでリンク箇所に分かりやすくアイコを追加する方法【css】

  2. コロナ対策

    簡単!飲食店オーナーの「連絡先の把握に努める」というコロナ対策の…

  3. edit

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

  4. HPでライン風の対話型吹き出しの表示に枠を付けたい!!ってなった…

  5. テーブルの背景を簡単に奇数or偶数行で色を変えて見易くしたい!

  6. thumbnail

    WordPressでプラグインを簡単に作成する方法メモ

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

  1. つるとんたん看板

Twitter

ページ上部へ戻る