WordPress

WordPress で目次を自動作成!Table Of Contents Plus の設定方法

こんにちは。安慶名勇子(アゲナユウコ)です。

ブログにおいての『目次』って、飲食店でいうお品書きと似ていると感じるのは私だけでしょうか。「ここではこんなコース(お料理)を提供しますよ!」と案内があるだけで読みやすさが大きく変わるので、私はブログ運営において目次を重要視しています。

文字数が少ない記事なら必要ないでしょうけれど、多くの記事はあった方が読みやすいですよね。記事の概要や、流れを踏まえながら安心して読んでいただくためにも、目次機能はぜひ利用しましょう。

このブログでも使用している『Table of Contents Plus』というプラグインは、簡単に目次を作成でき、使いやすさや見栄えも優れているのでとてもおススメ。今回はその基本設定について説明します。

Table of Contents Plus で作成した目次イメージ

まずは完成後のイメージからご覧ください。WordPress プラグイン Table of Contents Plus をインストールし、簡単な設定を完了するとこんな目次が自動で作成されます。

難しい設定は必要ないのですが、どうせならブログを引き立たせるデザインにしたいですよね。というわけで、下記のような項目を最低限考えておきましょう。

  • 目次挿入の位置
  • 目次を自動表示させるページタイプ(投稿・固定ページ等)
  • 目次のデザイン
  • 目次のサイズ
  • 見出しが何個以上ある場合に表示させるか
  • 目次番号の有無

では、具体的な設定手順を見ていきましょう。

プラグイン Table of Contents Plus をインストール

まずは、Table of Contents Plus をインストールします。左メニューから『プラグイン』をクリック。

プラグインの隣に表示される『新規追加』ボタンをクリック。

キーワードに『table of contents plus』と入力。

いくつかの候補が表示されるので、『Table of Contents Plus』(下記画像参照)を探し、『今すぐインストール』をクリックしてください。

インストール完了後、『有効化』をクリック。

これでインストールは完了です。

Table of Contents の設定方法

サイドバーの『設定』の中に『TOC+』というメニューが追加されていますので、クリックして設定画面を表示します。

目次表示の位置を設定する

Table of Contents Plus をインストールすると、通常は一番最初の見出しの直前に目次が表示されます。表示位置を変えたい場合は『位置』の項目を変更します。

プルダウンメニューをクリックして変更します。

位置のプルダウンメニューに表示される内容と意味は次のとおり。表示させたい場所を選びます。

最初の見出しの前(デフォルト)最初のhタグの前に目次を表示
最初の見出しの後最初のhタグの後ろに目次を表示
記事タイトル直後に目次を表示
記事の一番下に目次を表示

表示条件を設定する

「hタグが少ないページには目次表示はさせたくない」という場合は、表示条件を設定しましょう。見出しが何個以上ある場合に目次を表示させるかを設定できます。

どのページに目次を表示させるか

「投稿ページは目次を表示したいが、固定ページには目次を表示したくない」という場合は『以下のコンテンツタイプを自動挿入』項目で設定しましょう。目次を表示させたいページタイプにチェックを入れます。

通常は『post(投稿ページ)』にチェックを入れていればOKです。

見出しテキストを設定する

デフォルトのままでも問題はないですが、目次欄の表示を変えたいときには『見出しテキスト』項目で設定を行いましょう。

『見出しテキスト』の設定は、目次のこの部分(下図)に対応しています。

目次の上にタイトルを表示チェックを入れると『Contents』と表示される。任意の文字列の指定も可。
非表示ボタンチェックを入れると、読者自身が目次を非表示にできる『hide』というボタンが表示される。
最初は目次を非表示チェックを入れると目次詳細が表示されず、タイトルのみ表示される。

『最初は目次を非表示』がわかりにくいのですが、チェックを入れるとこんな状態でブログに表示されるということです↓。目次を見たい場合は『show』ボタンをクリックして表示させます。

階層表示を設定する

『階層表示』にチェックを入れると、hタグの種類によって目次がインデント表示されます。

『階層表示』にチェック有↓

『階層表示』にチェック無↓

番号振りを設定する

目次に番号を振りたい場合はチェックを入れ、番号を振りたくない場合はチェックを外します。

『番号振り』チェック有↓

『番号振り』チェック無↓

スクロール効果を設定する

目次はページ内リンクなので、クリックすると該当行に移動します。その移動の仕方を設定します。

チェック無:クリックすると該当行にジャンプで移動
チェック有:クリックすると該当行にスクロールで移動

目次の横幅サイズを設定する

デフォルト状態では、目次の横幅は見出しのサイズに応じて変更されますが、見出しの長さに関わらず固定サイズでの表示も可能です。

プルダウンメニューをクリックし、好みの横幅を指定します。

回り込みを設定する

デフォルトでは『なし』になっているのでそのままでOKですが、回り込みレイアウトにしたい場合はプルダウンメニューをクリックして設定します。

『回り込み』なし(デフォルト)の場合↓

『回り込み』左の場合↓

『回り込み』右の場合↓

目次の文字サイズを設定する

目次の文字サイズを変更したい場合、『文字サイズ』項目に数値と単位を設定します。単位は『pt』『%』『em』で指定できます。

目次のデザインを設定する

目次の背景色や枠線色、マウスオーバー時のリンク色などを『プレゼンテーション』項目で細かく設定できます。背景色が異なる5つのパターン(『グレー(デフォルト)』『水色』『白』『黒』『透明』)があらかじめ用意されていますが、『カスタム』を選択すれば自分好みにアレンジもできます。

あらかじめ用意されているパターンを選択した場合のイメージはコチラ。

『グレー(デフォルト)』の場合↓

『水色』の場合↓

『白』の場合↓

『黒』の場合↓

『透明』の場合↓

『透明』を選択すると目次背景が文字通り透明になります。 このブログは背景が白なので、あらかじめ用意されているパターン『白』と変わらない表示になっていますが、ブログ背景が写真や柄モノだった場合には使えますね。

『カスタム』の場合↓

ちなみに、↑の設定はこちら。ブログのデザインに合わせてカスタマイズしてみてください。

目次設置はメリットだらけ

記事の読みやすさをUPさせるためにも目次はあるに越したことはありません。プラグインを使用せず、ベタ打ちで記事毎に目次を作成する方法もありますが…見出しを追加・削除した場合、目次も書き換える必要があるため手間が増えます。

目次プラグインを利用すると、記事編集と同時に目次が自動作成される上、リンク切れや表示漏れのミスも防げますし、目次自体がページ内リンクになっているので、SEO対策としても有効との説もあります。

目次設置はブログ運営においてメリットだらけ。ぜひ利用していきましょう!

【Vol.007】「時間を作るために…」と思ったとしても絶対に削減してはいけないこと前のページ

【Vol.008】「そこまでやるなんて…引く!」と言われるほど徹底している私のルーチンワーク時短術次のページ

ピックアップ記事

  1. まるでパスタ専門店の味!「青の洞窟 ボロネーゼ」に嵌っています
  2. 電子ペーパー・クアデルノ(A4サイズ)の購入を決めた理由

関連記事

  1. WordPress

    Table of Contents Plus:特定の記事のみ目次を非表示にする方法

    Wordpressの目次機能の代表的プラグインである Table of…

  2. flat screen monitor

    WordPress

    WordPressで管理者メールアドレスが変更できないときの対処法

    メールアドレスが変わった、WordPressの管理者が変わった……

  3. WordPress

    Crayon Syntax Highlighterのテンプレート一覧と背景色別一覧

    プログラムコードをWordPressに美しく掲載するなら、Cra…

  4. WordPress

    Table of Contents Plus の目次が画面からはみ出る現象を解決

    Table of Contents Plus というプラグインを…

  5. WordPress

    Crayon Syntax Highlighter のフォント一覧

    先日、Crayon Syntax Highlighter のテン…

  6. WordPress

    「サイトに重大なエラーがありました」の解消方法

    WordPressにてホームページを運用されている方の相談に乗っ…

毎週金曜更新!安慶名勇子のPODCAST

PAGE TOP