【WordPress】記事に目次を作る方法(自作目次)

WordPress
2020/06/03
Toshi
Toshi
WordPressで記事に目次を作るには？ということで今回はWordPressの記事に目次を作る方法について説明します。テーマによっては実際、HTMLやCSSで作らなくとも使えるテーマはあります。とはいえ、どんな仕組みになっているのか理解してみましょう！

今回解説していく内容は以下です！

 本記事の内容

・WordPressで記事に目次を作る

  1. WordPressで記事に目次を作る
    1. 目次はリストで作られている
    2. 目次からジャンプする仕組みの説明
  2. まとめ

WordPressで記事に目次を作る

記事に目次を作ったらどんな良いことがあるかというと

ユーザー（読者）が記事を読みやすくなる！
といった点です。目次がなければどんな記事がぱっと見わからないですよね？

目次はリストで作られている

目次はHTMLタグのリストタグ（<ul> <ol> <li>）で作られています。見た目の装飾は、CSS

<ol>
 	<li><a href="#list">目次とは？</a></li>
 	<li><a href="#html">HTMLとは？</a></li>
 	<li><a href="#css">CSSとは？</a></li>
</ol>

目次を以下のように作ってみました。一度押して確認してみてください。

DEMO

  1. 目次とは？
  2. HTMLとは？
  3. CSSとは？

HTMLとCSSがわかる方ならなんとなく、コードを見るだけでわかるのではないでしょうか？

ul, ol {
  background: #f1f8ff;
  box-shadow: 0px 0px 0px 10px #f1f8ff;
  border: dashed 2px #668ad8;
  border-radius: 9px;
  margin-left: 10px;
  margin-right: 10px
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

 

目次とは？

 

HTMLとは？

 

CSSとは？

目次からジャンプする仕組みの説明

目次を作るにはリストタグ（<ul> <ol> <li>）を使うと上記で説明しました。その目次からジャンプする仕組みとは、HTMLの<a>タグを使っていきます。<a>タグは、他のリンク（URL）に遷移するためのものです。

<a href=”https://www.alloneslife-0to1work.jp”>https://www.alloneslife-0to1work.jp</a>
https://www.alloneslife-0to1work.jp
このように、ホームページにあるリンクは全て <a href=”URL”> でその遷移先を決めているわけです！
ということで、ここまで理解できたら以下のコードを実際に試してみましょう。
<li><a href=”#list”>目次とは？</a></li>
<div id=”list”>目次とは？</div>
詳しく説明すると、リストタグの中に<a href=””>の中に id または clsss を指定してあげます。 id とは 「#」 のことで class とは「.」のことです。上記は、 <div> タグに id 「list」を指定しています。それを利用して、目次にジャンプするために目次には href=”#list” というような表示をしています。
少しわかりにくいかもしれませんが実際に試してみてください！

まとめ

Toshi
Toshi

いかがでしたか？記事に目次があれば絶対にユーザー（読者）は記事の内容がパッと見ただけで何があるかわかるので見やすいと思います。WordPressのテーマによっては自分で作らなくても目次を使用することができます。ですが、目次の仕組みを理解しておくことも重要ですよね！ぜひ、参考にしてみてください。

 

コメント