Table of Contents Plusは記事内の各見出しへのページ内リンクを自動生成して、Wikipedia風のページ内メニューを作ってくれるプラグインです。HTML知識ゼロでも簡単に使えてとても便利です。@web_shufuも早速導入しました。

リンクとは

リンクをクリックすると指定された場所に移動させてくれます。

大抵の場合この「指定された場所」というのはリンクのあるページとは別のページです。

[img-link url=”http://www.tagindex.com/html5/text/a.html” title=”HTML5/テキスト/a要素 リンクを設定する – TAG index Webサイト”]

ページ内リンクとは

ところが「指定された場所」がリンクと同じページ内にある場合があります。

これがページ内リンクです。

ページ内リンクをクリックすると、同じページ内の指定された場所にページ内移動することになります。

[img-link url=”http://www.tagindex.com/html5/text/a_id.html” title=”HTML5/テキスト/a要素 ページ内リンクを設定する – TAG index Webサイト”]

ページ内リンクを利用したメニュー・目次

ページ内リンクはそのページの目次を作るのによく使われます。

代表的な例がWikipediaです。

[img-link url=”https://ja.wikipedia.org/wiki/%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF” title=”ハイパーリンク – Wikipedia”]

このページにも、「目次［非表示］」と書かれたボックス内に、そのページのコンテンツのメニューが出てます。

ユーザビリティーUP

Wikipediaのような「目次［非表示］」ボックスを設置するとユーザビリティーが高まります。

一目見てページの内容がつかめます。

見出しの中で一番興味のある部分に飛んでいくことも出来ます。

自分の知りたいことが書いてあるかどうかも目次を見れば判断が付きます。

「目次［非表示］」ボックスはユーザー体験の観点から絶対つけるべきです。

でも目次作りは面倒

ところでユーザーのためには是非ともつけたい「目次［非表示］」ボックスですが、HTML直書きで作ろうとすると結構面倒です。

@web_shufuはこれまでもページ内の目次・メニューをつけてきましたが結構手間がかかっていました。

「もっと簡単に目次を作りたい」と切実に思っていました。

Table of Contents Plusなら簡単

そんな時出会ったWordpressプラグインがTable of Contents Plusです。

まずはWordpress管理画面左サイドバー⇒プラグイン⇒新規追加と進みます。

検索窓に「Table of Contents Plus」と打ち込みダウンロード・有効化。

次に設定をする為にWordpress管理画面左サイドバー⇒設定⇒TOC＋と進みます。

するとこんな感じで色々設定できます。

投稿やページに対して自動的にメニュー目次を作らせる設定も可能です。
スムーススクロール機能もあります。
表示・非表示を閲覧者に選択させるかどうか\の設定も可能です。

デザインはデフォルトを選ぶとWikipediaそっくりになります。

私はCustomを選択した上スタイルシートを弄ってWikipeiaとはかけ離れた目次表示にしました。

表示したい場所にショートコード

投稿やページに対して自動的にメニュー目次を作らせるように設定しなかった場合、メニューを表示した居場所に以下のショートコードを書き入れます。

[]

ページ内メニューで訪問者に親切なページを

このようにTable of Contents Plusを使うとページ内メニューは簡単に作れます。

皆さんも是非お試しを