こんにちは、小泉です。
色んなサイトを見ていると、たまにキレイな目次があったりしますよね。
これどうやって作っているか気になりませんか？
「CSSのコードを打ち込むのかな？」
「リンクを使って作るんじゃない？」
いえいえ、そんなに難しいことをしなくても作れるんですよ。
と言うわけで、今回はワードプレスで簡単に目次を作れるプラグインを紹介します。
目次作成プラグイン「Table of Contents Plus」をインストール
まずワードプレスのダッシュボードからプラグインの追加画面を開いてください。
追加画面は「プラグイン」⇒「新規追加」の順で開くことができます。
追加画面が開いたら右上の検索バーに「Table of Contents Plus」と入力。
すると「Table of Contents Plus」が表示されますので、
「今すぐインストール」をクリックしてプラグインをインストールします。
インストールが終わったら「有効化」をクリック。
これで「目次作成プラグイン」が使えるようになりました。
「Table of Contents Plus」の設定
「Table of Contents Plus」を有効化したら、次は目次の表示設定に移りましょう。
ダッシュボードに戻り「設定」から「TOC+」をクリックしてください。
「TOC+」とは「Table of Contents Plus」の略です。
設定画面が開きました。
ここで、目次に関する表示設定を変更することができます。
各項目を説明していきますね。
○位置
「位置」は記事内で目次を表示させたい位置を変更します。
とくにこだわりがなければデフォルトの「最初の見出しの前」のままでＯＫです。
○表示条件
「表示条件」は目次を表示させる見出しの数を変更します。
設定が「3」であれば、見出しが3つ以上ない限り目次は作成されません。
注意点として、ここで言う「見出しの数」は記事内の「見出しタグ」全てを合計した数であるということ。
表示条件を「3」に設定して、見出しを「ｈ３」⇒「ｈ４」⇒「ｈ４」の順で作った場合、これは表示の条件に当てはまりますので、自動的に目次が作成されます。
○以下のコンテンツタイプを自動挿入
ここでは「目次の作成対象となる記事のタイプ」を決めておきます。
基本的には「post（投稿記事）」と「page（固定ページ）」にチェックを入れておけば問題ありません。必要に応じて使い分けてください。
○見出しテキスト
目次の上にタイトルを表示
ここで言う「タイトル」とは、目次の一番上に当たる「目次」という文字のことです。
赤い枠で囲ったところですね。
タイトルを表示させるかさせないか、お好みでチェックしてください。
また表示されるテキストはデフォルトでは「Contents」となっていますが、自分の好きなように編集できます。僕の場合はそのまま「目次」にしました。
ユーザーによる目次の表示・非表示を切り替えを許可
これは目次の「表示、非表示」をユーザーが任意で切替えられるように設定する項目です。チェックを入れて切り替えられるようにした方が、読者にとっては良いかもしれませんね。
「表示、非表示」のテキストも自分で編集できますので、サイトや記事にあった言葉を考えてください。僕はシンプルに「表示⇒開く、非表示⇒閉じる」にしています。
最初は目次を非表示
記事を開いたときに最初から目次を表示させるか、それとも非表示にしておくかを選択。チェックを入れると非表示になります。
○階層表示
見出しによって階層をわけるかどうかを決める項目です。チェックを入れると「大きい見出し⇒小さい見出し」の順に階層わけされて表示されます。
階層有り
階層なし
階層があった方がわかりやすい場合はチェックを入れておきましょう。
○番号振り
目次の各項目に番号を入れるか入れないかを選択します。
番号有り
番号なし
基本的には番号があった方がわかりやすいですよね。
必要に応じてチェックを入れてください。
○スムーズ・スクロール効果を有効化
目次の項目をクリックしたときに、その見出しに移動するまでの画面の切り替わり方を選択します。
「アンカーリンクにジャンプではなくスクロールする」にチェックを入れると「ジャンプ」から「スクロール」に切り替わります。
「ジャンプ」は一般的なページの変わり方。
クリックして「パッ」と変わる感じですね。
「スクロール」にすると目次からその地点まで画面が高速移動します。
「スクロール」は人によっては嫌がる場合もありますので、
「ジャンプ」のままにしておいた方が無難かもしれません。
○横幅、回り込み、文字サイズ
「横幅」は読んで字のごとく目次枠の幅の広さ。
あまり狭くしすぎると縦長になってしまうので注意が必要です。
「回り込み」は画像の挿入と同じですね。
記事の形によっては左右どちらかに寄せるのもいいかもしれません。
「文字サイズ」は目次の文字の大きさです。
○プレゼンテーション
これはいわゆる「見た目」ですね。
黒以外はどれも見やすいのであなたの好みで選んでください。
「設定の更新」で終了
最後に「設定の更新」をクリックして目次の表示設定は終了です。
設定が終わったら実際に記事を開いて確認してみましょう。
以上、目次作成プラグイン「Table of Contents Plus」の紹介でした。
目次があるとその記事に何が書いてあるか一目でわかりますし、読みたいところに一瞬で移動できるので大変便利ですね。
「自分の記事にもキレイな目次が欲しい！」という方はぜひ使ってみてください。
