目次を自動で生成するプラグイン「Table of Contents Plus」

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 0

色々なブログを見られている皆様は、ブログの見出し前に、階層構造になっている上に各見出しをクリックしたら、その対応する見出しへジャンプする大変便利な機能を持った目次を目にされませんか?毎回の設定は全く不要で目次が自動で生成されるプラグイン「Table of Contents Plus」をご紹介させて頂きます。

はじめに

この大変便利で、WordPresでブログをさせておられる方は、ほぼ99.9%導入されているであろう目次自動生成プラグイン「Table of Contents Plus」は導入必須と言っていいくらい本当に神プラグインだと思います。

各見出しを自動的に設定にもよりますが、「h1~h6」のタグ指定に対応した6段階の階層見出しとした目次が、設定した場所に設置した状態で、記事の投稿時に勝手に完成されます。

以下わかりやすくh1から6まで見出しを付けてみます。

h1

h2

h3

h4

h5
h6

そして対応した見出しへジャンプする機能ももちろん搭載!本当に素晴らしいです。

それでは導入から設定までして行きましょう。

設置手順(画像は全て拡大します。)

①まずは、プラグインのインストールをしましょう。

『Table of Contents Plus』  

プラグイン→新規追加なら下記、参考画面ページから。

②インストールしたら、プラグインを有効化しましょう。

③有効化したら、初期設定をしましょう。

初期設定(基本)

設定の中にある「TOC+」へ行きます。

初期設定の画面がこちらです↓↓↓

位置  見出しが生成される場所です。

  • 最初の見出しの前(デフォルト)   icon-hand-o-left H1の前に生成。ほぼこの位置でいいです。
  • 最初の見出しの後

表示条件

  • 目次が生成される見出しの数(いくつ以上で自動生成されるか?)
  • 2~10 でデフォルトは4。2~4くらいの好みでいいと思います。

見出しテキスト

  • タイトルを入れるか否か。またタイトルを入れたときの表示表現を設定。

例:目次 とか。タイトル とか。TITLE とか。

  • タイトル以降の目次折りたたみの設定。その表示表現の設定。

例:開く とか。OPEN とか。 閉じる とか CLOSE とか。

開いている状態(表示表現は[閉じる])

閉じている状態(表示表現は[開く])

階層表示

  • 階層構造で表示か否か。icon-hand-o-left チェックしてオッケーでいいです。

番号振り

  • 各階層へ番号を振るか否か。icon-hand-o-left ブログスタイルに合わせてお好みでどうぞ。

スムーズ・スクロール効果を有効化

  • 各階層の見出しへジャンプするか、スクロールするか。 ブログスタイルに合わせてお好みでどうぞ。

外観~プレゼンテーション

  • 目次の見た目変更。 ブログスタイルに合わせてお好みでどうぞ。

ちなみに、なまたまご情報局は、CSSでカスタマイズしているので全てデフォルトです。

カスタマイズしたい方は、各class名は以下を参照してください。

TOC+
————————————–*/
#toc_container 。 目次全体。

#toc_container .toc_title 。 目次タイトル

#toc_container .toc_list。 目次内リストの文字。

TOGは、左寄せになっており、設定では中央寄せに出来ません。

中央寄せにする場合は、CSSでのカスタマイズが必要になってきます。

中央寄せにする為のCSSカスタマイズは以前の記事を参考にして下さい。

WordPressブログカードと、TOC目次を1分で中央寄せに。
WordPressの、ブログカード(テーマ「Simplicity」の場合)と、プラグインTable of Contents Plusの目次タイトルを簡単に1分で中央寄せるカスタマイズです。CSSカス...

初期設定(上級者向け)

基本設定画面の一番下の「上級者向け」をクリックすると更に上級者向けの設定画面が開きます。

この中で重要な項目が二つ。

見出しレベル

  • h1~h2で任意で目次見出しに入れるか否かの個別設定。

これは、たいがいは全てチェックで使用されるとは思いますが、ブログの使い勝手で任意に設定したい方にはありがたい設定だと思います。

例:h4は目次生成して欲しくないとか。

除外する見出し

  • 目次から除外する項目

これが絶対必須です。記事本文中に関連記事や、SNSなどのシェア項目を入れておられる方は、それらは実は見出し設定になってしまっているので、目次に入ってしまうのです!

この仕様のみが、大変便利で神プラグイン「TOC」で唯一厄介な仕様なのですが、実はちゃんと除外出来るのです。

この中へ。例えば関連記事の見出しを「関連記事」シェアするの見出しを「シェアする」としていたとしたならば

関連記事*  シェアする* のように ~*とここに入力しておけば目次から除外されるのです。

複数ある場合は、説明にもある通り|で区切りましょう。上記の場合なら

関連記事*|シェアする*

と入力しておけば良いのです。

これで、全ての初期設定は終わりました。お疲れ様でした!

さいごに

どのようなブログスタイルであれ目次項目は必須で取り入れていない方はほぼ居ない、そして取り入れられている方が使っているのが、もれなくこのTOC「Table of Contents Plus」と言っても言い過ぎではないので、これからブログを始める方は、テーマを決めたら、にの一番にこのプラグインを導入される事をオススメします。

知っていて損はしないというより必須なカスタマイズだと思います。

今回も少しでも皆様のお役に立てれば幸いです。

合わせて読みたい。

WordPress CSS 壁紙を背景に簡単カスタマイズ!
WordPress CSSで、全ての背景を壁紙にする簡単カスタマイズをご紹介します。はじめにこのブログのテーマは「Simplicity」で作成しているのですが、「Simplicity」で背景...
コピペで簡単設置!アドセンス等広告上スポンサーリンク!
Googleアドセンス等の広告上に、表示されている『スポンサーリンク』はアドセンスに限らず広告を表示させるにあたって必ず表示させる義務があります。その『スポンサー...
Googleアドセンス ページ単位の広告の紹介 5分で設定!
Googleアドセンス で広告を出されている方でGoogle Adsenseホームに、ページ単位の広告の紹介が表示されているかと思います。モバイル用のアドセンス広告なのですが、そ...
WordPress CSS ヘッダー領域にウィジェットを5分でカスタマイズ設置!
WordPress CSSで、ヘッダー領域にウィジェットを設置出来ない、テーマにウィジェットエリアを、5分で簡単設置出来るようにするカスタマイズをご紹介します。はじめにこ...
WordPress CSSカスタマイズ 回転するサムネイル画像3種
WordPress CSSで、このブログで使用している回転するサムネイル画像3種類のカスタマイズをご紹介します。コピペしてすぐ使用して頂けます。CSSカスタマイズ各回転サ...
WordPressブログカードと、TOC目次を1分で中央寄せに。
WordPressの、ブログカード(テーマ「Simplicity」の場合)と、プラグインTable of Contents Plusの目次タイトルを簡単に1分で中央寄せるカスタマイズです。CSSカス...
アドセンス他広告プライバシーポリシー『ブログ用テンプレ』
Googleアドセンス広告を貼り付けてブログ及びサイトを運営していくには、プライバシーポリシーの設置が必要となってきます。今回は「なまたまご情報局」で設置したもの...
WordPressでグローバルメニューにFontアイコンを設置するプラグイン
この『なまたまご情報局』のグローバルメニューにfontのアイコンが設置されているのにお気付きでしたでしょうか?固定メニューへのアイコン設置は、固定メニューのタイ...
WordPressお問い合わせページを5分で作成。
WordPressでお問い合わせページをプラグイン、Contact Form 7、で5分で作成してしまうという記事です。  Contact Form 7ブログを作成したら、固定ページにお問い合わせ...
WordPressで広告を任意に設置するプラグイン
WordPressでアフィリエイトを、記事だけに設置して、固定ページ内には設置したくない、もしくはその逆とか任意に設置を指定出来るプラグイン、Widget Logicを記事にした...

スポンサーリンク

トップへ戻る