vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

もくじを自動で作成。WordPressプラグイン「Table of Contents Plus」導入&初期設定

      2017/01/31

LINEで送る
Pocket

wp-table-of-contents-plus
こんにちは、okutani(@okutani_t)です。当ブログvdeepはWordPressを使って運営しているのですが、簡単にもくじを設置できるプラグインがあったらいいなーと思って検索したら、ありました。その名も「Table of Contents Plus」。

Hタグに合わせて自動でもくじを作成してくれる、便利なプラグインです。

また、CSSで簡単にレイアウト設定と、任意の記事だけもくじを設定する方法も合わせて載せておきます。

ではさっそく導入していきましょう。

スポンサーリンク

Table of Contents Plusの導入

ダッシュボードから「プラグイン」→「新規追加」をクリック。

wp-plugin-install

右上の検索バーに「Table of Contents Plus」と入力して検索、「いますぐインストール」を選択。

wp-table-of-contents-plus

有効化しておきましょう。

wp-table-of-contents-plus2

Table of Contents Plusプラグインの導入が完了しました。

基本的な設定をおこなう

初期設定を行っていきます。

ダッシュボードから「設定」→「TOC+」をクリック。設定画面が表示されます。

wp-table-of-contents-plus3

もくじを表示する位置

Main Optionsタブが開いた状態で「Position」からもくじを表示する場所を選択。私は「Before first heading」にしました。

  • Before first heading
  • 一番目の見出しの上に表示

  • After first heading
  • 一番目の見出しの下に表示

  • Top
  • 記事の一番上に表示

  • Bottom
  • 記事の一番下に表示

wp-table-of-contents-plus4

表示タイミングと記事の種類

「Show When」でHタグが◯個以上ある場合に表示する、という設定が行えます。「Auto insert for the following content types」で表示する記事の種類を設定。

今回はブログに設定するので「post」にチェックしました。

wp-table-of-contents-plus5

もくじのタイトルと表示・非表示

「Heading text」で表示するもくじにタイトルをつけることが出来ます。「Show text」と「Hide text」を設定するとユーザーがもくじを「隠すor開く」が選択できるようになります。

wp-table-of-contents-plus6

階層表示・番号表示・滑らかなスクロール

それぞれ以下の設定が行えます。

  • Show hierarchy
  • もくじの階層を表示

  • Number list items
  • もくじに番号をつける

  • Enable smooth scroll effect
  • もくじを選択すると滑らかにスクロールしながら移動

wp-table-of-contents-plus7

全てにチェックを入れました。

横幅・表示位置・文字の大きさ

もくじのデザインをある程度設定出来ます。

  • Width
  • もくじの横幅を選択

  • Wrapping
  • もくじの位置を選択。左寄せか右寄せを選ぶことができる

  • Font size
  • もくじの文字の大きさを選択

wp-table-of-contents-plus8

今回は特に設定しませんでした。

デザイン設定

「Presentation」からデザインを選択できます。お好きなデザインを選択。

私は「Grey」を選択しました。

wp-table-of-contents-plus9

表示するHタグの指定

「Advanced」の隣のshowを選択→詳細設定を開きます。

「Heading levels」から表示させたいHタグを選ぶことが出来ます。例えばH2・H3タグだけにチェックを入れれば二階層のもくじが作成されますね。

wp-table-of-contents-plus10

設定が終わったら「Update Options」を選択して保存。

次のようなもくじが自動で表示されました。

wp-table-of-contents-plus11

CSSでレイアウトを整える

デフォルトだと少し見にくいので、CSSで装飾します。次のコードをCSSファイルに記述します。

div#toc_container {
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 20px;
  border: 2px solid #E0E0E0;
}
div#toc_container p.toc_title {
  font-size: 1.1em;
}

軽く解説。

  • margin-bottom
  • 見出しとの距離を設定

  • margin-left, margin-right
  • 見出しを中央揃えに

  • font-size
  • もくじタイトルを少し大きく

こんな感じになります。

wp-table-of-contents-plus12

お好きな様にレイアウトしてみてください。

もくじの表示・非表示を任意で指定する方法

この方法で好きな場所にもくじを挿入できるように。

任意の記事だけもくじを表示

任意の記事を選んで表示するには、先ほどの設定画面にある「Auto insert for the following content types」のチェックを全て外します。

wp-table-of-contents-plus13

こうすうると全てのページでもくじが非表示になりますが、下記コードを記事内に貼り付けることで、任意の記事にもくじを挿入することができます([]は小文字で入力してください)。

[toc]

任意の記事だけもくじを非表示

常にもくじを表示するが、任意の記事だけ非表示にしたい場合。「Auto insert for the following content types」の「post」にチェック。

wp-table-of-contents-plus14

もくじが自動的に表示されます。下記コードを非表示にしたい記事に貼り付けることで、任意の記事だけもくじを表示させないようにできます。

[no_toc]

Table of Contents Plusプラグインの設定は以上です。お疲れ様でした。

まとめ

このプラグインを使うことで、簡単にもくじを挿入することができました。

文量が多い記事にもくじは必須かと思われるので、まだ導入していない方はこの機会にどうぞ。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
今まで適当にHタグを設定していたので、これから過去記事見なおしてきます。時間かかりそうだなぁー。

 - WordPressプラグイン

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

カテゴリーの順番を変更する「Category Order」プラグイン使い方

こんにちは、okutani(@okutani_t)です。今回は、かんたんにWor …

[WordPress]お問い合わせフォームを「Contact Form 7」で作成する

こんにちは、okutani(@okutani_t)です。サイトを運営していて必要 …

「Preserve Editor Scroll Position」プラグインでエディタのスクロール位置を固定する

こんにちは、okutani(@okutani_t)です。WordPressでは書 …

Table of Contents Plusで任意のページだけもくじ番号を非表示にする方法

WordPressのプラグイン「Table of Contents Plus」を …

WordPressのSEO対策定番プラグイン「All in One SEO Pack」導入手順

こんにちは、okutani(@okutani_t)です。WordPressでサイ …

SEO対策に!PubSubHubbubを使ってGoogleに素早くインデックス

こんにちは、okutani(@okutani_t)です。WordPressプラグ …

「Broken Link Checker」を使ってサイトのリンク切れを防ごう!

こんにちは、okutani(@okutani_t)です。みなさんはサイトに貼り付 …

[WordPress] 画像をあとから読み込んで表示速度アップ!「Lazy Load」プラグイン

こんにちは、okutani(@okutani_t)です。皆さんはブログ記事を書く …

WordPress全バックアップを「BackWPup+Dropbox」で行う

こんにちは、okutani(@okutani_t)です。みなさんはWordPre …

[WordPress]『Better Delete Revision』で不要なリビジョンを削除しよう

こんにちは、okutani(@okutani_t)です。WordPressで記事 …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。