WordPress で記事を書くときに目次を付けたくなることもありますよね。
プラグインを使って目次をつけることもできるようですが、ここではプラグインを用いずに目次を作る方法を紹介したいと思います。
この方法を使うと、こんな感じに目次をつけることができます。
それではさくっと行ってみましょう。
1. html 内の見出しにタグを設定する
まずは、見出しする部分に次のように id を設定していきます。
たとえば、この見出しには以下のようにidを設定しました。
1 |
<h3 class="midasi01" id="i1">1. html 内の見出しにタグを設定する</h3> |
ここで指定したidが目次をクリックした時にどこまで飛ぶのかのターゲットになります。
ここでは、
1 |
id="i1" |
としましたが、id の文字は好きに決めることができます。
自分がわかりやすい文字を設定すればよいです。
2. タグをページ内のリンクとして設定する
次に目次を実際に挿入したい部分に、
1 2 3 4 5 |
<div style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;"> ■ 目次 <a href="#i1">1. html 内でタグを設定する</a> <a href="#i2">2. タグをページ内のリンクとして設定する</a> </div> |
といった感じで目次の設定を行います。
1 |
style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;" |
と書かれている部分が、目次としての外観を設定している部分になります。
1 |
href="#i1" |
と書かれている部分が、ターゲットへのリンクを設定している部分です。
ここに見出しに設定した文字をしていすることになります。
これらのタグを設定することで、プラグインを利用しなくても目次の設定が行えるようになります。
個人的には、見出しと目次を作ってしまってから、実際の内容(本文)を書いていくのが文章も書きやすい気がしています。
おまけ: 目次をスタイルとして登録しておく
先ほど、以下の部分が目次としての外観を設定していると書きました。
1 |
style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;" |
このstyleを自由に設定することで、見た目を自由に変化させることができるのですが、気に入ったスタイルが見つかった場合には、「テーマの編集」からスタイルを登録しておくことができます。
WordPress で「外観」-「テーマの編集」と選択して、テーマの編集画面を開きます。
「スタイルシート(style.css)」の部分に、次のように class 属性を設定します。
1 2 3 4 5 |
.mokuji{ padding:10px; border:solid 1px #DFDFDF; background-color:#F5F5F5; } |
画面でみると次のような感じになります。
これで、「ファイルの更新」ボタンを押すと class 属性の設定が保存されるので、あとは今まで style として指定した部分を
1 |
class="mokuji" |
とすることができます。
このページで使われている具体的な目次は、次のようになっています。
1 2 3 4 5 6 |
<div class="mokuji"> ■ 目次 <a href="#i1">1. html 内でタグを設定する</a> <a href="#i2">2. タグをページ内のリンクとして設定する</a> <a href="#i3">おまけ: 目次をスタイルとして登録しておく</a> </div> |
class 属性を指定しておくことで、毎回同じstyleをせってする必要がなくなったりだとか、あとからすべてのエントリーの見た目を一気に変えたいという時に class 属性だけを変更すれば良くなったりと、少し便利になるかと思います。