CSS Web Wordpress

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

投稿日:2018年5月25日 更新日:

こんにちは!シミダイ(@shimidai2100)です。

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」を指定します。

下のようにひな型を用意しておきましたので活用してみてください。

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

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

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

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

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

★印の部分を変えると簡単に背景色や文字色を変えられるようにしてあります。

本記事のまとめ

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

スポンサードリンク

関連記事

-CSS, Web, Wordpress

Translate »

Copyright© shimidai2100 , 2019 All Rights Reserved.