共働きで消耗した家族が生き方を見直してます。

もう、共働きやめます。

WordPress

【WordPress】目次をつけてユーザビリティを向上させる方法

投稿日:

どうも。働かない夫です。

様々なブログを見ていると目次があるブログって結構ありますよね。たとえ短い文章であったとしても、目次があるとザッと全体像が見えてきて読む気になりますよね。

ブログを見てくれるユーザーの事を考えると目次はつけていた方が得策。そこで、今回はWordPressでの目次の付け方【Table of Contents Plus】のプラグインの方法と設定方法を紹介します。

【Table of Contents Plus】をインストールしよう!

ホーム→プラグイン→新規追加

「Table of Contents Plus」で検索して、インストール&有効化

 Table of Contents Plus プラグイン
(2014年12月31日現在)

Table of Contents Plusの設定方法

設定は難しくはなかったので、和訳と共に解説していきます。

ホーム→設定→TOC+をクリック

TOC+

 

写真は当ブログの設定になっています。

Table of Contents Plusの設定

前半部分設定

  1. Position:目次を表示する位置

    「Before first heading (default)」最初の見出しの上部に目次を表示
    「After first heading」最初の見出しの下部に目次を表示
    「Top」記事の最上部に目次を表示
    「Bottom」記事の最下部に目次を表示

    多くのブロガーさんはデフォルト設定の「Before first heading (default)」みたいですね。本を読むときとかも目次の位置ってココですよね。

  2. Show when:見出しの数がいくつ以上あるときに表示させるか

    デフォルトでは「4」ですが、必ず表示させたいなら「2」で設定しておきましょう。ユーザーの事を考えるとあった方がいいです。

  3. Auto insert for the following content types:目次を表示させたい記事の種類の選択

    post・・・記事
    page・・・固定ページ
    wpcf7_contact_form・・・問い合わせ

    一般的な設定としては記事に目次を表示させるたいので「post」を選択しましょう。

  4. Heading text:目次のタイトルと表示・非表示のコメント

    「Show title on top of the table of contents」目次のタイトルを表示
    下の空欄が目次のタイトルになるので「もくじ」「目次」「見出し」など好きな言葉を入れておきましょう。

    「Allow the user to toggle the visibility of the table of contents」目次の表示・非表示
    設定時の空欄には「開く」「閉じる」で良いでしょう。

    「Hide the table of contents initially」最初から目次が閉じた状態
    目次が見れなくなるのでチェックを入れない方が無難でしょう。

  5. Show hierarchy:階層表示

    見出し、小見出しがわかるので、チェックしておきましょう。

  6. Number list items:目次の番号付け

    見やすいのでチェックをつけましょう。

  7. Enable smooth scroll effect:見出しまでのジャンプ

    見たい部分までいくのでつけて欲しいですね。

Appearance以降の設定

Table of Contents Plusの設定2

  • Width:目次の幅
  • Wrapping:目次の左右の位置
  • Font size:本文の文字サイズに対しての目次の文字サイズ
  • Presentation:目次のデザイン
  • Advanced設定
    Table of Contents Plusの設定3
    「Heading levels」以外の項目は設定する必要はありません。
    ここでは、選択した見出しタグを目次に表示させる設定をします。
    WordPressの使用しているテーマにもよりますが、多くの場合はh1タグをタイトルで使用し、h2〜h6までを記事内で使う事がほとんどになります。わたしの使用しているstingerではこのタイプになります。
    上記の写真の様な設定であればほぼ問題はないと思います。

以上で設定が完了します。終わったら「Update Options」クリックして設定を反映させましょう。

過去に書いた記事が反映されていますので、確認しておきましょう。

見出しが道しるべになっているのか

見出しがあるとユーザビリティが向上します。

記事の見出しを見たときにこの記事は自分(ユーザー)の役に立つ記事だ!と思ってもらえるようにしなければなりません。目次を読んで「この記事には自分の求めている情報が載っていそうだなー」と思って初めて読み出すこともあります。

見出しには適切な言葉と全体像として道しるべとなっているのかを再度確認するようにしましょう。

参考になるのは本の目次を見ると「あぁーこういう書き方するのか」と納得する事があります。コンテンツ作成にも応用出来るので是非とも本を購入した場合は目次を読むようにしましょう。

まとめ

プラグインから設定までで10分くらいあれば出来ました!難しくはないですね!

目次のメリットって読者側は見たい記事なのかを判別するものですし、全体像が入って読みやすいですよね。ブロガーとしては記事の内容、論理構成が正しくなっているのかを確認出来ますからね。見出しを並べてみると、「あれ?話がとんでいるような気がするなー」と気づくこともあるでしょう。

良質なコンテンツをわかりやすく、読みやすく届けるようにしましょう!

  • この記事を書いた人
ハタオト

ハタオト

職業:専業主夫。サイト作って、静かに生活しています。このブログは好き勝手書いています。

-WordPress
-

Copyright© もう、共働きやめます。 , 2018 All Rights Reserved.