もう、共働きやめます。

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

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

   

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

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

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

SPONSORED LINK

【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

【WordPress】目次をつけてユーザビリティを向上させる方法
この記事をお届けした
もう、共働きやめます。の最新ニュース情報を、
いいねしてチェックしよう!
SPONSORED LINK

SPONSORED LINK

       
ブログの更新情報はこちらから配信中

follow us in feedly

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【初心者向け】MacでSTINGER5を導入する方法。

どうも、働かない夫です。 今回、STINGER5を導入しました。 かなりスムーズ …

SNSシェアボタンのCSSがさっぱりわからん!カスタマイズ前に調べたよ!

どうも、働かない夫です。 ブログカスタマイズはしたいのですが、HTML、CSS、 …

ブログをカスタマイズしていく前に【 BackWPup】でバックアップを取ります。

ブログをカスタマイズしていく前にBackWPupでバックアップを取ります。 どう …

XServerのアクセス制限で全ページ認証確認された場合の対処方法

どうも、ハタオトです。 別サイトなんですが、ちょっとしたエラーが出たのでシェアし …

ソースコードを番号をつけてブログに載せる方法。キレイで見やすいよ!

どうも。働かない夫です。 前回の記事で、初めてプログラミングコードを紹介しました …

アイキャッチ画像を記事内に表示させる方法を紹介します。

どうも。働かない夫です。 アイキャッチ画像はとっても便利です。記事を一覧表示させ …

【STINGER5】ファンを増やすSNSボタンを追加しました!

どうも、働かない夫です。 ブログをやる上で欠かせないのが、SNSボタン。こちらが …

【WordPress】STINGERをカスタマイズする前に確認したいブログ

どうも。働かない夫です。 ブログはカスタマイズしたいけど、「Class」って何? …

【STINGER5】番号付リストのズレの直し方

どうも、働かない夫です。 今まで放置していましたが、番号付きリストを100個も作 …

【STINGER5】引用っぽい表示を簡単にさせるAddQuicktagの設定方法と使い方

どうも、働かない夫です。 このブログを書く時は、だいたいはWordPressで作 …