[WordPress]プラグインを使わずに目次を作る方法

MIYAKO85_umidemoshigoto20140726500

WordPressで投稿記事に目次を作りたいと思ったことはありませんか?「Table of Contents Plus」というプラグインを使えば初心者でも簡単に目次を作れますが、プラグインを使わずに目次を作るにはどうすれば良いのでしょう?

今日はそんなお話です。

▼目次

  1. なぜプラグインを使わないのか?
  2. 目次を作る手順
  3. 教訓

なぜプラグインを使わないのか?

「Table of Contents Plus」を使えば、鬼のように簡単に目次が作れるんですけど、なぜプラグインを使わないのでしょう?

このブログで私も「Table of Contents Plus」を使っていますし、すごく楽に目次が作れちゃいます。

しかーし、何でもかんでもプラグインに頼っていると、ちっとも上達しないし、プラグインをドンドン入れていくと、ホームページの表示速度が遅くなっていくというのも、その理由です。

そもそも、目次って文章がメチャメチャ長いから、「文頭で全体を俯瞰する」という意味合いで作るものですよね?

私のような、平均1,000字そこそこの文章では目次なんて必要ないと思ったり。

1,000字にも満たなかったら、目次がある方がダサかったりと感じてしまいます。

ブログを始めたばかりの頃は、他のブログにも入っている要素を真似して入れたりしてみましたが、しばらくたつとこのようなことも考えてしまいますね。

というわけで、プラグインを使わずに目次を作る方法です。

目次を作る手順

基本的には、プラグインを使わずに「Table of Contents Plus」と同じことをしたいんです。

文頭に目次があって、クリックしたら、ページ内リンクでそこまでジャンプするという感じです。

ページ内リンクの作り方は、飛んでいく先に目印となるアンカーを作って、リンク(目次部分)にそのアンカー名を追加すると。

まずは、それぞれの飛んでいく先にコードを書きます。

例えば、見出しが3つあった時。
私の記事を例にするとこんな感じ。


<h2 id="title1">見出し1</h2>

<h2 id="title2">見出し2</h2>

<h2 id="title3">見出し3</h2>
  • 見出しはh2にしてるので、h2で囲む。
  • “title1″でidを指定する。
  • 見出しの文章を書く。

次に目次リスト部分を作ります。こんな感じ。


<h2>▼目次</h2>
<ol>
<li><a href="#title1">見出し1</a></li>
<li><a href="#title2">見出し2</a></li>
<li><a href="#title3">見出し3</a></li>
</ol>

#を忘れずに。

記事の最後の方に「目次に戻る」というリンクを付けたい時は、目次にもidを指定しておけばOK。こんな感じ。


<h2 id="mokuji">▼目次</h2>
<ol>
<li><a href="#title1">見出し1</a></li>
<li><a href="#title2">見出し2</a></li>
<li><a href="#title3">見出し3</a></li>
</ol>

記事の最後にこれを入れる。


<a href="#mokuji">▲目次にもどる</a>

これでどんな感じになるかというと、

目次

記事の最後は

目次に戻る

これでいい感じですね。

「Table of Contents Plus」よりはかなり面倒ですが、テンプレートを用意しておけば、多少は楽になるかもしれません。

参考までに、この記事にも目次を適用してみましたが、そもそも目次がいらなそうですね。

教訓

  • リンクの飛び先でidを作成する。
  • リンク元(目次)では飛び先のidを指定する。

▲目次にもどる

今日はここまでです。

チャオ!



シェアする

フォローする