Divi で作成している Web サイトに目次機能を追加するのに、便利なプラグインとして「 Easy Table of Contents 」があります。今回はそのインストールと設定方法について解説します。

Divi で作成したサイトに目次機能を追加
Easy Table of Contents の設定

1.Easy Table of Contents のインストール

Easy Table of Contents をインストールするには、ワードプレスダッシュボードの「プラグイン」>「新規追加」に「 Easy Table 」と入力して下記を検索します。

「今すぐインストール」をクリックしインストールします。インストールが終わったら「有効化」します。

2.Easy Table of Contents の利用方法

Easy Table of Contents を利用するには、ちょっとした設定が必要です。

1)サポートを有効化する

設定を変更するにはワードプレスダッシュボードの、

「設定」>「目次」をクリックします。

設定画面が表示されるので「サポートを有効化」で目次表示させたいページを選び、チェックを入れます。

「変更を保存」をクリックして保存します。

2)自動で目次を表示させる

自動で目次を表示をさせるには、次の設定項目の表示させたいページにチェックを入れます。

表示条件を設定します。今回は2個以上の見出しがある場合に表示させることにします。

「変更を保存」をクリックして保存します。

以上の操作にて下記のように自動で目次が表示されるようになります。右上のアイコンで目次を開いたり閉じたりできます。

このままでも必要十分ですが、設定項目を変更することで表示を変更できます。

3.Easy Table of Contents の設定詳細

設定項目を変更するには、ワードプレスダッシュボードの、

1)設定の場所

設定を変更するにはワードプレスダッシュボードの、

「設定」>「目次」をクリックします。

2)一般設定

  • 位置:表示位置を設定できます
  • 表示条件:設定した見出しの数以上で自動表示されます
  • 見出しラベルを表示:見出しラベルを表示するかどうかを設定します
  • 見出しラベル:見出しの文字を編集できます
  • 折りたたみ表示:目次の折り畳み機能を設定します
  • 初期状態:初期状態で目次を表示するかどうか設定できます
  • ツリー表示:ツリー表示にします
  • カウンター:目次に数字を設定できます
  • スクロールを滑らかにする:スクロールを滑らかにできます

3)外観設定

  • 幅:目次の幅を様々な種類から選んで設定できます
  • カスタム幅:幅を任意の値で設定できます
  • 回り込み:文字の回り込みを設定できます
  • タイトル文字サイズ:文字のサイズを設定できます
  • タイトル文字の太さ:文字の太さを設定できます
  • 文字サイズ:文字のサイズを設定できます
  • テーマ:目次の見た目(テーマ)を設定できます

4)カスタムテーマ

自分で任意の色を選択し見た目(テーマ)を設定できます。

5)高度設定

さらに高度な設定ができます。

  • 小文字:アンカーが小文字になります
  • ハイフネーション:改行時の繋ぎ文字がアンダーバーではなくハイフンになります
  • ホームページ:文言がホームページの項目になります。存在しない場合は通常通りです
  • CSS:CSSスタイルの読み込みを禁止とします。外観の設定が反映されません
  • 見出し:見出し項目のうちどれを目次として表示させるかを選択できます
  • 除外する見出し:見出し内の文言により目次から除外する設定ができます
  • スムーズスクロールのオフセット:スムーズスクロールのオフセットを設定できます
  • モバイルのスムーズスクロールのオフセット:モバイル端末でのオフセット
  • パス制限:指定したパスに一致するページでは目次が作成されなくします
  • デフォルトのアンカー接頭辞:アンカー接頭語を変更できます
  • ウィジェットの固定セレクタ:ウィジェットとして利用するには、ウィジェットに目次を設置した後で、ここにクラスIDを登録します。使っているテーマによって違います(#sidebar 1 など

4.任意の場所に目次を表示させる

投稿や固定ページ上の任意の場所に目次を表示させるには、下記の手順で設定します。

コードモジュールに toc と記載して表示させる

表示させたい場所に「コード」モジュールを追加します。

コード設定のテキストコンテンツにコードを記載します。コードモジュールは、1行のショートコードでも、複数行のコードでもどちらでも利用できます。今回は目次を表示させるためのショートコードを記載します。[[toc]]と入力します。

以上の操作で目次が表示されるようになります。

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-lesson3-3-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成3

今回は Divi のレイアウトライブラリを使ったサイト( Webページ...
divi-reference2-logo

ワードプレス Divi リファレンス2 テーマのオプションの設定方法

Divi では専用のオプションメニューを利用して様々な設定を行えるようになっています。今回はその「テーマのオプション」の設定方法について図解します。Diviの使い方9...
divi-lesson8-2-logo

ワードプレス Divi の使い方8 外観のカスタマイズ2 サイトの文字の大きさを変える

Divi にはサイトの文字の大きさを変える複数の方法が存在します。それぞれで使いどころを分けて利用すると便利です。Diviの使い方8 外観のカスタマイズ2...

Diviのモジュールの使い方6 アクションの呼び出しとボタン

今回は Diviの各種モジュールのうちから「アクションの呼び出し」と「ボタンモジュール」の使い方について、Divi初心者向けに図解したいと思います。Diviの使い方10 モジュールの使い方6...
divi-lesson5-3-youtube-logo01

DiviでYouTubeを表示する Diviの使い方5の3

Divi は YouTube 動画も簡単にサイトに設置できるように作られています。今回はその設置方法を図解したいと思います。Diviの使い方5の3 Divi で YouTube を表示する...

Pin It on Pinterest