[WordPress] 目次をプラグインなしで自作する方法

「最近ブログを始めたけど投稿にどうやって目次を付けるの?」
ブログを始めたばかりの人は疑問に思うのではないでしょうか。

安心してください。
そんなに難易度は高くありません!
コピペして少し変更をしてもらえば
簡単に目次を追加する事が出来ます。

プラグインを使用せずに自作する方法をまとめていますが、
それでも難しいという人のために
プラグインを使用した方法についても説明しています。
どちらの方法も簡単な内容となっています。
早速、本記事を読んで 投稿に目次を追加してみましょう!

スポンサーリンク

目次をプラグインなしで自作する方法

WordPressで目次を自作する方法を説明していきます。
ぶっちゃけて言うと、簡単です!
検索するとプラグインを使用した方法が多く出てきますが、
本記事を読んで頂ければ簡単に作成することが出来るようになります。

HTMLの記述方法

まず、HTMLの記述の一例を以下に示します。
どのような表示になるかは 本記事の目次を参考にしてください。
ほとんど同じものが作れるようになります。

以下の内容を毎回手打ちするのは面倒なので
プラグインの「AddQuicktag」に登録して楽に目次を追加しましょう!
「AddQuicktag」 の使用方法については要望があれば今後記事にします。


<p>目次【本記事の内容】</P>
<ul>
    <li><a href="#head1">1.見出し(H2)</a></li>
    <li><a href="#head11">1-1.見出し(H3)</a></li>
    <li><a href="#head12">1-2.見出し(H3)</a></li>
    <li><a href="#head2">2.見出し(H2)</a></li>
    <li><a href="#head21">2-1.見出し(H3)</a></li>
    <li><a href="#head22">2-2.見出し(H3)</a></li>
</ul>

<h2 id="head1">1.見出し(H2)</h2>
<h3 id="head11">1-1.見出し(H3)</h3>
<h3 id="head12">1-2.見出し(H3)</h3>
<h2 id="head2">2.見出し(H2)</h2>
<h3 id="head21">2-1.見出し(H3)</h3>
<h3 id="head22">2-2.見出し(H3)</h3>

このままコピペして書き換えてもらえば大丈夫です。
ただ、書き換え方が分からない人のために
簡単に説明していきます。

<ul>
<li><a href=“#head1”>見出し</a></li>
</ul>

<h2 id=“head1”>見出し</h2>

黄色の部分は目次と見出しとで合わせて貰えれば、
自分で分かりやすい文字列に変更して構いません。
※見出しだけ「#」が付いていることだけ注意してください

青色の部分は記事の見出しを記述する部分なので、
自分の投稿する記事に合わせて変更してください。

見た目にこだわりたい人は入れ子を使いましょう。
h3タグにインデントを追加していきます。
一手間加えるだけで見た目が綺麗になります!

<ul>
    <li><a href="#head1">1.見出し(H2)</a>
<ul>
    <li><a href="#head11">1-1.見出し(H3)</a></li>
    <li><a href="#head12">1-2.見出し(H3)</a></li>
</ul></li>
    <li><a href="#head2">2.見出し(H2)</a>
<ul>
    <li><a href="#head21">2-1.見出し(H3)</a></li>
    <li><a href="#head22">2-2.見出し(H3)</a></li>
</ul></li>
</ul>

CSSでデザインを整える

CSSは概観のテーマエディターにある「style.css」に記述してください。

以下に使えそうなCSSの例を2つ記述しています。

目次の点を消す

目次に番号を振っている場合、目次についている点はなくてもいいですよね。
そういう場合は点を消すことも出来ます 。
以下をコピペするだけなので説明することがありません…笑
点が邪魔だなと思う人は是非使ってみてください!

/* 目次の点を消す */ 
ul {
   list-style: none;
 }

目次に枠を付ける

目次に枠を付けて少しおしゃれにする事も出来ます。
枠がないと文章との区別が分かりにくいので、
枠を追加して少し目立たせてみてもいいんじゃないでしょうか。

/* 目次の枠 */ 
div#site-list {
   box-sizing: border-box;
   border: solid 1px #516ab6;
   margin: 1em;
   width: auto;
   margin-left: auto;
   margin-right: auto;
   padding: 1em;
   margin-bottom: 3em;
 }

プラグインを使用した作成方法

今まで自作する方法を説明しましたが、
「やっぱり難しい…」という方のために
Wordpressのプラグインを使用した方法をご紹介します。
プラグインが増えるためおススメはしないので、
そのうち自作出来るようになってください!

Easy Table of Contents

Easy Table of Contentsというプラグインをしようします。
「プラグイン」→「新規追加」で名前を検索して、
インストール、有効化してください。
この状態で投稿に目次が追加されているか確認してみましょう。
基本的にそのままの設定でも普通に使用出来ます。
あとは、目次を追加する投稿の種類の設定や
目次のデザインの設定などが可能です。
個人的なおススメとしては以下のように、
目次に表示するhタグをh2からh4に設定しておくのがいいと思います!

まとめ

プラグインなしで目次を自作する方法を説明しましたが
いかがだったでしょうか?

ブログを始めたばかりの人でも
簡単に作成出来たのではないでしょうか?
CSSを使って自分好みの目次にしてみてください!

おまけとして一応説明はしましたが、
プラグインを使用するのは
サイトを重たくする原因にもなりますので、
極力避けたいですね。

少し面倒かもしれませんが、
さくっと自作しましょう!!

おおすめの書籍

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)



スポンサーリンク

フォローする