WordPress の記事に目次を設定する方法

WordPress で記事を書くときに目次を付けたくなることもありますよね。
プラグインを使って目次をつけることもできるようですが、ここではプラグインを用いずに目次を作る方法を紹介したいと思います。

この方法を使うと、こんな感じに目次をつけることができます。

それではさくっと行ってみましょう。

1. html 内の見出しにタグを設定する

まずは、見出しする部分に次のように id を設定していきます。
たとえば、この見出しには以下のようにidを設定しました。

ここで指定したidが目次をクリックした時にどこまで飛ぶのかのターゲットになります。
ここでは、

としましたが、id の文字は好きに決めることができます。

自分がわかりやすい文字を設定すればよいです。

2. タグをページ内のリンクとして設定する

次に目次を実際に挿入したい部分に、

といった感じで目次の設定を行います。

と書かれている部分が、目次としての外観を設定している部分になります。

と書かれている部分が、ターゲットへのリンクを設定している部分です。
ここに見出しに設定した文字をしていすることになります。

これらのタグを設定することで、プラグインを利用しなくても目次の設定が行えるようになります。
個人的には、見出しと目次を作ってしまってから、実際の内容(本文)を書いていくのが文章も書きやすい気がしています。

おまけ: 目次をスタイルとして登録しておく

先ほど、以下の部分が目次としての外観を設定していると書きました。

このstyleを自由に設定することで、見た目を自由に変化させることができるのですが、気に入ったスタイルが見つかった場合には、「テーマの編集」からスタイルを登録しておくことができます。

WordPress で「外観」-「テーマの編集」と選択して、テーマの編集画面を開きます。

テーマの編集

「スタイルシート(style.css)」の部分に、次のように class 属性を設定します。

画面でみると次のような感じになります。

テーマの編集

これで、「ファイルの更新」ボタンを押すと class 属性の設定が保存されるので、あとは今まで style として指定した部分を

とすることができます。

このページで使われている具体的な目次は、次のようになっています。

class 属性を指定しておくことで、毎回同じstyleをせってする必要がなくなったりだとか、あとからすべてのエントリーの見た目を一気に変えたいという時に class 属性だけを変更すれば良くなったりと、少し便利になるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です