WordPressで目次を自動に作る方法(Easy Table of Contents)

ブログ
スポンサーリンク

こんにちは、サブです。

今日は、WordPressで目次を自動的に作成してくれるプラグイン「Easy Table of Contents」の使い方をまとめていこうと思います。

見やすいブログ記事って、たいてい記事の上の方に目次が置かれていて、記事全体の構成が一目で分かるようになっていますよね。

しかし、目次を作るために、箇条書きの書式で見出しを並べていくなど、自分で作るのは骨が折れます。

WordPressには、記事内の見出しを拾って、自動で目次を作ってくれるようなプラグインが用意されていますので、こういった便利なツールはどんどん活用していきたいです。

WordPressのブログ記事で目次を作りたいけど、どのようにすれば作れるのか悩んでいる方に、役に立つ情報になっているとうれしいです。

スポンサーリンク

Easy Table of Contentsのインストール

まずは、Easy Table of ContentsをWordPressにインストールしましょう。

WordPress管理画面の「ダッシュボード」>「プラグイン」>「新規追加」と進みます。

プラグインの検索で「easy table of contents」と入力して、検索します。

「Easy Table of Contents」と表示されたプラグインが出てきますので、「今すぐインストール」>「有効化」と進みます。

以上で、インストールが完了です。

スポンサーリンク

Easy Table of Contentsの設定

次に、Easy Table of Contentsの設定を進めていきます。

WordPress管理画面の「ダッシュボード」>「設定」>「目次」と進みます。

大量の設定項目が出てきます。

一般

「一般」では、Easy Table of Contentsの基本的な設定ができます。

サポートを有効化

目次を入れるページの投稿タイプを選択します。

自動挿入

目次を自動で入れるページの投稿タイプを選択します。
「サポートを有効化」でチェックを入れた中から、選択するかたちになります。

位置

目次を入れる位置を選択します。

僕がよく見る記事では、「最初の見出しの前」に目次が入っているケースが多いように思います。

表示条件

目次を入れる条件を選択します。
記事内の「見出しの数」が条件になります。

見出しラベルを表示

目次に見出しをつけるかどうかを選択します。

見出しラベル

「目次の見出し」で表示するテキストを入力します。
「見出しラベルを表示」にチェックを入れている必要があります。

これは「もくじ」や「目次」がよく見るパターンな気がしますね。

折りたたみ表示

目次を「折りたたみ」するかどうかを選択します。

これは、どちらのパターンもよくみますね。

初期状態

「折りたたみ表示」にした場合に、最初の状態で折りたたんでおくかを選択します。

ツリー表示

目次をツリー表示させるかどうかを選択します。

カウンター

目次内の各項目の先頭に、数字などをつけるかを選択します。

スクロールを滑らかにする

目次内の項目をクリックした場合に、滑らかにスクロールして移動するかどうかを選択します。

外観

「外観」では、その名の通り、見た目の設定ができます。

目次の幅を数パターンから選択できます。

カスタム幅

「幅」で「ユーザー定義」を選択した場合に、好きな幅を手動で入力をします。

回り込み

目次に対して、周りの文章を回り込みさせるかどうかを選択します。

タイトル文字サイズ

目次のタイトルの文字サイズを入力します。

タイトル文字の太さ

目次のタイトルの文字の太さを選択します。

文字サイズ

目次内の文字サイズを入力します。

テーマ

目次の色味を選択します。

カスタムテーマ

目次内の各要素について、細かく色を設定できます。

高度

「高度」では、さらに詳細な設定ができます。

小文字

目次内の各項目のURLに、必ず小文字を利用するかどうかを選択します。

ハイフネーション

目次内の各項目のURLに、「_」ではなく「-」を使うかどうかを選択します。

ホームページ

ホームページで目次を表示するかどうかを選択します。

CSS

Easy Table of Contents独自のCSSを使うかどうかを選択します。

チェックをすると、「外観」で設定した内容は無視されますが、自分でカスタマイズしたCSSを適用できます。

見出し

目次に含める見出しを選択します。

見出し2 + 見出し3 くらいで、設定をしているブログが多いように感じます。

除外する見出し

目次に表示させたくない見出しを設定します。

例えば、「果物」で始まる見出しを表示させたくない場合、「果物*」と設定するかたちになります。

スムーズスクロールのオフセット

スムーズスクロールをさせる場合に、スクロール先の表示位置を微調整できます。

モバイルのスムーズスクロールのオフセット

モバイル表示の場合の、「スムーズスクロールのオフセット」の設定です。

パス制限

目次を入れたくないページを、URLのパターンを指定して設定します。

デフォルトのアンカー接頭辞

目次内の各項目のURLの先頭文字を設定します。

ウィジェットの固定セレクタ

サイドバーに目次を設置する場合に、サイドバーの「class」や「id」を入力します。

それぞれ設定を終えたら、「変更を保存」で決定します。

設定した結果を確認する

どの記事でもよいので、実際にページを開いて確認をしてみます。

僕の場合、期待通りに、最初の見出しの前に目次が表示されていました。

各項目をクリックしてみると、実際にジャンプすることも確認できます。

まとめ

今日は、WordPressで目次を自動的に作成してくれるプラグイン「Easy Table of Contents」の使い方をまとめました。

目次があるだけで、ブログの見た目が改善された感じがして、うれしいですね。

コメント

タイトルとURLをコピーしました