注目度の高い記事
【Table of Contents Plus】ブログの目次を自動で作ってくれるワードプレスプラグイン

 

わかば
私のブログにも、わー研。みたいな可愛いデザインの目次を付けたいんです

山本
Table of Contents Plus というプラグインを使えば簡単にできるよ

 

ワードプレスブログに自動で目次を設置してくれる、便利プラグイン『Table of Contents Plus』の使い方解説です。

 

1.Table of Contents Plus を公式サイトからインストールしよう

【Table of Contents Plus】ブログの目次を自動で作ってくれるワードプレスプラグイン

 

Table of Contents Plus はワードプレスの公式プラグインなので

ワードプレスの管理画面の プラグイン → 新規追加 から直接インストールすることができます。

 

公式サイトから直接プラグインをダウンロードする方は以下のリンクからどうぞ

外部リンクTable of Contents Plus 公式ページ

 

プラグインの追加方法がわからない方は、以下のページを参照してくださいね。

内部リンクWordPressにプラグインをインストールする2つの方法を解説

 

プラグインを追加ページで Table of Contents Plus と打ち込んで検索。

山本
結果が表示される場所はかならずしも同じとは限らないので注意してくださいね

 

イカリマークを目印にプラグインを見つけたら 今すぐインストール → 有効化 とクリックしましょう。

 

これで Table of Contents Plus のインストールまでは完了しました。

続いて設定方法についても解説していきます。

 

2.Table of Contents Plus の設定方法

 ワードプレス管理画面の 設定 から TOC+ をクリックします。

山本
ちなみに TOC+ とは Table of Contents Plus の略です

 

 

色々設定項目があって複雑に感じるかもしれないので

今回は わー研。と同じ設定にする方法を紹介しておきますね。

 

位置:目次を表示したい位置です → そのまま

表示条件:自動で目次が表示される条件です → 4から2に変更

以下のコンテンツタイプ~:page(固定ページ)を外してpost(投稿ページ)にチェック

 

見出しテキスト

目次の上にタイトルを表示:チェックはそのままContents から 目次 に変更

ユーザーによる目次の~表示・非表示を切り替えを許可

テキストを表示:show から 目次を表示 に変更

テキストを非表示:hide から 目次を隠す に変更

階層表示:そのまま

番号振り:チェックを外す

スムーズ・スクロール効果を有効化:チェックを入れる

 

続いては外観部分の設定となりますが、ここは特にいじる必要はありません。

 

最後のプレゼンテーションという項目で

目次の見た目を変更できるのでここは好みで決めてもらってOKです。

終わったら下にある 設定を更新 ボタンを押して設定完了です。

 

あなたのサイトには、自動でこんな感じの目次が表示されているかと思います。

 

クリックするとその見出しまで一気にスクロールしてくれるのですごく便利なんですが、

すこし見た目が寂しい感じもしますよね?(笑)

 

わかば
いわれてみると確かにちょっと物足りない感・・・

山本
わかばちゃんは Diver を使っていたよね?
それなら手軽に見た目を調整することができるよ

わかば
ホントですか? ラッキー!!

 

ここからは Diver のテーマを使っている方向けの追加の設定方法を解説します。

 

3.Diverを使ってる方向けの追加の設定方法

ワードプレスの管理画面で Diverオプション → 投稿設定 へと移動しましょう。

 

Diverの投稿設定画面に移動したら、ずーっと下にスクロールしていくと

TOC+プラグインにDiverスタイルを適用する という項目があるのでチェックを入れましょう。

 

そうすると以下の画像のように、目次のカラーを設定する画面が開きます。

基本カラー(目次の枠の色)文字色(目次の文字の色) をあなたのサイトにあった色に変更しましょう。

山本
自分のサイトの色がわからないって思った時は chromeプラグインの ColorPick Eyedropper というプラグインを使うと便利ですよ

CheckColorPick Eyedropper の使い方は以下のページの2番で解説してます。

内部リンクブログの配色どうしよう?⇒ 迷った時に使えるサイトとchromeプラグインがこれ

最後に 変更を保存 ボタンをクリックすることをお忘れなく。

 

お疲れさまでした!これで設定は完了しました!

 

山本
それでは完成した目次を見てみましょう

わかば
おおっ!すごい!!

 

さいごに

自動であなたのブログに目次を設置してくれる

便利プラグイン Table of Contents Plus の使い方解説でした。

 

1度設定してしまえば後は手をかけることなく

すべてのページで目次を表示しつづけてくれるなんて便利すぎますよね!

 

さらに Diver だとこのプラグインと連携してくれるので

あっという間にブログにあったおしゃれデザインに変更することが可能。

 

ブログ運営に慣れてきたら細かい設定を変更してみるのもいいですね。

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で使用可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事