WordPressのブログに目次を入れたいけど本当に必要なのかな？目次を作るとしたら簡単？
こういった疑問にお答えします。
WordPressのブログに目次ってついていることが多いですよね！自分もつけなきゃいけないのかな？とお悩みの方も多いのではないでしょうか？
この記事ではまずは自分のブログで目次が必要かどうかを解説し、目次を作る方法と注意点を解説していきます。
このページの目次
目次の注意点と必要性
まずはご自分のブログに目次が必要かを考えてみましょう！判断基準としては、サイトに目次を載せた場合のユーザーのメリットとデメリットです。
当たり前な話かもしれませんが目次をサイトに載せた場合、ユーザーにメリットが大きくなる場合は載せた方がいいです。逆にデメリットが大きい場合は載せないほうがいいです。
ではどういったメリット・デメリットがあるのかを次の見出しで詳しくみていきましょう！
目次を表示するメリット
目次を載せることで文頭でどのような記事構成なのかを一目で伝える事ができます。
ユーザーが求めている情報と目次の内容が合致している場合はそのまま文章を読んで貰える可能性が高まりますし、一部が合致している場合は合致している部分までジャンプして読み進めることもできます。
そういった場合は表示する見出しの数を減らしたり開閉式の目次を導入するなどユーザーの画面操作の邪魔にならないようにしましょう。
目次を表示するデメリット
メリットが多く感じられる目次ですがサイト内容によっては目次を非表示にしたほうがいい場合もあります。
例えば小説や物語、ネタバレなどを扱っているサイトです。目次を表示すると文頭で最後の見出しまで表示されてしまうので記事の始めでネタバレしてしまいます。
なのでそういったサイトに目次を表示する場合は表示する範囲や見出しの書き方を工夫する必要があります。
また文章量が少なく、見出し数が数個の場合、見出しが不要になる場合が多いです。
目次を追加する方法
目次を追加する方法として自作する方法とプラグインを入れる方法があります。
自作する場合はPHPやHTML、CSSの知識が必要になってきますので自信がない方はプラグインで導入することをおすすめします。
目次を自作して追加する方法
目次を自作して追加する方法はいくつかありますが、簡単な方法としてHTMLとCSSで作る方法をご紹介していきます。
HTMLとCSSで追加する
一番簡単な方法は静的に手打ちでHTMLとCSSで記述する方法です。自動で見出しが挿入されないので普段は見出しを使わず特定の場所に目次を表示したい時などに使えます。
1HTMLを記述します。
<div class="post-content ">
<div id="toc-area">
<p class="toc-title">このページの見出し</p>
<ul class="toc-list">
<li><a href="#i-1">見出し1</a></li>
<li><a href="#i-2">見出し2</a></li>
<li><a href="#i-3">見出し3</a></li>
</ul>
</div>2CSSを記述します。
<style>
#toc-area { /* 全体の設定 */
width: 100%;
border: #018AE5 2px dashed;
padding: 1rem;
background: #f4fbff;
}
#toc-area .toc-title { /* タイトルの設定 */
text-align: center;
margin: 0;
}
#toc-area .toc-list { /* リストの設定 */
list-style: none;
margin: 0;
padding: 0 0 0 1rem;
}
#toc-area .toc-list a { /* リストの文字設定 */
color: #464646;
}
</style>これで簡易的な見出しができました。CSSは僕の見出しに設定してあるものを真似て作りましたのでカスタムしてみてください。
ちなみにリストのリンク先は#i-○としているので見出しのHTMLは以下のように記述するか変更してください。
<h2 id="i-1">見出し1</h2>
<h2 id="i-2">見出し2</h2>
<h2 id="i-3">見出し3</h2>目次をプラグイン追加する方法
プラグインで有名なものだと「Table of Contents Plus」と「Easy Table of Contents」がありますがおすすめは「Easy Table of Contents」です。
詳細は以下に書きましたがTable of Contents Plusは3年前から更新されておらず、今後更新される可能性が低いからです。
【便利なツール】ヒートマップ
見出しをユーザーがどのように使っているかをヒートマップというツールで簡単に調べる事が出来ます。
今回は月間30万PVまで無料で使えるUserHeatをご紹介します。
まとめ：WordPressの目次の作り方と注意点
WordPressの目次の作り方と注意点を解説しました。導入に迷ったらまずはユーザーがどう思うか？を考えてみましょう。
