WordPressや無料ブログに使われている目次を手動で設置する方法

ワードプレスや無料ブログなどでよく見かける目次。あれって本当に必要なのでしょうか？そういう私も目次を一応設置していますが、ユーザービリティを考えるとやはり必要なのでしょうね。




ただ、私の場合、目次が長いと逆に読む気が失せたりします。もちろんブロガーはコンテンツの質を高めると共に、より多くの見出しを使い、重要なキーワードの記事を読者がすぐ読めるようにと言う配慮もあります。

自動で目次が作成されるWordpressのプラグインを導入すれば簡単で良いのですが、例えばh2タグの下にh3タグを書いた場合、階層で表示されます。

私はあれが苦手なんですよね。長い目次の中にいくつもの階層で表示されると正直げんなりします。ですので、私の場合、面倒でも目次は毎回自分で設置しています。

目次のレイアウトタグはごくシンプルなものです。ブロック要素のdivタグの中にaタグを並べてhタグにidを付けると言ったやり方です。

 
リンクタグのダブルクォーテーションで囲っている箇所がidになりますので、それをジャンプしたい見出しタグに追加します。id名は任意で付けます。ここではc1 c2 c3と言うid名を付けています。

 
このように記述すると下のような目次が完成します。

 
私はCSS初心者ですが、CSSについては記事を書いていると嫌でも調べなくてはいけないことが多いです。でもそれを積み重ねる内になんとなく理解できるようになりました。

最初はコピペで動作しなかったり上手く表示されなかったりする度に頭の中は？？？状態でした。でも記述を色々いじってみて上手く表示できたりすると案外楽しいんですよね。

まだまだ分からないことが多いので記事を書きながら勉強していきたいと思います。

目次の必要性

目的のキーワードに素早くジャンプできるのでやっぱり必要。

目次の作り方

この記事を読んで下さい。

目次のスタイル

背景色の色はbackground-colorで任意指定。内側の余白はpaddingで指定。囲い線の種類、太さ、色はborderで指定。borderプロパティについてはこちらのサイトに詳しく掲載されています。その他のHTMLやCSSについても調べたい時はとても便利です。