WordPressブログで「目次」を簡単に作る方法【初心者向け】

ブログで記事を書き始めたけど、わかりやすいように目次をつくりたい。目次のあるブログをよく見かけるけどどうやって作っているの?できる限り簡単にできる方法が良いなぁ?

こういった疑問に答えます。

まず初めにブログでの目次はこういったものです。↓

この記事では上記のような目次の作り方を説明しています。

ブログで目次を作る理由大きく2つありまして、どちらも読者の方のためです。主に記事の内容が長い場合、1つは記事全体の流れを把握してもらうため、2つ目は内容を知りたい項目だけ見たい場合などに、その見たい項目部分へすぐに飛んでもらえるようにするためです。

 

手順は大きく次の2つです。

今回の手順
手順1.プラグイン「Table of Contents Plus」をインストール&有効化
手順2.「Table of Contents Plus」の設定画面で目次の色や形式を決定

説明は少し長いですが、実際する作業はいたって単純です。

コードを利用しませんので、おそらく「WordPress」でブログを立ち上げて、プラグインの導入経験が一度でもある方には簡単なはずです。

ちなみに一度設定すれば、自動的に適応されるので「記事を書くごとに、目次設定をする」ということはありません。

 

スポンサーリンク

手順1.プラグイン「Table of Contents Plus」をインストール&有効化

1.まずダッシュボード画面の左端にある「プラグイン」「新規追加」をクリック

 

2.「プラグインを追加」画面上部の右端「プラグインの検索…」にて「Table of contents plus」と入力またはコピー

すると…

プラグイン「Table of contents plus」をインストールする画面が出てきます。↓

 

3.画面の「今すぐインストール」をクリック

4.有効化が出てきたら、クリック

 

これでインストールは完了です。

続いて目次のデザインなどの設定を行います。

 

手順2.「Table of Contents Plus」の設定画面で目次の色や形式を決定

1.「設定」→「TOC+」画面へ移動

画面左の「設定」の中から「TOC+」をクリック。

「TOC+」=「Table of Contents Plus」の略です。

すると「Table of Contents Plus」の設定画面が出てきます。

 

 

※設定画面上部に項目が「基本設定」「サイトマップ」「ヘルプ」と3つありますが、今回の設定に利用するのは「基本設定」のみです。

では各項目を設定していきましょう。

 

2.基本設定【ここだけ触ります】

位置:「目次を表示させる場所を選択」

目次は記事の最初に出てきた方がその記事の内容が分かりやすいはずですので、おすすめは「最初の見出しの前(デフォルト)」です。

 

表示条件:「目次を表示させる見出しの数」

見出しがいくつ以上の時に目次を表示させるのかを設定できます。

数字を大きくすることで、短めの記事の時には目次を表示させない等の設定ができます。

おすすめは「3~4」です。

 

以下のコンテンツタイプを自動挿入:「目次を入れる記事の種類」

 

 

なんか、たくさん選択肢がありますが、基本的に上2つのpostとpageだけ気にすればOKです。

最初は「post」だけチェックをいれておくことをおすすめします。

もし後で、「固定ページ」にも目次が必要であれば「page」にチェックを追加するといった感じで良いと思います。

・post=通常の記事
・page=固定ページ(一般的にプロフィール、お問合せ、プライバシーポリシー等のページ)

 

見出しテキスト:「目次のタイトル」

(A)目次の上にタイトルを表示

これは「目次」枠内の一番上に当たる部分です。

 

デフォルトだと英語で書かれていますので、「目次」や「コンテンツ」などとしておくとわかりやすいです。

このタイトルを表示させないこともできますが、表示させること[チェックあり]をおすすめします。

 

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

 

ここにチェックを入れておくと読者の方の判断で目次の「表示」or「非表示」の選択ができます。

 

(C)テキストを表示・非表示の切り替えの示し方

読者の方が目次を表示または非表示に切り替える場合、その「切り替えのために押す所に何と書くのか」を決めるところです。

ここもデフォルトでは「Contents」と英語になっています。そのままでもOKですが、読者の方にわかりやすく変更しておくのが良いでしょう。

 

おすすめは上の画像のように、「開く」と「閉じる」もしくは「表示」と「非表示」です。

 

(D)最初は目次を非表示

チェックを入れておくと、読者の方がページを開いたとき、最初は目次が非表示になります。そして、読者の方が必要な時に自分で表示してもらうように設定できます。

※僕はチェック入れていて、読者の方が必要な時に見れるようにしています。

 

階層表示

以下の2つの画像のどちらのタイプにするのかを選択できます。

チェックを入れると「階層あり」の表示になります。

どちらにするのかはお好みですが、僕は読者の方にわかりやすいのは「階層あり」だと思いますので、チェックを付けています

 

・「階層あり」

 

・「階層なし」

※いずれも別の記事の「目次」です。

 

番号振り

目次の文章の頭に番号を入れるかの設定です。

・「番号あり」

 

・「番号なし」

ここはどちらが良いのかは、あなたのブログやサイトのスタイルによります。

・見出しの最初に自分で数字を入れることが少ない→「番号あり(チェックあり)」が見やすい。

・見出しの最初に自分で数字を入れることが多い→「番号なし(チェックなし)」が見やすい。

 

※このブログでは「番号なし(チェックなし)」しています。

 

例えば…

「ケーキの作り方」という記事の場合、【調理具の準備】、【材料の準備】…と順番に書いていくとすると…

「調理具の準備」

「材料の準備」

   :

というスタイルで書くのか、それとも

「1.調理具の準備」

「2.材料の準備」

   :

というスタイルで書くのかの違いです。

 

前者の場合「番号あり(チェックあり)」後者の場合「番号なし(チェックなし)」がおすすめです。

 

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

ここは

  • チェックを入れる→「スクロール」
  • チェックをいれない→「ジャンプ」

 

目次内の文章をクリックした場合のクリックした記事内容までの移動の仕方を選択できます。

「スクロール」はスルスルスルーと滑るように移動していくタイプでして、「ジャンプ」はクリックすると一瞬で移動します。

ここはお好きな方でOKです。

※このブログは「ジャンプ(チェックなし)です

 

外観

まずは以下の3つの設定を説明していきます。

・[横幅、回り込み、文字サイズ]

 

(A)横幅

→デフォルトのまま、変更しないことをおすすめします。

 

(B)回り込み

→こちらも変更なし(デフォルト)がおすすめです。

 

(C)文字サイズ

→これも特に最初は変更を加えません。もし上の画像と数字が違う場合は95としておくのがおすすめです。もし後ほど、これで問題がある場合は変更しましょう。

 

(D)プレゼンテーション

ここは目次の全体的なデザインを決める場所ですね。

ここは好きなデザインを選んでもらってOKです。(黒だけは少し見にくいですが…)

 

 

設定を更新

プレゼンテーションまで設定したらあとは忘れずに一番下の「設定を更新」を押しましょう。これで設定が完了です。

もし設定を変更する場合もこの「基本設定」で何度でも行えます。

※「上級者向け」はそのまま放置して大丈夫です。

 

まとめ:WordPressブログで「目次」を簡単に作る方法

手順のおさらい
手順1.プラグイン「Table of Contents Plus」をインストール&有効化
手順2.「Table of Contents Plus」の設定画面で目次の色や形式を決定

設定は以上です。

一度設定を行えば、毎回自動的に適応されるので便利です。そして一度設定した後も何度でも変更が可能ですので、まずはこの記事で紹介した一般的な設定方法で利用しつつ、しばらく利用していて問題出たり、「やっぱり変更したい」と思ったら変更してみることをおすすめします。

 

今回は以上です。

 

 

 

タイトルとURLをコピーしました