すべき事から解放されしたい事にあふれた人生に

あなたがしたい生き方をするために、
必要となるスキルや方法とは?

詳しくはこちらをクリック

【ブログの読みやすさUP!!】Table of Contents Plusで目次を作ろう!

ブログ
ろしお
ろしお

こんにちは。 ろしおです。
詳しいプロフィールはこちら

ブログ記事の読みやすさは色々な要素から成り立っていますが、
その中でも目次をつけるのは非常に効果的です。

今回は、目次を自動で作ってくれるプラグイン、
Table of Contents Plus(テーブル・オブ・コンテンツ・プラス)
の使い方を解説していきます。

Table of Contents Plus とは

Table of Contents Plusとは見出し(H1~H6)を元に、
目次を自動で生成してくれる便利なプラグインです。

そのため、見出しを全く使っていない記事では
目次を作ることができないため、その点だけご注意ください。

プラグインのインストール方法については以下の記事を参考にしてください。

Table of Contents Plusで検索してください。

上記をインストールしてください。

Table of Contents Plus 設定

そのままでも使えますが、設定を変更してより見やすい目次にしましょう。

設定」→「TOC+」をクリック。

目次の表示設定(基本部分)

基本設定」から必要最低限のものを設定していきます。

  • 表示条件
    デフォルトでは4つ以上になっているため、
    必要に応じて設定を変更しておきましょう。
  • 以下のコンテンツタイプを自動挿入
    色々書いてありますが
    post=投稿ページ」「page=固定ページ」と、覚えておけば十分です。
    post」にチェックを入れましょう。
  • 見出しテキスト
    目次のタイトルを変更できます。
  • スムーズ・スクロール効果を有効化
    目次をクリックした時にスクロールで移動するようになります。
    自分が今ページのどこに飛んだのか分かり易いので、
    こだわりが無ければチェックしておきましょう。

後はプレゼンテーションから好きなデザインを選び、
設定を更新」をクリックすればOKです。

上級者向け設定

上記の基本設定だけでも十分ですが、
もう少し詳しく設定したい場合は、
上級者向けの「(表示)」をクリックしてください。

こちらも色々と設定できますが、取り合えず2項目覚えれば大丈夫です。

  • 見出しレベル
    目次の対象となる見出しレベルを設定できます。
    僕はH1~H3までを対象としています。
  • スムーズ・スクロール上部余白
    上部に固定メニューバーがある時は数値を変えておきましょう。
    30のままだと見出しが被ってしまい表示されなくなります。
    見出しも含めた表示の方が、読みやすいため設定しておくと良いです。
    ちなみに僕は100pxに設定してあります。

最後に「設定の更新」をクリックします。
以上でプラグインの設定が完了しました。

実際に表示されている確認をしよう

Table of Contents Plusで作成された目次は投稿編集画面では見られません。
プレビューで確認してみましょう。

左側が投稿編集画面で、右側がプレビュー画面です。
このように表示されていれば問題なしです。

目次のあるなしではぱっと見の印象もかなり違います。
このように簡単に設定できるので是非、導入してみてください(^^)

ブログ
MP0から始める人生の歩き方

コメント