ワードプレスで目次を作るには、プラグインを利用すれば、簡単にできますが、
しかし場合によっては、使いづらい場合もあります
なにか、いい方法がないかと探していたら
いい方法がありました。
しかも簡単です！
今回の記事では、
プラグインを使わなくても簡単に目次を作る方法について説明したいと思います
●目次
１. プラグインを使った目次は不便なときもある
２. smoothplayを使って簡単に目次を作る方法
３. smoothplayを使って移動させるときの注意事項
４. hタグを使った見出しにもsmoothplayを使うことができる
目次
プラグインを使った目次は不便なときもある
基本的に、プラグインを使った目次は、h1、 h2、 h3、 h4などの見出しを
目次の項目として表示します
目次として表示させるh1、 h2、 h3などのタグは、設定で変更できますが
個別のページごとに変更することができません。
例えば、
Aという記事では、h2、h3タグの項目を目次に表示させたい
Bという記事では、h2タグの項目だけを目次に表示させたい
このようにページ（記事）ごとに目次の表示方法を変更することができません。
また、もうひとつの理由は、
h1、h2 、h3、 h4など、hタグの見出しだけしか、目次の項目として
表示することができないため、普通のテキストで移動させることができません。
例えば、
「 最初に戻る 」というテキストをクリックすると、文頭に戻る
というような設定をすることもできません。
個別のページで自分の思い通りの目次を作るなら
やはり自分で作るしかないと思います
smoothplayを使って簡単に目次を作る方法
smoothplayは、基本的には、文中を移動させるためのコードですが
このコードを使って簡単な目次を作ることも可能です！
使い方は、非常に簡単で
１、クリックするとAへ移動するテキスト（移動させるリンク）
<a href="#smoothplay">このテキストをクリックするとAへ移動します！ </a>
「このテキストをクリックするとAへ移動します！」
↑この部分に好きなテキストを入力します！
２、移動する場所（A）
<div id="smoothplay"></div> この地点に移動します！
「この地点に移動します！」
↑この部分に好きなテキストを入力します
この２つだけで簡単に移動ができます。
まずは、クリックさせると移動するリンクを作ります
近場で移動させると移動したかわかりづらいので、下のように空間を作ってみます。
↓
この地点に移動します！
実際に、試してみると、ちゃんと移動できました。
あとは、これを目次に使えばよいだけです
smoothplayを使って移動させるときの注意事項
同じコードは、１回しか使えません。
つまり２回目以降は、若干コードを変更しないといけません。
しかし、それも簡単です
２番目以降に移動させる指示コード
クリックすると移動させるリンク
<a href="#smoothplay2">２回目の移動</a>
移動する場所
<div id="smoothplay2"></div> ２回目は、ここに移動
こんな感じでいくつも作ることができます
２回目は、ここに移動
おわかりのように
smoothplayの後に一回目と違う数字を入れればよいだけです。
例 smoothplay2
※移動元と移動先は、同じ番号でないといけません。
hタグを使った見出しにもsmoothplayを使うことができる
見出し（hタグ）のテキストの入力箇所に移動する場所側のコードを
貼り付けてやればよいだけです。
ちなみに
この記事の目次は、あえてワードプレスのプラグインを使わずに
smoothplayを使って目次を作っています
見出しは、すべてh2タグですが、その場所に移動するようにコードを入力しました
ちなみに
上の目次の１では、以下のコードを入力！
<a href="#smoothplay11">プラグインを使った目次は不便なこともある </a>
その後、文字を太くして目立たせてみました
次に移動先の見出し
<div id="smoothplay11"></div>プラグインを使った目次は不便なこともある
上の指示コードを見出しのテキストを入力する箇所に入力してみました。