WordPressで綺麗な目次を作りたい!【Table of Contents Plus】をカスタマイズしてみた

WordPressで綺麗な目次を設置する!

さて、今回はWordPressのコンテンツサイトでよく見かける「目次」をシンプル・綺麗に実装したいと思います。

WordPressには便利な目次プラグイン「Table of Contents Plus」があるので、そちらを利用してCSSをカスタマイズしていきます。

シンプルなデザインに仕上げてるので、フォントや色を変えるだけでどんなブログデザインにもマッチすると思います!

表示テストもWindows10のIE・Chrome、MacOSXのSafari・Chrome・Firefox、そしてスマホで確認済みです(≧∇≦)b

プラグインがすでにインストールされていれば、あとはCSSコードのコピペだけで実装できるので、専門知識がなくても大丈夫です(・∀・)

このページを読み終えれば、あなたのサイトにも下記のような目次が出来上がってるはずです(^^)

プラグイン【Table of Contents Plus】をインストールする

ではインストールの手順からいきます。
管理画面の「プラグイン」>「新規追加」に進みます。

次に右上の検索フォームに Table of Contents Plus と入力します。

Table of Contents Plusのインストール

今すぐインストール」を押して、その後「有効化」します。

目次の初期設定をする

管理画面の「設定」>「TOC+」へ進みます。

TOCの初期設定

下図を参考にチェックを外して目次タイトルを入力します。

TOCの設定画面 TOCの設定画面その2 TOCの上級設定

上記のように設定できたらOKです。

目次の表示のさせ方

【Table of Contents Plus】では目次の表示方法が2パターンあります。

  1. 条件を満たせば自動で目次を表示させる方法
  2. 記事ごとに手動で目次を表示させる方法

それぞれメリットとデメリットがあるのでサクッと説明しときます。

自動で目次表示させる方法

メリット
  • 意識しなくても自動で目次がはいるので楽
  • 条件を満たしていれば過去の記事にも適用されるので手間がかからない
デメリット
  • 目次がいらない記事にも入ってしまう

 

と、まぁこんな感じです。

WordPressを使ってるユーザーはコンテンツタイプの記事が多いので自動で設定してる人も多いかもしれません。
僕のブログはいろんなタイプの記事が交じってるので、このデメリットの部分がとてつもなく気になるんですよね。

なので僕は自動で目次が入るように設定していません。

実をいうとこのプラグインでは記事毎に非表示にさせることもできるのですが、それだったら自分で選択して目次をいれるのと一緒なんですよねw

手動で目次を表示させる方法

メリット
  • 目次がほしい記事だけに表示させることができる
  • 好きな場所に目次を挿入できる
  • 記事ごとに目次に表示させたい見出しレベルを設定できる
デメリット
  • 記事ごとにコードを挿入する必要がある
  • 過去の記事にコードを追加するのが大変

 

この方法でキツいのはデメリットの2つ目でしょうかねー。
記事数が数百とかある人にとっては1記事ずつ修正するのはつらすぎます。

逆にブログを始めたばかりの人やまだ記事数が少ない人はほとんどデメリットがないのでおすすめです。

目次の表示箇所を自由に設定できたり、記事ごとに見出しレベルを設定できるのは非常に便利です。

ちなみに僕は表示させるコードは下記のように使い分けてます。

1.見出し2だけ目次に表示させたい時
[toc]
2.見出し3まで目次に表示させたい時
 [toc heading_levels="2,3"]

 

貼り付け方は記事の投稿画面の【ビジュアルエディター】で下図のようにコードを貼り付けるだけです。

表示のさせ方については、自分のサイトや性格に合った方法を選んでください!

【Table of Contents Plus】のデザインをカスタマイズする

いよいよデザイン面ですね!
基本コピペだけで終わるので簡単です(^^)

ここでは子テーマを使っていない人にもできるようにWordPressの基本機能を使って実装する手順を解説します。

(子テーマを使ってカスタマイズしている人はそちらのCSSにコピペでOK)

子テーマを使ってない人は、作業に移る前にWordPressのバージョンを4.7以上にしておいてください。

CSSコードをコピペする

まず、コピペする場所です。
管理画面の「外観」>「カスタマイズ」に進みます。

画面が切り替わったら、一番下にある「追加CSS」を選択します。
ここに下記のCSSコードをまるっとコピペしてください。

上記コードでは僕のサイトに合うデザインの英字フォントを選んでます。
Googleフォントで好みの英字フォントを探せばオリジナルの目次ができます(^^)

フォントを変更する方法

上記コードの一部を変更します。

1.コピペしたコードの一番最初のところ

@import url('https://fonts.googleapis.com/css?family=Unica+One');

2.13行目と40行目のところ

font-family: "Unica One", cursive;

この3箇所を別のフォントのものに置き換えるだけで変更されます。

目次に使うGoogleフォントを選ぶ

Googleフォントの英字ってめっちゃ種類あるんで、どれを選べばいいかわからなくなってきますw

https://fonts.google.com/

選び方のコツとしては、数字が等幅のフォントを選ぶと綺麗に表示されます。
数字の1とかって他の数字と比べて幅がないので、表示がバラついちゃいます。

Googleフォントの画面右端にあるカテゴリーで「monospace」というものを選ぶと等幅フォントの一覧が見れます(^^)

女性には残念なお知らせですが、手書き系やスクリプト系のかわいいものは向いてないですね(._.)

コードの取得

Googleフォントでコードを取得する方法です。
めちゃ簡単なので下図を見ながらやってみてください。

色を変更する方法

次に枠の色なんかも変えたいかもしれませんよね(^^)
変更するコードは下記赤文字部分を好みのカラーコードに置き換えてくだだい。

カラーコードは下記サイトから選んでコピペできます。

http://www.colordic.org/

1.8行目のカラーコード(薄いブルーの枠線)

border: 5px solid #e1eff4;

2.43行目(01などの番号リスト)

color: #008db7;

3.55行目(見出し3の丸リスト)

color: #008db7;

 

淡いピンク系の目次に変更してみた例

table of contets 可愛いタイプ

やわらかく優しい感じになりました!
色とフォントでイメージをガラッと変わります。

ついでにこのデザインのコピペコードも載せておきます!

このデザインにしたときの注意点!

シンプル綺麗な目次のカスタマイズは以上です!
うまく表示させることができましたか?

で、最後にこのデザインにしたときの注意点をお伝えしておきますね。

【Table of Contents Plus】では、デフォルトで目次の非表示と表示の切り替えができるようになっています。

ただし、今回のカスタマイズでは目次が常に表示されるものになっています。
そのへんに抵抗ないなら大丈夫です(^^)

あ、あと一応このデザインは見出し3ぐらいまでを想定してるのでそれ以降(見出し4とか5)の表示は見出し3と同じスタイルになります。

そのあたりもご理解の上、利用いただければと!

アフィリエイターのための最高のワードプレステーマ【ATLAS】ができました

アフィリエイトに特化したWordPressテーマ「ATLAS(アトラス)」が完成しました。

操作も簡単で超使いやすいです。

ランキング機能やボタン作成、記事下CTAの設置など、サイト作成の高速化&収益性を高めるための工夫を随所に備えています。

― 主な特徴 ―

  • プロ目線で見たアフィリエイトサイトに必要な機能をすべて搭載
  • 直感的に操作でき、スピーディーに収益サイトを構築できる
  • シンプルで美しいテーマデザイン

WordPress初心者でも簡単に使えるように複雑な設定を可能な限り取りのぞきました。

また、レイアウトも自由自在にアレンジできるのでWordPressでスッキリとしたデザインのブログにも使えます。

ぜひデモサイトで確かめてみてください。

※テーマインストール後、HTMLやCSS等をカスタマイズすることなくデモサイト通りに構築できる仕様にしています。

テーマの詳細を見る デモサイトを見る