[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] STINGER FANSのトップページだけ新着記事を消してみた

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

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

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

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

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

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

STINGER for FANS

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

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

google

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

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

WordPress

WordPressの勉強を始めました

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

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

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

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

favicon-library

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

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

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

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

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

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

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

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

ad

ad

IIJmioのSIMサイズを変更!春のSIM交換・変更0円キャンペーン中です!
IIJmioのSIMサイズを変更!春のSIM交換・変更0円キャンペーン中です!

IIJmioのSIM交換・変更0円キャンペーン中を待っていました!ZenFone 3 のデュアルスタ

楽天モバイルが3日間の通信速度制限を撤廃するってよ。
楽天モバイルが3日間の通信速度制限を撤廃するってよ。

楽天モバイルが2017年3月1日から、3.1GB/5GB/10GBプランで過去3日間のデータ使用量の

陸マイラーが登録しておくポイントサイトは?必須の中継サイトと稼ぐポイントサイト
陸マイラーが登録するべきポイントサイトは?必須の中継サイトと稼ぐポイントサイト

念願の「ソラチカカード」が届きましたので、ポイントサイトへの登録を進めていきたいと思います。 今日は

ソラチカカードが届いたらやることは何?メインカードは変更するべき?
ソラチカカードが届いたらやることは何?メインカードは変更するべき?

ソラチカカードを申し込んで2週間程でようやく届きました。長かった〜w まぁ、その間で陸マイラーのブロ

ZenFone 3のホームアプリを「ZenUI Launcher」か「Nova Launcher」か迷った件
ZenFone 3 のホームアプリを「ZenUI Launcher」か「Nova Launcher」か迷った件

ZenFone 3 のホームアプリ(ランチャーアプリ)の選択で迷っております。「ZenUI Laun

  • follow us in feedly