閉じる
閉じる

あまめも

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

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

  3. ず〜と気になってたHPの文字をマーカー(蛍光ペン)でなぞった感じ…

  4. WordPressで画像を挿入する時に勝手にリンクが貼られるので…

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

  6. list

    定義リスト<dl><dt><dd&…

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

  1. トッポ チーズタルト味

Twitter

ページ上部へ戻る