・デザインやカスタマイズ性ってどうなの？
・Table of Contents Plusよりも使いやすい？
以上のような疑問にお答えします。
姉妹プラグインとして「Table of Contents Plus」があり使用している方も多くいらっしゃると思いますが、このプラグインは長い間開発者によって、プラグインの更新とWordPressによる検証が行われていない問題があり、仕方なくEasy Table of Contentsに切り替えた方がいると思います。
今回は、Easy Table of Contentsを初めて使う方向けに設定方法や使い方をご紹介していきます。
「Table of Contents Plus」と異なる点は、「目次」という点での機能はほぼ同じですが、自分でCSSデザインを追加してデザインを自由にカスタマイズする必要がある、ということです。
「Table of Contents Plus」はデフォルトでもデザインは整っていますが、Easy Table of Contentsはデフォルトデザインだととても味気なく地味です！
では、一緒にEasy Table of Contentsについてみていきましょう。
Easy Table of Contentsのインストールと有効化
ではまず、プラグインのインストールと有効化の作業を進めていきましょう。
「WordPress管理画面」→「プラグイン」→「新規追加」
検索窓から「Easy Table of Contents」と検索
「今すぐインストール」→「有効化」
これでプラグインのインストールと有効化は完了です。
Easy Table of Contentsの設定
プラグインのインストールと有効化を終えたら、次はプラグインの設定を行っていきます。
「WordPress管理画面」→「インストール済みプラグイン」→「Easy Table of Contents」→「設定」
以上の順でプラグイン設定画面まで移行しましょう。
一般設定
では、ここから一つずつみていきましょう。
設定の大部分はTable of Contents Plusとあまり変わりませんので、Table of Contents Plusを使用したことがある方はどんどん進めて頂いて構いません！
①：サポートを有効化
この項目では、Easy Table of Contentsの目次としてどの項目を有効にするか選択します。
ここでは、「投稿」と「固定ページ」のみでOKです。
②：自動挿入
自動挿入は、自動的に目次を挿入するコンテンツを選択することができます。
先ほどの「サポートを有効化」でチェックした項目と同じものを選択しておきましょう。
③：位置
目次を設置する場所を指定できます。
一般的には読者が見やすいように「最初の見出しの直前（デフォルト）」に設置しておきましょう。
④：表示条件
表示条件は、いくつ以上の見出しがあれば目次を表示させるのかを指定することができます。
見出しが少なすぎても違和感があるので３〜がちょうど良いでしょう。
⑤：見出しラベルを表示
この機能は、目次の上（各見出しの上）に目次タイトルを表記するかどうか指定できます。
基本的に目次にはタイトルを付けるのでチェックを入れ、「目次」「もくじ」「コンテンツ」などと記入し目次タイトルを表示させておきましょう。
⑥：折りたたみ表示
目次をユーザーが折りたためるか指定できます。
目次を開いままにしておくならチェックは外しておきましょう。
⑦：初期状態
初期状態で目次を開いたままにするか、閉じた状態にしておくか指定できます。
目次はユーザーにとって「どこにどんな情報があるか」を判別してあげる役目があるで、開いた状態にしておく方が親切かもしれません。
⑧：ツリー表示
目次をツリー表示（見出しごとに枝分かれにして表示）するか指定できます。
ツリー表示させた方が記事の構成が一目で分かり、内容も把握されやすいのでツリー表示させておきましょう。
⑨：カウンター
見出しの前に数字を入れることができます。
小数点表示（デフォルト）・数字・ローマ数字・なしが選択でき、基本的にはデフォルトで問題ないでしょう。
見出しには小数点を表示させた方が見出しの見栄えとしては良く見えるので少数点表示させておきましょう。
注意したいのが、小数点表示させるのであれば記事の各見出しに数字は入れないでおきましょう。
ローマ数字も小数点表示されるのでお好みに合わせてローマ数字にしてもOKです。
⑩：スクロールを滑らかにする
この項目にチェックを入れたら、見出しをクリックした際にクリックした見出しまでスクロールしながら見出しまで移動し、チェックを外せば瞬間的に見出しまで移動します。
外観
次に外観を設定していきます。
Table of Contents Plusより細かく設定できるので自分のお好みで見やすいようアレンジしていきましょう。
①：幅
目次の横幅を設定できます。
「Auto」か「１００%」に設定しておけば間違いありません。
「Auto」であれば、見出しの文字数に応じた長さの横幅に調節してくれます。
「１００%」であれば、記事ページの長さいっぱいに調節してくれます。
②：カスタム幅
先ほどの「幅」で設定できない幅を設定した場合に自分で入力して設定します。
特にこだわりがなければ基本的にデフォルトで構いません。
③：回り込み
目次の下にテキストがある場合に、テキストを目次の左右どちらかに配置してあげる設定です。
デフォルトで問題ありません。
④：タイトル文字サイズ
目次タイトルの文字サイズを変更できます。
任意のサイズに変更して見やすいように調整しましょう。
⑤：タイトル文字の太さ
目次タイトルの文字の太さを設定できます。
適度な太さに設定しましょう。
⑥：文字サイズ
見出しの文字サイズを変更できます。
ここはタイトル文字のサイズと区別をして、多少小さくするなどして見やすいよう心がけましょう。
テーマ
目次のデザインとカラーを設定できます。
「テーマ」にて基本ベースのカラーを選択しても構いませんし、「カスタムテーマ」にて自分好みのカラーにするのでもOKです。
高度
最後に、Table of Contents Plusでいうところの「上級者」の設定をします。
以降で説明する項目以外はデフォルトでOKです。
①：CSS
この項目にチェックを入れるとプラグインのCSS自体を無視して、自分で入力したCSSコードが目次デザインに反映されます。
Easy Table of Contentsはデザインが地味なので自分でCSSコードを書いてデザインをアレンジすることをお勧めします。
「WordPress管理画面」→「外観」→「テーマエディター」→「子テーマ（childスタイルシート）」
もしくは、
「WordPress管理画面」→「外観」→「カスタマイズ」→「追加CSS」
にてCSSコードを入力していきます。
もちろん、ブログ初心者の方はフロントエンドの知識については皆無だと思いますので、こちらのサイトを参考にコードをコピペすればOKです！
ある程度種類があるのでお好きなデザインに変更してみて下さい。
ちなみに僕はWordPressテーマ「SANGO」風にしてみました！
CSSを変更した際に、何らかの理由によりサイトデザインが崩れる可能性がありますので必ずバックアップを取っておきましょう！
まだバックアップ手段を取れていない方は下記事を参考にどうぞ。
-
-
【専門知識不要】WordPressでのバックアップの取り方とUpdraftPlusの使い方
続きを見る
②：見出し
この項目では目次に表示させる見出しを指定できます。
表示させる見出しが多すぎても読者にとって分かりにくくなる場合があるので、見出しレベルはh２〜h３もしくはh１〜h２程度が良いでしょう。
自分が普段使用している見出しレベルに合わせて２つチェックを入れておきましょう。
Easy Table of Contentsの設定まとめ
いかがでしたでしょうか。
Easy Table of Contentsの設定と使い方自体は簡単だったと思います。
しかし、デフォルトのままだとどうしてもデザイン性に欠ける部分があるので、デザインに拘りたい方は自分でCSSコードを入力していかないといけません。
その場合、CSSが上手く反映されずCSS知識に自信がない方やブログ初心者の方は、デザインだけで時間が取られる場合がありますので分からないところがあればサイドバーに「LINE友だち追加」ボタンを設置してますので気楽に質問して下さい！
Table of Contents Plusについての記事は下記を参考にどうぞ！
-
-
【WordPress】目次プラグイン「Table of Contents Plus」の設定方法
続きを見る