Rails

【WordPress】目次を導入するプラグイン「Table of Contents Plus」の使い方とカスタマイズ方法について解説

 
wordperss

 

今回は目次を簡単に導入できるプラグイン「Table of Contents Plus」の使い方とカスタマイズ方法について解説したいと思います。

目次は記事を読む上で非常に重要な導線の役割を果たします。また、SEOにおいても必要不可欠と言っても過言ではないので、まだの方はぜひこの機会に導入してみてください。

Jinというテンプレートを使用している場合、目次は標準装備されています。この記事は目次が標準装備されていない方向けです。
この記事の内容
  1. Table of Contents Plusとは
  2. 導入手順
  3. CSSでカスタマイズ

Table of Contents Plusとは

「Table of Contents Plus」とは、目次を記事に簡単に導入することができるプラグインです。

「Table of Contents Plus」を使用することで見出しを基準に目次を自動生成してくれるだけでなく、カスタマイズも自由自在なのでサイトの雰囲気に合った目次を作成することができます。

メリット

  • 15分もあれば導入できる（しかもCSSはコピペで済む）
  • 目次がシンプルかつ綺麗
  • 自分好みにカスタマイズ可能

デメリット

  • すでに記事数が多い人は導入が大変

目次導入には手動設定と自動設定があります。自動設定にしてしまうと予期しない箇所に目次が挿入される可能性があるため、基本的には手動設定で導入します。

しかし手動設定の場合は、過去記事にもいちいちコードを張り付けなければならないので、すでに記事が多くある人は大変になってしまいます。

  • 文章構造がしっかりしていないと目次が正しく表示されない

目次は投稿や固定ページの記事に記述したh1からh6までのHTMLタグを基準に自動生成されます。つまり、h1からh6タグを正しく使用しないと綺麗な目次になりません。

導入手順

Table of Contents Plusのインストール

WordPressの管理画面から「プラグイン」を選択し、「新規追加」に進みます。

検索から「Table of Contents Plus」を探し、「インストール」→「有効化」しましょう。

導入①

TOC＋の設定

再びWordPressの管理画面に戻り、「設定」から「TOC＋」をクリックします。

TOC＋

目次の挿入位置(自動設定の場合)

目次を自動設定したい方は「以下のコンテンツタイプを自動挿入」にチェックを入れてください。

画面1

基本設定(自動・手動設定共通)

ここでは目次のデザインを決めていきます。

以下の画像のようにチェックを入れていきましょう。

画面2 画面3 画面4 画面5

目次の表示(手動設定)

記事の投稿画面のビジュアルエディターで以下のコードを挿入します。

目次コード

CSSでカスタマイズ

赤石カズヤさん（https://crosspiece.jp/）という方が、CSSのテンプレートを提供しています。管理画面の「外観」→「カスタマイズ」→「追加CSS」に下のコードをまるっとコピペしましょう。

カスタマイズ カスタマイズ2
@import url('https://fonts.googleapis.com/css?family=Unica+One');


#toc_container {
  margin-bottom: 40px;
  padding: 15px 20px;
  background: #fff;
  border: 5px solid #e1eff4;
  border-radius: 2px;
  color: #666; }

#toc_container .toc_title {
  font-family: "Unica One", cursive;
  text-align: center;
  margin-bottom: 35px;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0px;
  font-size: 1.7em;
  border-bottom: 2px solid #dedede; }

#toc_container .toc_list {
  list-style-type: none !important;
  counter-reset: li; }

#toc_container .toc_list > li {
  position: relative;
  margin-bottom: 15px;
  margin-left: 6px;
  line-height: 1.3em;
  font-size: 0.9em; }

#toc_container .toc_list > li:after {
  counter-increment: li;
  content: "0" counter(li) " |";
  position: absolute;
  left: -40px;
  top: 0px;
  background: none;
  font-family: "Unica One", cursive;
  font-size: 1.4em;
  letter-spacing: -1px;
  color: #008db7; }

#toc_container .toc_list > li a {
  text-decoration: none !important; }

#toc_container .toc_list > li a:hover {
  text-decoration: underline !important; }

#toc_container .toc_list > li ul {
  list-style-type: disc;
  margin-top: 15px;
  padding-left: 20px;
  color: #008db7; }

#toc_container .toc_list > li > ul li {
  font-size: 0.9em;
  margin-bottom: 8px; }

@media only screen and (min-width: 641px) {
  #toc_container {
    padding: 25px 40px; }

  #toc_container .toc_title {
    font-size: 2em; }

  #toc_container .toc_list > li {
    margin-bottom: 18px;
    margin-left: 12px;
    font-size: 1em; }

  #toc_container .toc_list > li:after {
    left: -48px;
    top: 0px;
    font-size: 26px; } }

フォントの変更

@import url('https://fonts.googleapis.com/css?family=Unica+One');
font-family: "Unica One", cursive;（2か所）

 

上記の3か所をいじることでフォントを変更することができます。Googleフォントなど好きなフォントをダウンロードして挿入しましょう。

枠線の変更

border: 5px solid #e1eff4;

 

「#e1eff4」の箇所を変更することで枠線の色を変更することができます。カラーコードを検索し好きな色に置き換えてみてください。

 

 

今回は目次を簡単に導入できるプラグイン「Table of Contents Plus」について解説しました。目次を導入するしないでは記事の見やすさが大きく変わるので、まだ目次をつけていない方はぜひ参考にしてみてください。

WordPress
こんな記事もおすすめ