WordPressプラグイン 目次の作り方 – 自動で作成

スポンサーリンク
Pocket

 

目次があると記事に何が書いてあるのかがひと目で分かり、訪れる読者にも分かりやすい、書いている自分も整理が付く、といった利点もあります。

自動で目次をつくるプラグイン「Table of Contents Plus」の設定から、その外観を綺麗にデザインカスタマイズする手法まで紹介します。

Table of Contents Plusのインストール

プラグイン「Table of Contents Plus」をインストールして有効にします。

初期設定をします。

初期設定をすれば、もう自動的に目次が表示されます。

左のメニューから「設定」⇒「TOC+」をクリックします。
(”TOC +” は、Table of Contents Plus の略です)

2015-09-16_013104

 

2015-09-16_021547

  • ① 表示する場所:最初の見出しの前
    • 特に変更の必要はないです
  • ② 表示条件:3
    • 好きな数字を設定してください。3~4に設定します。
  • ③ 投稿タイプ:post と page にチェックを入れる
    • post は記事です。ここにチェックを入れないと・・・・目次が表示されない
  • ④ 見出しテキスト:Contents
    • 見出しの上に表示される文字列・・・・「目次」と入力します
    • 「表示非表示切り替えボタンのテキスト」という設定があります。これは目次を表示非表示にするボタンを付けるかどうかですが、チェックを外しておきます。
  • ⑤ 階層表示、番号振り:チェックを入れる
    • 階層表示は、見出しの階層(見出し、小見出しといった場合に階層にするかどうか)と、順番に番号をふるかどうかの設定。
    • 普通にチェックを入れておきます

2015-09-16_023101

  • ① 横幅:自動
    • 数値や相対値(横幅全体に対する%)で決められます。
    • 自動で全然OK.(後でデザインカスタマイズします)
  • ② 回り込み:なし
    • そのままの”なし”でOK.
  • ③ 文字サイズ:95%
    • 目次は記事の文字サイズより少し小さめの方がメリハリがついて見かけが良いので、”95%”でOK.
  • ④ デザイン:White
    • 初期では Grey(灰色)となってますが、White の方がすっきりしているので White にしておきます。(お好みで選んでください)

最後に「上級者向け」という項目があります。「表示」をクリックして中の設定を表示してみてください。

2015-09-16_023759

  • 小文字~テーマのCSS:特に設定不要
  • ①見出しレベル:h2, h3にチェック
    • どの見出しを目次として表示するかの設定です。
    • 細かい見出しまで目次に表示すると、目次自体が見づらくなるため、私の場合は h2, h3 のみにチェックを入れてます。

※全て入れておいても勿論OKですが、煩雑に見えないようにしたい、という場合には、h2, h3のみにしてみてください。

 

2015-09-16_024317

  • ① 除外する見出し
    • 除外したい見出しがある場合には、ここに入力しておきます。
    • 使うパターンとしては、例えば記事最後に”関連記事”を表示している場合、その見出し(関連記事)が毎回目次に表示されるのは避けたい、と言った場合、ここにその見出しとなる文字列(この例では”関連記事”)を入れておきます。

最後に「更新」をクリックして終了です!

(追記)目次に反映する見出しの付け方

目次に表示される見出しは、記事を作成中で設定します。

2015-09-16_030831

WordPressの記事の作成画面で「段落」をクリックすると、見出し1~見出し6が表示されます。
※「見出し1」は使いません

設定の中にある詳細設定で、h2, h3 など、どれを目次として表示するかの設定がありますが、それがこの段落の設定に対応しています。

デザインカスタマイズ

設定をしただけの表示を見てみると、以下のようになっています。

あなたならどんなデザインのカスタマイズを入れてみたいですか?

  • ① 外枠の角に丸みを持たせる(雰囲気が少し硬い)
  • ② 内側の余白を少し大きくする(詰まった感じがするので)
  • ③ 見出しと小見出しの文字色を変える(見やすくする)
  • ④ 見出しと小見出しの文字の大きさを変える(見やすくする)
  • ⑤ 見出し全体の横幅を広げる(余裕を持った表示する)

以降の変更はコピーしてブログのCSSに追加するだけで実現できます。

① 外枠の角に丸みを持たせる(雰囲気が少し硬い)

1
2
3
div#toc_container {
    border-radius: 5px; /* 外枠の丸み */
}

2015-09-16_035341

※角の丸みの調整は、数字の5Pxを大きくしたり小さくしたり。

② 内側の余白を少し大きくする。

1
2
3
div#toc_container {
    padding: 1em 1.5em 1.5em 1.75em; /* 内側の余白 */
}

2015-09-16_040143

内側の余白を大きくすることができます。

③ 見出しと小見出しの文字色を変える

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 文字色の変更 */
div#toc_container ul.toc_list li a:link,
div#toc_container ul.toc_list li a:visited {
    color: #372988; /* 見出しの色 h2 */
}
div#toc_container ul.toc_list li ul li a:link,
div#toc_container ul.toc_list li ul li a:visited {
    color: #8985BE; /* 見出しの色 h3 */
}
div#toc_container ul.toc_list a:hover,
div#toc_container ul.toc_list a:active {
    color: red!important;        /* 見出しのマウスオーバー時の色 */
    text-decoration: underline; /* 見出しのマウスオーバー アンダーライン表示 */
}

2015-09-16_043641

 

マウスオーバー時の色や効果について

利用するテーマによってマウスオーバー時(マウスカーソルを上に持ってきた時)の色や効果は変わります。

色を変えたい場合には「見出しのマウスオーバー時の色」(redの部分)を変更してみてください。

またアンダーラインを表示するようにしてますが、不要であれば「text-decoration: underline; 」の行は消してください。

④ 見出しと小見出しの文字の大きさを変える(見やすくする)

文字の大きさも変えて、もっとメリハリのある目次にしてみます。

1
2
3
div#toc_container ul.toc_list li ul li a {
    font-size:90%; /* 見出し3 h3 の文字の大きさ */
}

2015-09-16_044658

キュッと締まった雰囲気がしてメリハリのある良い感じです。

⑤ 見出し全体の横幅を広げる(余裕を持った表示する)

ここで見出しの文字が少ない場合を見てみると...

2015-09-16_045645

 

1
2
3
4
/* ———- 目次の横幅 ———- */
div#toc_container {
    min-width: 30%; /* 横幅の最低値 */
}

2015-09-16_050745

ここでは「記事の横幅に対して最低3分の1ぐらいの幅にします」、ということで30%という数値を指定してみました。

もちろん40%でも50%でも良いですし、200px、300pxといった絶対値でもOKです。数値を変えて、テーマに対して調度良い幅となるように・・・・

便利な隠しワザを紹介します。

その1)個別に表示項目のコントロール

沢山の見出しが並んだ目次の場合、「小見出し(見出し3)は表示せずに、見出し(見出し2)だけ表示してます。

※基本の設定を変えると全ての記事で表示が変わってしまいますので、記事個別に対応させます。

目次の表示位置に入力すると、見出し(見出し2)までの表示となります。
2015-09-16_053126

例えば、最初の見出し「こんちには」の直前にコピペします。

 

2015-09-16_053423

小見出しが非表示になってスッキリです。

その2)個別に目次を非表示

記事のボリュームが少なかったり、そもそも見出しが少なく目次を表示したくない!という場合は・・・・。

1

目次そのものが表示されません。
(文字列は勿論ビジュアルモードで入れればOK)
(辞書に読みを”もくじなし”などとして単語登録しておくと便利です)

CSS一覧

今回利用したCSS一覧です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* ————————————————
Table of Contents Plus デザインカスタマイズ!
———————————————— */
/* ———- 外枠の丸み、内側の余白 ———- */
div#toc_container {
    border-radius: 5px; /* 外枠の丸み */
}
div#toc_container {
    padding: 1em 1.5em 1.5em 1.75em; /* 内側の余白 */
}
/* ———- 文字色の変更 ———- */
div#toc_container ul.toc_list li a:link,
div#toc_container ul.toc_list li a:visited {
    color: #372988; /* 見出しの色 h2 */
}
div#toc_container ul.toc_list li ul li a:link,
div#toc_container ul.toc_list li ul li a:visited {
    color: #8985BE; /* 見出しの色 h3 */
}
div#toc_container ul.toc_list a:hover,
div#toc_container ul.toc_list a:active {
   color: red!important; /* 見出しのマウスオーバー時の色 */
    text-decoration: underline; /* 見出しのマウスオーバー */
}
/* ———- 文字の大きさ変更 ———- */
div#toc_container ul.toc_list li ul li a {
    font-size:90%; /* 見出し3 h3 の文字の大きさ */
}
/* ———- 目次の横幅 ———- */
div#toc_container {
    min-width: 30%; /* 横幅の最低値 */
}

ブログのCSSにコピペします。

※下記サイトで詳しく説明されてます

参考 TJBさんのブログ

 

 

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です