STORK19|目次を自動生成する方法とカスタマイズ例

WordPressブログに目次を導入したいとお考えでしょうか?

本記事では、WordPressで目次を自動生成する方法をご紹介します。

当ブログでは、目次プラグインを導入して以下のような目次を各ページに自動生成しています。

目次があることで、読者にとっての利便性を高めるだけでなく、自分自身も記事構成を把握しやすくなるメリットがあります。

ここでは目次を自動生成するためのプラグインの導入から、カスタマイズ方法まで解説しますので、ぜひ参考にしていただけたらと思います。

STORK19|目次を自動生成する方法

目次の導入手順は以下3ステップです。

  1. プラグインをインストール
  2. 目次の設定
  3. 目次のカスタマイズ(任意)

最初に目次を自動生成するためのプラグインをインストールし、そのあと簡単な設定をすれば完了です。

当ブログでは、そこからさらに手を加えて目次デザインのカスタマイズをしていますので、興味のある方は参考にしてみてください。

①:プラグインをインストール

まず、Table of Contents Plusというプラグインを導入します。

WordPress管理画面で【プラグイン】>【新規追加】を開きます。

画面右上の検索枠に【Table of Contents Plus】と入力し、【今すぐインストール】をクリックしましょう。

インストール後に【有効化】をクリックします。これでプラグインのインストールが完了しました。

この時点でサイトに目次が自動生成されますが、次のステップで目次の設定を整えていきましょう。

②:目次の設定

それでは目次の設定をしていきましょう。

管理画面から【設定】>【TOC+】を開きます。

基本的には見た目の好みで設定をすれば大丈夫ですが、参考までに当ブログの設定は以下です。

設定項目当ブログの設定内容
①:表示条件3つ
②:以下のコンテンツ
タイプを自動挿入
postのみチェック入れる
③:見出しテキスト・全部チェック入れる
・タイトル…もくじ
・表示/非表示…open/close
④:階層表示/番号振り階層表示のみチェック入れる
⑤:スムーズ・スクロール
効果を有効化
チェック入れる
⑥:プレゼンテーション白を選択

そのまま下にスクロールし、上級者向けの設定を開きます。

上級者向けの設定は、とりあえず【見出しレベル】の項目だけ見れば大丈夫です。【h2】と【h3】のみチェックを入れましょう。

画面一番下までスクロールし、【設定を更新】をクリックすれば設定完了です。設定がサイトに反映されているかチェックしてみてください。

これで目次の導入と設定は完了しましたが、ここからさらに手を加えて目次をカスタマイズすることも可能です。興味のある方は次の項目をご覧ください。

③:目次のカスタマイズ(任意)

プラグインで自動生成された目次を、独自にカスタマイズする方法をご紹介します。

プラグインでできる設定項目は限られており、もっと細かいところまでデザインの修正を加えたい場合は独自にCSSを追加する必要があります。

当ブログではCSSを追加して、目次の余白や色、文字のサイズなどを自分好みにカスタマイズしています。

上記のように、CSSを追加することで見た目が整い垢抜けた印象になりました。

それではCSSを追加する手順をご紹介します。

管理画面で【外観】>【カスタマイズ】を開きます。

サイドメニューを一番下までスクロールし、【追加CSS】をクリックします。

下記CSSを全てコピーペーストし、【公開】をクリックすれば完了です。

画面右側に、サイトの目次が見える状態でCSSを貼り付けるとデザインの変化がわかります。

#toc_container p.toc_title {
  font-size: 110%;/*タイトル文字サイズ*/
  text-align: center;/*中央寄せ*/
}
#toc_container .toc_title::before {
	color: #696969;/*タイトル横の三本線の色*/
}
#toc_container {
  border: 3px solid #f5f5f5;/*外枠線の幅と色*/
  width: auto!important;/*全体の幅*/
	 margin: auto;/*外側の余白*/
  margin-top: 35px;/*外側上の余白*/
}
#toc_container p.toc_title+ul.toc_list {
  margin: 2em;/*内側の余白*/
}
#toc_container .toc_list li ul li {
  font-size: .9em;/*h3の文字サイズ*/
}
#toc_container.no_bullets li,#toc_container.no_bullets ul,#toc_container.no_bullets ul li,.toc_widget_list.no_bullets,.toc_widget_list.no_bullets li {
  list-style-type:disc;/*見出し前のドット*/
}

上記CSSは、当ブログに合わせた余白や色、文字サイズにしていますので、必要であれば変更してみてください。

まとめ:STORK19|目次を導入しよう

STORK19の目次の導入方法についてご紹介しました。

プラグインを入れておくと、記事を投稿するたびに毎回自動で目次を生成してくれるのでかなり効率的です。

ぜひ目次を導入して利便性を高めましょう。

その他STORK19のカスタマイズについては以下記事でまとめていますので、ぜひ参考にしてみてください。

最後までご覧いただきありがとうございました。

▶︎ブログ記事の構成手順はこちら
▶︎ブログ収益化の手順はこちら