ワードプレス初心者が記事の目次を作ってみました

スポンサーリンク

こんにちは。

まだまだワードプレスの使い方を勉強中ですが、今回ワードプレスで始めて記事の目次を作ってみました。

やってみると初心者の僕でも簡単に目次の作成が出来ました。

僕がワードプレスで記事に目次を作成した方法は、ワードプレスのプラグイン「Table of Contents Plus」を使用する方法です。

このプラグインを導入するだけで、誰でも簡単に目次を作成することが出来ます。

Table of Contents Plusとは

「Table of Contents Plus」とは、記事の目次を自動生成できるプラグインです。

記事に書いたH1からH6までのHTMLタグを基に目次を自動生成します。

H1からH6は見出しタグと言います。

目次が自動生成されるので、初心者の方でも簡単に目次を作成することが出来ます。

手動で目次を作成することも出来るみたいなのですが、僕はあまり手間をかけたくないので記事の目次を自動生成してくれるプラグイン「Table of Contents Plus」を使用します。

Table of Contents Plusのインストール

「Table of Contents Plus」のインストールはとても簡単です。

管理画面のプラグインから新規追加で「Table of Contents Plus」を検索し、インストールして下さい。

これで「Table of Contents Plus」のインストールは完了です。

Table of Contents Plusの設定

目次を表示する場所、条件、デザインなど、自分の好みに設定しましょう。

下記「Table of Contents Plus」の設定項目となります。

  • 表示する場所:目次の表示位置を設定する。
  • 表示条件:いくつ以上見出しがある時に目次を生成するかを設定する。
  • 次の投稿タイプのときに表示:目次を設置する記事の種類を設定する。
  • 見出しテキスト:目次のタイトルを設定する。表示非表示切り替えボタンテキストにはそのまま表示非表示と入力するのが無難です。
  • 階層表示:目次の階層を表示させるか設定する。
  • 番号振り:目次に番号を付けるか設定する。
  • スムーススクロール:目次をクリックした時に、滑らかにスクロールさせるか、一気に飛ぶか設定する。
  • デザイン:目次のデザインを設定する。
上記設定項目を自分が目次で表示させたい設定に変更します。

変更後は「更新」ボタンを押してください。

また、上級者向けの設定項目もあるのですが、僕は特に設定を変更していません。

記事に見出しタグを付ける

自分が書いている記事の見出し部分に「テキスト」から「H1~H6」の見出しタグを付けましょう。

見出しタグには「H1~H6」までありますが、「H1」の後は「H2」と見出しに付ける順番があります。

見出しタグ「H1」はタイトルで1ページに1つにするのが良いと言われているので、目次に見出しタグを付ける際に、まずは「H2」の見出しタグを付けます。

の記事でいうと

  • Table of Contents Plusとは?
  • Table of Contents Plusのインストール
  • Table of Contents Plusの設定
  • 記事に見出しタグを付ける
の部分に「テキスト」から見出しタグをつけます。
  • <H2>Table of Contents Plusとは?</H2>
  • <H2>Table of Contents Plusのインストール</H2>
  • <H2>Table of Contents Plusの設定</H2>
  • <H2>記事に見出しタグを付ける</H2>
こんな感じで設定します。

これで記事を更新して確認すると、記事の見出しタグの部分 (H2のタグ)に沿ってばっちり目次が出来ます。

見た目も良いですね。

今後も目次活用していきます。

※2017年6月2日現在、サイト速度を早くするため、プラグイン「Table of Contents Plus」は使用していません。

スポンサーリンク

ランキング参加中
にほんブログ村 ライフスタイルブログ シンプルライフへ にほんブログ村 ライフスタイルブログへ

コメントを残す

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