カスタマイズ

【コピペOK】目次をhtmlで作成する方法【記事の途中に飛ばす方法】

しろう
しろう
こんにちは、しろうです!

今回の記事ではhtmlで目次を作る方法をご紹介していきます。

プラグインで簡単に目次は作成できるのですが、自由度が低いし、サイトの表示速度が遅くなりGoogleからのサイトの評価が下がる可能性があります。

そのため、htmlで目次を作成する方法を知っておいて損はありません。

ぜひ、この機会に知っておきましょう。

記事の目次

*今から↑こんな感じのやつを作っていきます。

【コピペするだけ】htmlで目次を作成する方法

まずは上記画像のような『デザインなしの簡易的な目次』を作成する方法をご紹介します。

<a href="#anker1">①ここに目次</a>
<a href="#anker2">②ここに目次</a>
<a href="#anker3">③ここに目次</a>
<a href="#anker4">まとめ</a>

<h2 id="anker1">①ここに見出し2</h2>
<h2 id="anker2">②ここに見出し2</h2>
<h2 id="anker3">③ここに見出し2</h2>
<h2 id="anker4">まとめ</h2>

これをコピペして【ここに目次】と【ここに見出し】の箇所に好きな文字を入れれば完成です。

しろう
しろう
簡単ですね!

入れ子構造の目次を作成する方法

次は上記画像のように『入れ子構造の目次』を作成する方法を解説します!

<strong><a href="#anker1">①ここに見出し2</a></strong>
<strong>・<a href="#anker11">⑪ここに見出し3</a></strong>
<strong>・<a href="#anker12">⑫ここに見出し3</a></strong>
<strong>・<a href="#anker13">⑬ここに見出し3</a></strong>
<strong><a href="#anker2">②ここに見出し2</a></strong>
<strong>・<a href="#anker21">㉑ここに見出し3</a></strong>
<strong>・<a href="#anker22">㉒ここに見出し3</a></strong>
<strong>・<a href="#anker23">㉓ここに見出し3</a></strong>
<strong><a href="#anker3">③ここに見出し2</a></strong>
<strong>・<a href="#anker31">㉛ここに見出し3</a></strong>
<strong>・<a href="#anker32">㉜ここに見出し3</a></strong>
<strong>・<a href="#anker33">㉝ここに見出し3</a></strong>
<strong><a href="#anker4">まとめ</a></strong>

<h2 id="anker1">①ここに見出し2</h2>
<h3 id="anker11">⑪ここに見出し3</h3>
<h3 id="anker12">⑫ここに見出し3</h3>
<h3 id="anker13">⑬ここに見出し3</h3>
<h2 id="anker2">②ここに見出し2</h2>
<h3 id="anker21">㉑ここに見出し3</h3>
<h3 id="anker22">㉒ここに見出し3</h3>
<h3 id="anker23">㉓ここに見出し3</h3>
<h2 id="anker3">③ここに見出し2</h2>
<h3 id="anker31">㉛ここに見出し3</h3>
<h3 id="anker32">㉜ここに見出し3</h3>
<h3 id="anker33">㉝ここに見出し3</h3>
<h2 id="anker4">まとめ</h2>

かなり長いですが、こんな感じになります!

少し詳しく解説

ここでは「コードの意味を理解したい!」という方向けに少し詳しく解説していきます。

【目次】
<a href="#名前">ここに目次</a>

【飛び先】
<h2 id="名前">ここに見出し2</h2>

実際に使用しているタグは上記の赤色のタグです。

目次には【<a href="#名前"> </a>】を使い、
リンクの飛び先には【id="名前"】を使用します。

注意点は下記の3つ。

  • 目次側には名前の前に「#」をつける必要がある
  • 「名前」には半角英数字しか使えない
  • 目次側と飛び先の「名前」が一致していないと作動しない

目次以外で記事内リンクを作成する方法

今説明したことを応用すると目次以外でも記事内リンクを作成することが可能です。

例えば「こちら」をクリックしてみると、

 

 

「ここに飛ぶ」という感じです。

この時のコードは下記の通り。

<a href="#anker0">こちら</a>

<p id="anker0">「ここに飛ぶ」という感じです。</p>

こんな感じで【<a href="#名前"> </a>】の「名前」でリンクの飛び先を指定して、【id="名前"】の「名前」と一致したところに飛んでくるという感じです。

 

注意点

このときに重要なのが先ほどは【<h2 id="名前">ここに見出し2</h2>】だったのが【<p id="名前">「ここに飛ぶ」という感じです。</p>】になっている点。

<h2>とは「見出し2」を意味するタグであるため <h2 id="名前"> としてしまうと、見出し2になってしまいます。

それに対して<p>は「段落(パラグラフ)」を意味するタグなので <p id="名前"> にすれば文章を飛び先にすることができます!

 

こんな感じで、慣れれば誰でも簡単に目次を作成することはできます。

出来るだけプラグイン は少なくした方がいいですもんね、、、

「Add Quicktag」にでも保存しておいて、テンプレートとして利用することをオススメします。

ということで、今回はhtmlで目次を作成する方法でした!

終わりですヽ(´▽`)/

サムネ引用元:Freepik - jp.freepik.com によって作成された business ベクトル