WordPress

Table of Contents Plus(TOC+)設定&使い方!目次を簡単表示!

Table of Contents Plus(TOC+)設定&使い方

どうも、高木(@toru_fukulog)です。

今回は、記事の目次を自動生成してくれる、WordPressプラグイン「Table of Contents Plus(TOC+)」についての、設定方法と使い方を解説します。

設定するだけで簡単に導入できるので、サクッと設定しましょう!

動画解説

Table of Contents Plus(TOC+)は目次を自動生成できる

とおる
とおる
記事の目次を表示してあげることで、来てくれたユーザーが記事に自分が知りたい情報が本当にあるのかどうか、すぐに確認することができます!

記事の一番初めの見出しの上に表示してあるのが、Table of Contents Plusで自動生成された目次です。

Table of Contents Plus目次

 

目次があった方が、ひと目で記事内容を把握できるので、ユーザーにとっては優しいコンテンツです。

設定すれば、自動で目次を生成してくれるだけではなく、生成された見出しのタイトルをクリックすれば、その部分までひとっ飛びしてくれるので、スクロールする手間も省けます。

そうやって、簡単に見直せる状況なら、記事の滞在時間もアップする可能性もあります。

ユーザーに優しい=Googleからも評価されやすいということですね。

 

Table of Contents Plus(TOC+)の設定&使い方

とおる
とおる
では、実際にTable of Contents Plusを導入から、設定と使い方を解説していきます!

まずは、プラグイン「Table of Contents Plus」を、ダッシュボードのプラグインから新規追加で、検索してインストールしていきましょう。

Table of Contents Plusインストール

 

有効化まで完了したら、設定をクリックします。

Table of Contents Plus設定

 

設定画面に飛びますので、それぞれ設定していきます。

今回は触る部分だけをピックアップして解説しますので、それ以外の項目はスルーでOKです!

 

表示条件

表示条件は、見出しが何個以上あれば目次を表示させるかという条件です。

2つでは少なすぎるし、多くすれば表示されない記事も出てくるので、僕は3つ以上に設定しています。

Table of Contents Plus表示条件

 

以下のコンテンツタイプを自動挿入

デフォルトの状態では、page(固定ページのこと)となっていますが、固定ページには目次は必要ないのでチェックを外し、上のpost(投稿ページ)にチェックを入れておきましょう。

Table of Contents Plus自動挿入

 

見出しテキスト

目次のタイトルが変更できるので、分かりやすいタイトルに変更しておきましょう。

デフォルトでは英語表記なので、僕は日本語で分かりやすく表記しています。

Table of Contents Plus見出しテキスト

 

さらに、ユーザーが目次を開くか閉じるかという項目の、テキスト表示も英語表記なので、こちらも分かりやすい名前にしましょう。

Table of Contents Plusテキスト

 

スムーズ・スクロール効果を有効化

目次に表示している見出しタイトルをクリックしたあとに、一気にその部分を表示させるか、スクロールの動きでなめらかに移動させるかの項目です。

僕は動きが加わるのは、個人的に好きなので有効化しています。

動きが加わるので、多少なり表示速度が遅くなるかもしれませんので、遅くなる場合はチェックを外して下さい。

Table of Contents Plusスクロール設定

 

プレゼンテーション

目次の色を選べますので、ブログの雰囲気に合ったものを選択してみましょう。

Table of Contents Plusデザイン

 

上級者設定もあるのですが、いじらなくても問題はないのでスルーしてもらって、設定が全て完了したら、一番下の設定を保存をクリックして完了です。

Table of Contents Plus上級者設定

 

ブログではどのように表示されているのか、実際に見てみましょう。

ちゃんと表示されています。

Table of Contents Plus目次1

 

追尾ウィジェットに目次を表示する方法

とおる
とおる
目次は、記事を読んでいる途中にも表示されていると、すごく便利です!
Table of Contents Plusウィジェット

特に記事の文字数が多いと、特定の部分を見たい時に、スクロールする手間が発生します。

目次をサイドバーエリアの追尾ウィジェットに設置することで、記事の途中でもワンクリックで見出しの部分まで飛べるので、ユーザビリティーがアップします。

 

この追尾ウィジェットは、僕がオススメしているテーマ「simplicity2」「JIN」には実装されています。

今回はJINでの、設定方法を解説します。

 

JINでの目次ウィジェット設置方法

とおる
とおる
今回はJINで行いますが、ウィジェットの追加方法はsimplicity2でも同じです!

外観からウィジェットを選択します。

Table of Contents Plus追尾ウィジェット

 

左のウィジェットの中から、TOC+を選択して追尾部分に追加します。

目次と同じようなタイトルを入力して、保存してください。

Table of Contents Plus追尾設定

 

ちなみに、サイドバーのみに表示させることもできます。

その場合は、目次をサイドバーのみに表示にチェックを入れます。

Table of Contents Plus目次サイドバーのみ

 

実際にブログを見てみると、ちゃんと設置されています。

Table of Contents Plus目次サイドバー

 

ただ、見出し2と3の区別が分かりづらいですよね。

見出しごとに数字も割り振られていないので、余計に見づらい感じになります。

この設定は、CSSを追加することで分かりやすくなるので、その方法を解説していきます。

 

JINの追尾ウィジェットの目次を見やすくする

とおる
とおる
JINの仕様なのか分かりませんが、ウィジェットに追加しただけだと、分かりづらい目次になってしまいますので、これをもう少し見やすくしていきます。
Table of Contents PlusCSS追加

 

外観からカスタマイズをクリックします。

Table of Contents PlusCSS

 

一番下にある追加CSSをクリックします。

Table of Contents Plus追加CSS

 

そして、この部分に以下のCSS追加をコピーして、貼り付けて下さい。

Table of Contents PlusCSS追加貼り付け
追加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;
}

 

カスタマイズページでは、リアルタイムで変更が反映されますので確認してみると、ちゃんと見やすく反映されています。

数字の表記はないですが、だいぶマシになりましたね!

Table of Contents PlusCSS追加完成

 

最後に、動画では言い忘れていて申し訳ないのですが、追加CSSを追加したあとに、必ず上の公開をクリックしてください。

追加CSS公開

 

ちなみに、simplicity2ではデフォルトの状態で、キレイに表示されますので、CSSを追加する必要はありません!

simplicity2サイドバー目次

 

まとめ

Table of Contents Plusは、記事を見てくれるユーザーに対してより見やすくして、滞在時間をアップさせる可能性や、ユーザビリティアップが期待できる目次コンテンツです。

特にサイドバーの追尾ウィジェットに、目次を設定することで長文の記事では、1クリックで特定の場所に飛べるので、かなり便利だと思います。

こうした、細かい配慮でも記事のSEO効果は上がっていきますので、うまく活用してみてください!

ABOUT ME
高木とおる
人生を面白・可笑しく生きてます。 月間最高150万PV超え・1日16万PV超え 達成。日給8万円超え・月収60万超え達成。1ブログ770万円で売却成功。Lancersではシルバーランク。簡単なWordPressカスタマイズや画像制作、SEOライティング等を活かして副業系・求人系・投資系のライティング活動経験もあり。性格は温厚でかなりのマイペース。嫌なことは寝たら忘れるタイプ。食べること・筋トレ、神社など古き良き建物好き。詳細なプロフィールはこちら
ブログノウハウを無料でプレゼント中!

0から数ヶ月で月間150万PV、月収60万円超、日給8万円達成し、770万円で売却に成功したブログの作り方や、稼ぐために必要なマインドなど全て手に入れて、あなたの人生を面白・可笑しくしていきましょう!

 

COMMENT

メールアドレスが公開されることはありません。