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

      2017/01/22

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を指定する。

▲目次にもどる

 

今日はここまでです。

チャオ!

 -カスタマイズ

ad

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly

  関連記事

画像の横に文章が回り込む

[WordPress]画像の横に文章がこないようにする方法

WordPressで画像を貼り付けて画像の下に文章を続けたいのに、画像の右側に回りこんでしまって困っ

[WordPress] STINGER FANSのトップページだけ新着記事を消してみた

[WordPress] STINGER FANSのトップページだけ新着記事を消してみた

このブログのWordPressテーマは「STINGER FANS」を使わせていただいております。デザ

WordPress

WordPressの勉強を始めました

やろうやろうと思いつつ、遅くなってしまいましたがWordPressの勉強を真面目にやろうかなと。書籍

STINGER for FANS

[WordPress]テーマをSTINGER for FANSに変えました

WordPressのカスタマイズはほとんどしない私ですが、1年近くブログをやっているとデザインも変え

google

STINGER FANSのデフォルト検索をGoogleカスタム検索に変更してみたよ

ブログ内に設置しているデフォルト検索をGoogleカスタム検索に変更できるらしいです。ブログで色々と

ユニバーサルアナリティクス

いつのまにかユニバーサルアナリティクスに移行されてた件

Googleアナリティクスでちょっと前は、プロパティのところに「ユニバーサル アナリティクス アップ

[WordPress] STINGER FANSで子テーマを作成する方法

前回の記事で、WordPressのテーマをSTINGER for FANSに変えましたが、子テーマを

favicon-library

[WordPress] STINGER FANSでファビコンを設定してみた

突然ですが、ファビコンって知ってますか?お恥ずかしながら私は最近知りました。知っちゃうとあれ?このブ

[WordPress]文字の背景色を黄色のマーカーにする

[WordPress]文字の背景色を黄色のマーカーにする

最近、ブログやランディングページでよく見かけるんですが、文字の背景に黄色の蛍光マーカーで塗りつぶした

[WordPress]テーマを話題のStingerにしました

10月頭から、このブログのWordPressテーマを話題のStingerに変更させて頂きましたのでメ

ad

ad

ZenFone3 を楽天モバイルで購入!両面ガラスで高級感あるよ
ZenFone 3を楽天モバイルで購入!両面ガラスで高級感あるよ

楽天モバイルの冬の特価セールでZenFone 3 が安くなっていたので購入しました!最近評判の良い楽

CABINZERO(キャビンゼロ)のバックパック36Lが普段使いにちょうどよい!
CABINZERO(キャビンゼロ)のバックパック36Lが普段使いにちょうどよい!

CABIN ZERO(キャビンゼロ)から36Lの新サイズがでたので購入しました。44Lはちょっとでか

年末年始に東京から大阪に車で帰省!高速道路はどれだけ渋滞するのか?リアルタイムでレポートします!
[2016−17]年末年始に東京から大阪に車で帰省!高速道路はどれだけ渋滞するのか?リアルタイムでレポートします!

2016年の年末年始は東京から大阪に帰省します。今回はじめて年末年始に車で帰ることにしました。もう、

カーナビや後席モニターでdTVが見れるか試してみた!

前回はカーナビや後席モニターでAmazon プライムビデオが見れるか試してみました。今回は第4弾でd

[随時更新] 糖質制限中(ロカボ)でも食べられるオススメの外食メニュー
[随時更新] 糖質制限中(ロカボ)でも食べられるオススメの外食メニュー

ローカーボダイエットをして3ヶ月ほどが経ちました。体重も8kgほど減り、スリムになってきました。今日

  • follow us in feedly