目次とはどのようなものなの？

目次は、最初に追加されています。どのような事が書かれているか前もってわかるようになっています。

書籍の場合は目次を確認し、その項目が何ページに書かれているかを見てから、そこを開けて読み始めると言うステップになりますね。

webサイトの場合は、読みたい目次の項目をクリックしますとそのページに飛んで、すぐに読むことが出来るようになっていますので、とっても便利です。

 

WordPressのブログ等で目次を追加するメリットは？

目次を追加するメリットは、先ほどの　　　　　　　　　　　　　　　　　　　　　　　　　　　1.ブログ等に書かれている内容がすぐにわかる
2.目次をクリックすると読みたい箇所へジャンプできる

の２点ですが、これらは読者にとってのメリットになります。その他の以下のメリットについてはサイト側のメリットとなります。

3.目次の一部がGoogleの検索結果に表示されることがあるんです。
4.また、実際に目次は読者によくクリックされているんです。

その為、SEO的にも良い効果が期待でき、アクセスアップにつながるようになります。

目次を追加するデメリットはないの？

さて、目次を追加するデメリットはないのでしょうか。

目次の項目がたくさんありますと、スマホではなかなか本文にたどりつかないため何度もスクロールしないといけない場合があります。

この場合は、目次の横に【非表示】がありますので、これをタップしますと目次が表示されなくなりますので、本文をすぐに読みはじめることが出来るようになります。

このようにメリットは多いですが、デメリットは、あまりありませんので、目次をぜひ採用してくださいね。

それでは、さっそく目次の作り方をみていきましょう。

WordPressで目次の作り方をわかりやすく解説します！

目次作成には、４つの作り方があります。

目次挿入プラグインを使用する作り方

WordPressのプラグインでよく使用されているのが「Table of Contents Plus」と「Easy Table of Contents」と最近では、国産のプラグインの「Rich Table of Contents」があります。

WordPressで標準に備わっている機能を使用する作り方

wordpressのブロックエディタ「Gutenberg（グーテンベルク）」を使用することでプラグインを使用しなくても目次を作成することが出来ます。

目次作成機能がある無料テーマを使用する作り方

無料のテーマ「Cocoon」を使用しますと、標準でWordPressサイトで目次作成ができます。

WordPressサイトで手動作成する作り方

ページ内でHTMLで書いていく方法です。

WordPressの目次を作るなら何といってもプラグインがおすすめです！

目次の作り方には、４つの方法があると言いましたが、一番のおすすめがプラグインを導入する方法です。

一度設定するとブログ等を作成するだけで自動で目次を作ってくれますので、手間いらずでとっても便利です。

WordPressでプラグインを使った目次の作り方

最初は、一番多く導入されている「Table of Contents Plus」のプラグインです。

「Table of Contents Plus」での目次の作り方

それでは、WordPressのプラグイン導入から設定までを見ていきましょう。

目次を表示する仕組みを知ろう

目次は何をもとに作られるかと言いますと、見出しをもとにしています。

wordpressの見出しは、h1からh6まで設定できますが、目次は、h2とh3しか表示しないようにしています。

あまり細かい項目まで表示しますとわかりにくくなりますのでおすすめできません。多くてもh4までにしておく方が無難です。それと、h1も表示しないのが一般的です。

「Table of Contents Plus」を導入しよう！

wordpressの管理画面左のプラグインをクリックします。

プラグイン画面が表示されますので、上のプラグイン表示横の「新規追加」をクリックします。

右上に「プラグインの検索」窓が現れますので「Table of Contents Plus」をコピペし貼り付けてください。

最初に「Table of Contents Plus」が表示されているはずです。

左上の「今すぐインストール」をクリックしてください。「有効化」になりますのでクリックしてください。これで導入が完了しました。

プラグインの「インストール済みプラグイン」をクリックすると「Table of Contents Plus」が導入されているのがわかります。

目次の表示設定をしましょう！

「設定」をクリックしますと「TOC+」が表示されていますのでクリックしてください。

設定画面が表示されましたね。ここで設定をしていきます。

チェックしているところを確認し、チェックされてないところをチェックしてください。下にある「設定を更新」をクリックしますと完了します。

設定内容の詳細

詳細設定をする場合は、次の項目を参考にしてくださいね。

位置

ここでは、見出しを追加する位置を設定します。「最初の見出しの前(デフォルト)」　「最初の見出しの後」　「上」　「下」の中から選びます。

表示条件

目次の自動生成を行うかどうかの設定で、サイトの見出しが何個あるかによって目次を表示するかしないかを設定します。2～10のあいだで行います。

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

どのコンテンツで表示するかを決めます。固定ページ　投稿ページ　等

見出しテキスト

目次の上にタイトルを表示するかしないかを設定します。[例]　目次　コンテンツ　等

目次に「表示」「非表示」を表示し、利用者が表示の切り替えを出来るようにします。目次は常に開いておくようにしましょう。

階層表示

どの見出しまで目次に含めるかどうかを設定します。どこまで表示するかは、下の「上級者向け」の中で設定します。目次で要点やあらすじがわかるようにしておきましょう。また、表示はｈ3までにしておく方が見やすいです。

番号振り

目次に連番を表示するかどうかを設定します。

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

アンカーリンクにジャンプするかスクロールするかを選択する。

外観

外観は、デフォルトにしておきましょう。

プレゼンテーション

これもグレーのデフォルトにしておきましょう。

上級者向け

見出しレベルを設定します。h2 h3だけでいいです。

除外する見出しがあれば設定します。

「Easy Table of Contents」での目次の作り方

次は、もう一つのプラグインの「Easy Table of Contents」について説明します。

表示形式はほとんど同じです。「表示」「非表示」が右上のマークに代わっている程度です。

プラグインのインストールは、「Easy Table of Contents」を検索し同じように設定してください。

検索しますと、このように表示されますので、「今すぐインストール」をクリックし「有効化」してください。

設定画面もほとんど同じです。

ダッシュボード左の「設定」に合わせると「目次」が現れますので、クリックしますと設定画面が現れます。同じように設定をしてください。

設定例を参考にしてくださいね。

「Rich Table of Contents」での目次の作り方

WordPress管理画面の「プラグイン」から「新規追加」をクリックし右側のプラグインの検索窓に「Rich Table of Contents」と入力してください。

「今すぐインストール」をクリックし、「有効化」をクリックしてください。　これでWordPressにインストールする事ができました。

管理画面の左側のメニューに「RTOC設定」が表示されましたので、ここで設定します。

初期設定のままではこのような表示になります。

「目次のタイトル」を「Contents」から「目次」に変更

「H3のリスト形式」を「〇」から「番号」に変更しますと、H3の見出しも番号表示になります。

設定は、「基本設定」「デザイン設定」「プリセットカラー設定」「カラー設定（上級者向け）」「応用設定」がありますので、お好みで変更してくださいね。

3つのWordPressプラグインの違い

「Table of Contents Plus」プラグイン

見出しの表示非表示をテキストで表示できます。

アンカーリンクにジャンプが標準になっている。

テーマの文字の色はブルーが標準になっている。

番号振りは数字のみになっている。

「Easy Table of Contents」プラグイン

見出しの表示非表示がマークで表示しています。

アンカーリンクにスクロールが標準になっている。

テーマの文字の色はグレーが標準になっている。

カウンター(番号振り)は数字とローマ数字が選択できます。

「Rich Table of Contents」国産プラグイン

唯一の国産プラグインです。

見出しの表示形式は、他のプラグインとほぼ同じです。

どのWordPressプラグインを選択しても大差はありませんので、お好みで選んでいただけれはいいです。

WordPressのブロックエディタでの目次の作り方

ブロックエディタとは

ブロックエディタ（標準エディタ）とは、「Gutenberg（グーテンベルク）」と言い、WordPress5.0より採用された新しいテキストエディタです。

ブロックエディタの名前の由来は、その名の通りブロックで構成されているエディタだからそのように呼ばれています。

見出しや、文章、画像などをブロックごとに構成していき、配置は、後でも自由に行えるようになっています。

なぜ「Gutenberg（グーテンベルク）」という名前になったのかといいますと、活版印刷の生みの親であるヨハネス・グーテンベルクの名前からとられたものなんです。

活版印刷は、世界で広く使用されるようになりましたので、同じようにブロックエディタもHTML・CSS・PHPなどの専門知識が無くても誰もが簡単にブログ等を作成してもらえるようにという思いから命名されたものなのです。

従来のエディタ(旧エディタ)をクラシックエディタと言います。当サイトは、使い慣れたクラシックエディタを使用していますので、頑張って説明していきます。

ちなみに、旧エディタは、「Classic Editor」というプラグインを導入しますと使用出来るようになります。

旧エディタとブロックエディタとの切り替えは、「設定」の「投稿設定」の「すべてのユーザーのデフォルトエディター」の項目で切り替えることが出来ます。

ブロックエディタ使用の注意点

旧エディタを使用されてきた方は、使い勝手が全然ちがいますので、まずは、慣れることに専念してください。

Classic Editor は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。

Classic Editorプラグインより

まだ完全ではなく、バグがあったりします。また、ブロックエディタに対応していないプラグインもありますので注意が必要です。

WordPressブロックエディタの目次の作り方

管理画面の「投稿」の「新規作成」を開けてください。

タイトルを追加と⊕が表示されますので、⊕をクリックしてください。

Hの見出しをクリックしてください。

「目次」と入力してください。

目次の下の⊕クリックし、「リスト」をクリックしてください。

番号無しリストが表示されますので、今回は練習として、「テストサイト1」「テストサイト2」「テストサイト3」「テストサイト4」と書いてみてください。

このようになったと思います。

「テストサイト2」と「テストサイト３」を選択して、「リスト項目をインデント」をクリックしてください。

そうしますと、階層構造が出来上がります。

引き続き、下の⊕をクリックし[H見出し]を選択し、「テストサイト1」と「テストサイト4」をh2に「テストサイト2」と「テストサイト３」をh3にしてください。

このようになります。これで、目次と見出しが完成しました。

アンカーリンクを設定

最後にアンカーリンクを設定しましょう。

アンカーリンクを設定することにより、目次の項目をクリックしますと、それに対応した見出しまで、飛ぶことが出来るようになります。それでは、さっそくはじめましょう。

見出しの「テストサイト1」を選択します。右側の「高度な設定」をクリックしますと、「HTMLアンカー」が現れますので、　「test1」と入力し「下書き保存」してください。

つぎに、目次側の「テストサイト1」を範囲指定し、リンクマーク🔗をクリックしますと入力欄が現れますので、「#test1」と入力し、[enter]をクリックし「下書き保存」てください。

一度サイトを表示し、目次の「テストサイト1」をクリックしますと見出しの「テストサイト1」に飛びます。

残りの「テストサイト2」から「テストサイト4」も同じようにアンカーリンクを設定してください。

これで完了です。

目次作成機能がある無料テーマ「Cocoon」を使用した作り方

まずは、無料テーマ「Cocoon」をダウンロードし、WordPressにインストールしてください。

インストール方法は、こちらで確認してくださいね。

https://wp-cocoon.com/downloads/#toc7

インストールが完了しますと、WordPressの管理画面の左に「Cocoon設定」が追加されますので、クリックしてください。そうしますと、このようなCocoon設定が現れますのでその中の目次をクリックしてください。

設定画面が現れますが、特に設定をする必要はありません。無料テーマ「Cocoon」は、最初から目次機能が備わっているんです。とっても便利ですね。

プラグインなしでの目次の作り方

最後に、プラグインなしでの目次の作り方ですが、先ほどの「WordPressのブロックエディタでの目次の作り方」とほぼ同じです。

投稿画面の「テキスト」で次のようなタグを入力すれば作成することが出来ます。

テキストで、以下の見出しタグをコピペしテキストに張り付けてください。

以上が、WordPressで目次を作る方法です。

まとめ

WordPressで、どの目次の作り方が一番おすすめなのかをまとめておきます。

すでにテーマを導入済みの方の目次の作り方

すでに目次機能の無いテーマを導入済みの方は、「Table of Contents Plus」「Easy Table of Contents」「Rich Table of Contents」のプラグインがおすすめです。

まだテーマを決めておられない場合の目次の作り方

まだテーマを決めておられないのであれば、一度、目次作成機能のある無料テーマ「Cocoon」を導入してみてください。

これらは、一度設定してしまうと、以降は自動で作成してくれますので、超便利ですよ。

手動で作成する場合の目次の作り方

プラグインなしで目次を作るWordPressのブロックエディタや、手動で作成する場合は、毎回作成しなけれはならない為、とっても手間がかかりますのでお勧め出来ません。

以上を参考にしていただいて、自分にあった方法で目次を作成してくださいね。