どうも、とおる(@toru_fukulog)です。
今回は、記事の目次を自動生成してくれる、WordPressプラグイン「Table of Contents Plus(TOC+)」についての、設定方法と使い方を解説します。
設定するだけで簡単に導入できるので、サクッと設定しましょう！
好きな場所にジャンプできるよ！
動画解説
Table of Contents Plus(TOC+)は目次を自動生成できる
記事の一番初めの見出しの上に表示してあるのが、Table of Contents Plusで自動生成された目次です。
目次があった方が、ひと目で記事内容を把握できるので、ユーザーにとっては優しいコンテンツです。
設定すれば、自動で目次を生成してくれるだけではなく、生成された見出しのタイトルをクリックすれば、その部分までひとっ飛びしてくれるので、スクロールする手間も省けます。
そうやって、簡単に見直せる状況なら、記事の滞在時間もアップする可能性もあります。
ユーザーに優しい＝Googleからも評価されやすいということですね。
Table of Contents Plus(TOC+)の設定&使い方
まずは、プラグイン「Table of Contents Plus」を、ダッシュボードのプラグインから新規追加で、検索してインストールしていきましょう。
有効化まで完了したら、設定をクリックします。
設定画面に飛びますので、それぞれ設定していきます。
今回は触る部分だけをピックアップして解説しますので、それ以外の項目はスルーでOKです！
表示条件
表示条件は、見出しが何個以上あれば目次を表示させるかという条件です。
2つでは少なすぎるし、多くすれば表示されない記事も出てくるので、僕は3つ以上に設定しています。
以下のコンテンツタイプを自動挿入
デフォルトの状態では、page（固定ページのこと）となっていますが、固定ページには目次は必要ないのでチェックを外し、上のpost(投稿ページ)にチェックを入れておきましょう。
見出しテキスト
目次のタイトルが変更できるので、分かりやすいタイトルに変更しておきましょう。
デフォルトでは英語表記なので、僕は日本語で分かりやすく表記しています。
さらに、ユーザーが目次を開くか閉じるかという項目の、テキスト表示も英語表記なので、こちらも分かりやすい名前にしましょう。
スムーズ・スクロール効果を有効化
目次に表示している見出しタイトルをクリックしたあとに、一気にその部分を表示させるか、スクロールの動きでなめらかに移動させるかの項目です。
僕は動きが加わるのは、個人的に好きなので有効化しています。
動きが加わるので、多少なり表示速度が遅くなるかもしれませんので、遅くなる場合はチェックを外して下さい。
プレゼンテーション
目次の色を選べますので、ブログの雰囲気に合ったものを選択してみましょう。
上級者設定もあるのですが、いじらなくても問題はないのでスルーしてもらって、設定が全て完了したら、一番下の設定を保存をクリックして完了です。
ブログではどのように表示されているのか、実際に見てみましょう。
ちゃんと表示されています。
追尾ウィジェットに目次を表示する方法
特に記事の文字数が多いと、特定の部分を見たい時に、スクロールする手間が発生します。
目次をサイドバーエリアの追尾ウィジェットに設置することで、記事の途中でもワンクリックで見出しの部分まで飛べるので、ユーザビリティーがアップします。
この追尾ウィジェットは、僕がオススメしているテーマ「simplicity2」と「JIN」には実装されています。
今回はJINでの、設定方法を解説します。
JINでの目次ウィジェット設置方法
外観からウィジェットを選択します。
左のウィジェットの中から、TOC+を選択して追尾部分に追加します。
目次と同じようなタイトルを入力して、保存してください。
ちなみに、サイドバーのみに表示させることもできます。
その場合は、目次をサイドバーのみに表示にチェックを入れます。
実際にブログを見てみると、ちゃんと設置されています。
ただ、見出し2と3の区別が分かりづらいですよね。
見出しごとに数字も割り振られていないので、余計に見づらい感じになります。
この設定は、CSSを追加することで分かりやすくなるので、その方法を解説していきます。
JINの追尾ウィジェットの目次を見やすくする
外観からカスタマイズをクリックします。
一番下にある追加CSSをクリックします。
そして、この部分に以下のCSS追加をコピーして、貼り付けて下さい。
.toc_widget_list li{
font-size: 14px;
font-weight: bold;
padding: 4px 0;
}
.toc_widget_list li ul a::before{
content: “・”;
}
.toc_widget ul li ul {
border: none;
padding: 2px 0px 2px 10px;
}
.toc_widget ul {
max-height: 800px;
overflow-y: auto;
}
.toc_widget_list li ul{
margin-left: 1.0em;
text-indent: -1.0em;
}
.toc_widget_list li ul li a {
font-size: 13px;
font-weight: normal;
}
カスタマイズページでは、リアルタイムで変更が反映されますので確認してみると、ちゃんと見やすく反映されています。
数字の表記はないですが、だいぶマシになりましたね！
最後に、動画では言い忘れていて申し訳ないのですが、追加CSSを追加したあとに、必ず上の公開をクリックしてください。
ちなみに、simplicity2ではデフォルトの状態で、キレイに表示されますので、CSSを追加する必要はありません！
まとめ
Table of Contents Plusは、記事を見てくれるユーザーに対してより見やすくして、滞在時間をアップさせる可能性や、ユーザビリティアップが期待できる目次コンテンツです。
特にサイドバーの追尾ウィジェットに、目次を設定することで長文の記事では、1クリックで特定の場所に飛べるので、かなり便利だと思います。
こうした、細かい配慮でも記事のSEO効果は上がっていきますので、うまく活用してみてください！
