おすそわけ備忘LOG

僕の脳内アウトプット

*

WordPress記事に目次を表示する方法

   

WordPressでブログをやっている人は多いと思うが、自分のブログを見にくれる人の利便性を考えている人はどれくらいいるだろうか?

特にブログをビジネス利用している人は、ブログの利便性を高めユーザビリティを上げる必要がある。見難く便利の悪いブログから、物を買おうとは思わないし、次も訪問しようとも思わないであろう。


ブログのコンテンツは「記事」である。読者は記事を読む事を目的に訪問するので、記事そのものの利便性を高める必要がある。


具体的に言えば、読者が求めている情報をピンポイントで提供できるか否かだ。


多くの読者は自分が求めている情報以外が流し読みする傾向にある。書き手がどれほど一生懸命文章を練ろうとも、全ての文章を読んでもらう事は難しいと言える。


そこで一つ提案なのだが、記事に目次を振り分けてみては如何だろうか?読者が知りたい情報に瞬時に誘導できる。ユーザー目線で見れば、これ以上ない待遇だと思う。


記事に目次をつけるのはとても簡単。WordPressでは「プラグイン」を用いてすぐできる。一度設定すればその後の操作は必要なく、記事を書けば自動的に目次を割り振ってくれるのだ。


この記事では、WordPress記事に目次を付ける方法を紹介している。参考までに

スポンサーリンク



始めに



冒頭を長くし過ぎる僕のクセがでてしまい非常に申し訳ないが、もう少しだけ耳を傾けて欲しい。

「目次の見本」と、「目次をつける理由」を、それぞれ紹介したいと思う。


目次の見本


この記事上部に目次が表示されているので、ここで紹介する必要性はないと思うが、それでは僕の気が収まらないので見てもらいたい。


目次見本


他記事の目次なのだが、見出し毎に目次が生成されているのが目に見て分かるはずだ。

目次を表示するだけだではなく、見たい見出しをクリックすれば、瞬時にスクロールし、欲しい情報にありつけるようになっている。利便性が高まっているのは言うまでもない。


PC表示ではもちろんの事、スマートフォンでもスクロール式になっているので、情報が詰め込まれすぎるスマホでの観覧時でもユーザビリティを損なわずに記事を読んでもらう事ができるだろう。


デザインも、自分好みにする事が可能だ。



目次を付ける理由



冒頭でも少し触れたが、記事に目次を付ける事によるメリットは沢山ある。


目次をつける事によって読者が知りたい情報へ、ピンポイント移動できるのが一番のメリット。書籍でも、目次から知りたいページに読み進めると思うが、それと同じだ。


書き手側にもメリットはあり、記事を書く時の構成が練りやすくなる。

構成無しで書き始めると、最終的になにを伝えたいのか謎な記事が完成してしまう事が多い。構成がぐちゃぐちゃになってしまうのだ。


その時に目次があれば、確認しながら記事を書き進める事ができる。内容を見失わずに記事を書き進める事ができるのはとても便利な事なのだ。



敢えてデメリットを挙げるなら、「短い記事」には向いてないという事。見出しが2つ、3つしかない記事に目次など必要ない。読者に「無理してるな」と悟られる事だろう。



プラグインをインストール



WordPress記事に目次をつけるのに特別なスキルは必要ない。

プラグインをインストールし、有効化するだけで簡単に目次を導入する事ができる。早速やってみよう。


インストール方法



記事に目次を付けたい!と考えている人は既にインストール方法などご存知だろうが、知らない人がいる事を前提に「プラグインのインストール方法」を紹介しておこうと思う。


プラグインを追加_‹_おすそわけ備忘LOG_—_WordPress


WordPressのダッシュボードを開き、「プラグイン」→「新規追加」に進む。画像緑枠の部分だ。


そうすればプラグインを検索するための検索窓があるので、そこに必要なプラグイン名を入力すれば簡単にインストールする事が可能だ(画像赤枠)



Table of Contents Plusを利用



今回利用するのは「Table of Contents Plus」というプラグイン。WordPressで目次をつけるならコレしかないのか?ってぐらい多くのブロガーさんが利用している。


簡単な設定をすれば自動的に目次が付加されるのだが、最初は少し戸惑うかもしれない。目次を綺麗に表示するためには、見出しタグの順番に気をつけなくてはならないからだ。


HTMLタグの話にはなるが、記事に見出しを表示させるには〈/h◯〉タグを使う事になる。


◯の部分には数字が入り、ブログで使用するのは〈h2〉〜〈h4〉がポピュラーだといえる。数字が若いほど大見出しとなり、小さければその逆になる。


Table of Contents Plusでは見出しタグの順序で目次がつくようになっているので、見出しタグの順番を適当にすればメチャクチャな目次になってしまう。


見出し説明


↑このように、数字が若い見出しに対し、それ以降の見出しタグがくっついてくる事になる。書いている内に慣れてはくるが、最初のほうはブレビューで確認しながら目次を作っていこう。

スポンサーリンク



Table of Contents Plusの設定



Table of Contents Plusはインストールと同時に設定する事が沢山ある。

一度設定してしまえば放置で大丈夫なので、しっかり設定していこう。一つずつ説明していく。


WordPressダッシュボードの設定に「TOC+」という項目が追加されているので、そこへ移動しておいてもらいたい。基本的には「main options」を設定するだけでオッケーだ。


目次設定


↑このブログの設定はこう。参考までに。


Position(目次の位置)



Positionでは目次の位置を決める事ができる。目次はユーザーが記事を読み始めるキッカケになる。離脱率を上げないためにも効果的な配置にしておきたい所だ。


設定項目は4種類で「Before first heading(一つ目の見出しの上)」、「After first heading(一つ目の見出しの下)」、「TOP(記事の上部)」、「bottom(記事下)」


目次の記事下配置は問題外だが、それ以外であればどれでも良いと思う。自分のブログにあった配置を。このブログは「Before first heading」で設定している。


Show when(見出しの数)



Show whenで設定した見出しの数以上で目次が表示される事になる。

文字数が少ない記事は、目次を付ける必要がない場合が多い。目次を付ける事により、反対にユーザビリティを落とす結果になる恐れすらある。


僕の場合、見出しが少なく、文字数が少ない記事を書く事はないので「2」と設定しているが、そうでない場合は「4」以上の設定にしておいたほうが無難だろう。



Auto insert for the following content types(ページ)



タイトルが長いので難しい設定のように感じるが、表示するページの種類を決めるだけの簡単な項目だ。


「Post(記事)」、「Page(固定ページ)」とあるが、最低でも「Post」へのチェックは忘れないようにしておこう。

ここを省けば、プラグインをインストールした意味がなくなる。



Heading text(タイトル)



目次のタイトルを決める項目だ。よっぽど拘りがな以上、「目次」と設定しておくのが無難だと僕は思う。


Allow the user to toggle the visibility of the table of contentsにチェックを入れると、目次を開いたり閉じたりする事ができるようになる。必要な場合はチェックしておこう。

「Show text」、「Hide text」は、開く時と閉じる時の見出しを決める事ができる。


「Hide the table of contents initially」という項目があるが、ここにチェックを入れてしまうと、ファーストビューで目次が閉じたままになる。

スクリーンショット 2015-08-28 20.10.11


↑こんな感じ。チェックを入れる必要性はないと思う。



Show hierarchy(段階)



目次の表示を段階的か、そうでないかを決める設定だ。言葉で伝えるのが難しいので、なんとなく察してもらいたい。


Table of Contents Plusでは、大見出しに対し小見出しが付属される形となる。難しいが、ここにチェックを入れる事で、この記事についてる目次のように段階的に表示されるという事だ。



Number list items(番号)



目次に番号を振り分けるかを決める設定だ。どちらでも良いと思うが、番号を付けておいたほうが視認性は良くなると思う。


僕はチェックを入れるようにしているので参考までに。



Enable smooth scroll effect(スクロール)



目次のリンクをクリックする事で目的の見出しまで移動できるのだが、その時に「滑らかに」移動するかどうかを設定する項目だ。

どうでもよい設定だが、せっかくだしチェックを入れておく事にしておこう。


この設定で第一段階は終了だ。



Appearanceの設定

目次デザイン


次にAppearanceの設定を行う。この項目では記事に表示される目次のデザインを決める事が可能だ。

デザイン一つでユーザーの離脱率に影響があるかもしれない。しっかり設定しておこう。では、一つずつみていこう。


Width(目次の幅)



Widthでは目次の幅を決める事ができる。任意の幅を選択する事もできるし、Auto(自動)に設定する事もできる。

まぁ、拘りがなければ自動で合わせてくれる設定にしておいたほうが良いとは思う。



Wrapping(位置)



目次の位置を設定できる項目だ。左右のどちらかに固定して表示させたい場合はここで設定しておこう。

オススメの設定は「None」である事は間違いない。デフォルト設定が一番しっくりくる。



Font size



目次の文字サイズを変更できる。

ブログの文字サイズ設定に準じて目次の文字サイズも変わる。メリハリを付けたい場合は数字を変更してみよう。

%の他にも、PTやemでサイズ調整ができるようになっている。


Presentation(デザイン)



目次の背景色などのデザインを設定できる。始めから用意されているデザインが5種類あるが、個人的にはカスタムする事を強くオススメする。なぜなら差別化できるから。


目次デザイン


↑このブログの設定はこんな感じ。背景色と枠の色を記事に馴染めせるように同色にしている。



最後に


プラグインをインストールし、ちょっとした設定をするだけで記事に目次をつけれるのは非常にありがたい。手打ちの時間的ロスを考えると、このプラグインがどれだけ優れたものか分かると思う。


情報量多めの記事が多いのなら、Table of Contents Plusを強くオススメする。

スポンサーリンク

 - WordPress