Toshi
WordPressで記事に目次を作るには？ということで今回はWordPressの記事に目次を作る方法について説明します。テーマによっては実際、HTMLやCSSで作らなくとも使えるテーマはあります。とはいえ、どんな仕組みになっているのか理解してみましょう！
今回解説していく内容は以下です！
本記事の内容
・WordPressで記事に目次を作る
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
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>
このように、ホームページにあるリンクは全て <a href=”URL”> でその遷移先を決めているわけです！
ということで、ここまで理解できたら以下のコードを実際に試してみましょう。
<li><a href=”#list”>目次とは？</a></li>
<div id=”list”>目次とは？</div>
<div id=”list”>目次とは？</div>
詳しく説明すると、リストタグの中に<a href=””>の中に id または clsss を指定してあげます。 id とは 「#」 のことで class とは「.」のことです。上記は、 <div> タグに id 「list」を指定しています。それを利用して、目次にジャンプするために目次には href=”#list” というような表示をしています。
少しわかりにくいかもしれませんが実際に試してみてください！
まとめ
Toshi
いかがでしたか？記事に目次があれば絶対にユーザー（読者）は記事の内容がパッと見ただけで何があるかわかるので見やすいと思います。WordPressのテーマによっては自分で作らなくても目次を使用することができます。ですが、目次の仕組みを理解しておくことも重要ですよね！ぜひ、参考にしてみてください。
コメント