閉じる
閉じる

あまめも

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

こんにちは! あますた(@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. 【Mac】MAMPのMySQLを使ってコマンド入力する為のパスの…

  2. take090-thumbnail

    【WaznFilm更新】「Markdownって良く聞くけど、どん…

  3. thumbnail

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

  4. [甘]コンタクトフォームを「Contact Form 7」プラグ…

  5. Markdownを使用して簡単にgutenbergの再利用ブロッ…

  6. ファイルの管理がめんどくさくなってきたから「Git」使ってみた!…

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

  1. 店舗外観
  2. ソラマチ内店舗

Twitter

ページ上部へ戻る