CSS Wordpress

Table of contents plusを使った目次の作成とカスタマイズ(中央揃え・色変更など)

2018年5月25日

こんにちは!土門大貴(daikidomon)です。

WordPressでブログを始めたばかりの人はどうやって記事に目次を入れているのか?と分からないと思います。

実は「Table of contents plus」というプラグインを使えば簡単に目次を作成することが出来るんです。

今回はWordpressに簡単に目次を入れる手順と中級書以上のために目次をカスタマイズする方法を紹介したいと思います。

この記事の目的

  • WordPressでTable of contents plusを使用して目次を作成
  • 作成した目次をカスタマイズ出来る
  • カスタマイズした目次のテンプレートを紹介

目次を入れるプラグイン「Table of contents plus」をインストール

まずは「Table of contents plus」をインストールします。

Table of contents plusは「プラグイン」⇒「新規追加」からインストールすることできます。

次にキーワードで「Table of contents plus」と検索します。

赤枠の「今すぐインストール」を選択します。

インストールが完了したら「有効化」を選択しましょう。

これで設定は完了です。

Table of contents plus(TOC+)で目次作成

ではここからは使い方を説明していきます。

使い方は簡単で、ブログの記事内に見出しを入れてあげれば自動で目次が作成されます。

「Table of contents plus」は<h2>~<h6>タグに反応して、自動で目次を挿入する機能になります。

Table of contents plus(TOC+)を設定

設定」⇒「TOC+」でTable of contents plusの設定が行えます。

基本的にはデフォルト設定でも十分綺麗な目次を作成することができます。

上級者向けはWordpressやCSSの開発が出来る人向けですので、初心者は変更する必要はありません。

Table of contents plus(TOC+)のカスタマイズ(レイアウトを変更)

ここからの内容は中級者向けの内容になります。

Table of contents plusのカスタマイズ(レイアウト変更)は設定画面からも行うことができます。

しかしCSSを利用すれば、簡単かつ柔軟に目次のレイアウトを変更することができます。

※むしろCSSが分かるとTable of contents plusを使わない方が簡単にできたりもします笑

まずはTable of contents plusの設定画面で赤枠のようにカスタムと設定します。

では次にCSSでカスタマイズしていきます。

CSSのコーディングは「style.css」や「Custom CSS and JS」で行っていきましょう。

CSSコーディング時に気になるのは、セレクターは何に使っているのか?ということですよね。

Table of contents plusのコーディング時のセレクターは、id属性で「toc_container」を指定します。

下のようにひな型を用意しておきましたので活用してみてください。
/* 目次全体 */
#toc_container {

}

/* タイトル */
#toc_container .toc_title {

}

/* リスト */
#toc_container .toc_list > li > a {
}

私が使っているTable of contents plus(TOC+)のカスタマイズテンプレートを紹介

ここで私が使っているテンプレートを紹介します。

私はプラグイン「Custom CSS and JS」でカスタマイズをしました。

WordPressの子テーマに有効化させるのが一般的なようです。

最近よく見かける中央揃えかつスマホ・PC対応されたレスポンシブな目次にしてあります。

★印の部分を変えると簡単に背景色や文字色を変えられるようにしてあります。
#toc_container {
width: 100%; /* ボックスの幅 */
background-color: #f0f8ff; /* ★ ボックス背景色 */
border: 3px solid #dcdcdc; /* ボックスの外枠 */
border-radius: 3px; /* 四隅の角を丸める */
font-size: 16px; /* 目次の文字サイズ */
box-sizing: border-box; /* はみ出しを自動調節 */
padding: 1em 1.5em 1em ; /* ボックスと項目間の余白 上1em 左右2em 下0em */
margin: 10px auto; /* 中央揃えに指定 上下には10pxづつ余白 */
}

#toc_container .toc_title {
text-align: center; /* タイトルを中央揃え */
font-size: 20px; /* タイトルの文字サイズ */
color: #2f4f4f; /* ★ タイトル文字色 */
}

#toc_container ul {
list-style: none; /* 目次のスタイル noneにすることで余計な・を削除 */
margin-bottom: 0em; /* 項目間の高さ */
}

#toc_container ul li {
margin: 0em; /* 項目の幅 */
}

#toc_container .toc_list > li > a {
font-weight: bold; /* 見出しh2を太字に */
border-bottom: 1px dotted #cccccc; /* 見出しh2の下線サイズ・色 */
font-size: 16px; /* 見出しh2の文字サイズ */
}

#toc_container ul a {
display: block; /* 項目をブロック形式で均等に */
text-decoration: none; /* 項目文字の下線なし */
color: #155bb3; /* ★ 項目の文字色 */
border-bottom: 1px dotted #cccccc; /* 見出しh3の下線サイズ・色 */
}

#toc_container ul ul {
padding: 1em 0 1em 1em; /* 見出しh3の余白 */
}

#toc_container li {
padding-bottom: 0.2em; /* 項目下の余白 */
}

本記事のまとめ

  • 目次を簡単にいれるならば「Table of contents plus」を使おう
  • 記事を書く時にh2タグやh3タグを使えば簡単に目次を作成可能
  • CSSを使えば簡単にカスタマイズ時にはid「toc_container」を利用する

関連記事

-CSS, Wordpress

Copyright© スタートアップIT企業社長のブログ , 2020 All Rights Reserved.