デル株式会社

WordPressで作ったブログに、目次を付ける方法

WordPressプラグイン「Table of Contents Plus」で、作成した目次の画面
Pocket

ブログのアクセス数を増やすため、SNSで反響が多いサイトの研究をしました。その結果、人気があるサイトは、ブログの記事に目次があることに気がつきました。「Wordpressならば、プラグインで目次を自動作成できるのでは? 」と思い、調べました。

WordPressプラグイン「Table of Contents Plus」

”Table of Contents Plus”というWordpressのプラグインを使うと、Wordpressの記事に目次を表示することができます。私が参考にしたのは、以下の記事です。

参考記事:WordPressで見やすい目次を簡単に作る「Table of Contents Plus」
http://naifix.com/table-of-contents/

上記の記事を参考に、プラグイン導入の手順をまとめますね。

【プラグイン導入の手順】

  1. WordPressの管理画面・プラグインの「新規追加」をクリックして、Table of Contents Plusを検索。
  2. Table of Contents Plusの英文説明を観た上で、インストールボタンを押します。
  3. インストール後、有効化します。
  4. プラグインメニュー・インストール済みプラグインをクリック。
  5. 「Table of Contents Plus」のSettingsをクリック。
  6. 英語の管理画面が表示されます。

NaifixのElloraさんが「Table of Contents Plus」で使われている英語用語の解説や、設定方法を日本語でまとめてくださっています。私もこの記事を参考に、プラグインの設定をしました。

このプラグインは、見出しのタグ(<h2>など)を読み取って、目次を作成します。そのため、見出しがない記事・見出しが”一つのみ”の記事を書くと、目次は生成されません。ご注意くださいね。

目次を表示させる位置

最初に気をつけたいのは、「Position」の設定です。

  1. Before first heading(default)←最初の見出しの前に、目次が表示されます。
  2. After first heading←最初の見出しの下に、目次が表示されます。
  3. Top←題名のすぐ下に表示されます。
  4. Bottom←記事の最後に表示されます。

Bottomを選ぶと、次の記事・前の記事に移動する記事の一番最後のリンクの上に表示されます。

見出しタグ(<h1>など)の設定で、注意したい点

そして、NaifixのElloraさんが見出しタグ(<h1>など)の設定について、注意点を書かれています。

WordPress 無料テーマ Stinger シリーズや Gush は記事タイトルに h1 を当てているため、h2~h6 を使いましょう。

設定画面下に詳細設定(Advanced)が隠れているので、ここで見出しに使うhタグを指定。
※http://naifix.com/table-of-contents/ より引用

 

記事の中では、h2からh6までの見出しを使うのがよい、とのこと。参考になりました。普通にインストールした場合は、h1からh6までチェックマークがついていました。目次に表示したい見出しのレベルを自分で直しましょう。

【目次に使用する、見出しレベルの設定について】

管理画面の下部に、Advanced (show)と表示されています。showをクリックします。※リンクをクリックしないと、以下の設定画面は表示されません。

【見出しタグh1からh6にチェックが配いている画面】

Table of Contents Plusで目次に表示させる見出しのレベル選択(h1からh6にチェックがついている場合)

私の場合は、h2・h3のみチェックを入れました。h4より下のレベルまで目次に表示されると、大変見にくかったからです。以下の例は、「iPhone&iPadアプリナビ 記事アクセスランキングTOP10(2014年6月〜7月)」の見出しh2・h3のみ表示させました。

「はじめに」に該当する部分に、見出し「6月~7月のランキングを発表します」を入れていたら、アイキャッチ画像の下に目次が表示されました。

「iPhone&iPadアプリナビ 記事アクセスランキングTOP10(2014年6月〜7月)」の目次

本文がどこになるのか見当がつきません。読者に不親切な表示になってしまいました。そこで、冒頭の見出し「6月~7月のランキングを発表します」を削除し、はじめにに該当する本文が目次の前に来るようにしました。

【目次の実例】

目次 [非表示]

【実際の画面】

h3の部分は、1.1、1.2・・・2.1と、小数点入り連番で表示されています。h4の見出しも表示させた場合は、1.1.1、1.1.2・・・などのように表示されていた記憶があります。

目次の幅について

「Table of Contents Plus」のSettingsの画面中程に、Appearanceという項目があります。Widthのプルダウンメニュー▼ををクリックすると、200pxから400pxまでを選択したり、Relative(相対的な幅)として25%~100%までを選択できます。

【350pxを選んだときの画面】

IMG_4392

【Relative75%を選んだときの、スマートフォン向け画面】

IMG_4393

私のブログ(Media Basara)では、RelativeのAuto(default)を選びました。

Wrappingでは、指定なし・左寄せ、右寄せを選択できます。Font sizeでは、pt・%・emの単位で、文字の大きさを設定することができます。

おわりに

おかげさまでブログに自動で目次を追加できるようになりました。気になっている項目を直接、確認できました。見出しをうまくつければ、読者の皆さまに役立つのではないでしょうか。

なお、このプラグインを使った別のブロガーが、目次を設定してから同社の平均ページ滞在時間が増えたと紹介していました。

参考記事:平均ページ滞在時間を218%増やしたWordPressプラグインTable of Contents Plus
http://www.kagua.biz/wp/wpplugin/tableofcontentsplus.html

このプラグインが、読者の皆さまのブログライフのお役に立てばと思います。以上、役に立っているWordpressのプラグイン情報でした。

Author Profile

片岡杏紗(あさ)
国家資格キャリアコンサルタント。JCDA認定CDA(キャリア・デベロップメント・アドバイザー)。元IT系講師。ITmediaオルタナティブ・ブログでは、「教育ICT」に関する記事を連載中。http://blogs.itmedia.co.jp/kataoka/
Pocket

コメント

  • トラックバックは利用できません。
  • コメント (0)
  1. この記事へのコメントはありません。

CAPTCHA


ウェブサイト翻訳ツール

アーカイブ

Zenback

ページ上部へ戻る