ワードプレスでプラグインを使わないで目次を作る方法

ワードプレスで目次を作るには、プラグインを利用すれば、簡単にできますが、

しかし場合によっては、使いづらい場合もあります

なにか、いい方法がないかと探していたら

いい方法がありました。

しかも簡単です!

今回の記事では、

プラグインを使わなくても簡単に目次を作る方法について説明したいと思います

スポンサーリンク

プラグインを使った目次は不便なときもある

基本的に、プラグインを使った目次は、h1、 h2、 h3、 h4などの見出しを

目次の項目として表示します

目次として表示させるh1、 h2、 h3などのタグは、設定で変更できますが

個別のページごとに変更することができません。

例えば、

Aという記事では、h2、h3タグの項目を目次に表示させたい

Bという記事では、h2タグの項目だけを目次に表示させたい

このようにページ(記事)ごとに目次の表示方法を変更することができません。

また、もうひとつの理由は、

h1、h2 、h3、 h4など、hタグの見出しだけしか、目次の項目として

表示することができないため、普通のテキストで移動させることができません。

例えば、

「 最初に戻る 」というテキストをクリックすると、文頭に戻る

というような設定をすることもできません。

個別のページで自分の思い通りの目次を作るなら

やはり自分で作るしかないと思います

smoothplayを使って簡単に目次を作る方法

smoothplayは、基本的には、文中を移動させるためのコードですが

このコードを使って簡単な目次を作ることも可能です!

使い方は、非常に簡単で

1、クリックするとAへ移動するテキスト(移動させるリンク)

<a href="#smoothplay">このテキストをクリックするとAへ移動します!
</a>

「このテキストをクリックするとAへ移動します!」

↑この部分に好きなテキストを入力します!

2、移動する場所(A)

<div id="smoothplay"></div>
この地点に移動します!

「この地点に移動します!」

↑この部分に好きなテキストを入力します

この2つだけで簡単に移動ができます。

実際にやってみると!

まずは、クリックさせると移動するリンクを作ります

近場で移動させると移動したかわかりづらいので、下のように空間を作ってみます。

このテキストをクリックするとAへ移動します!

この地点に移動します!

実際に、試してみると、ちゃんと移動できました。

あとは、これを目次に使えばよいだけです

smoothplayを使って移動させるときの注意事項

同じコードは、1回しか使えません。

つまり2回目以降は、若干コードを変更しないといけません。

しかし、それも簡単です

2番目以降に移動させる指示コード

クリックすると移動させるリンク

<a href="#smoothplay2">2回目の移動</a>

移動する場所

<div id="smoothplay2"></div>
2回目は、ここに移動

こんな感じでいくつも作ることができます

2回目の移動

2回目は、ここに移動

おわかりのように

smoothplayの後に一回目と違う数字を入れればよいだけです。

例 smoothplay2

※移動元と移動先は、同じ番号でないといけません。

hタグを使った見出しにもsmoothplayを使うことができる

見出し(hタグ)のテキストの入力箇所に移動する場所側のコード

貼り付けてやればよいだけです。

ちなみに

この記事の目次は、あえてワードプレスのプラグインを使わずに

smoothplayを使って目次を作っています

見出しは、すべてh2タグですが、その場所に移動するようにコードを入力しました

ちなみに

上の目次の1では、以下のコードを入力!

 <a href="#smoothplay11">プラグインを使った目次は不便なこともある </a>

その後、文字を太くして目立たせてみました

次に移動先の見出し

<div id="smoothplay11"></div>プラグインを使った目次は不便なこともある

上の指示コードを見出しのテキストを入力する箇所に入力してみました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする