Easy Table of Contents プラグイン ～WordPress～
コンテンツ
Easy Table of Contentsとは
Easy Table of Contentsは投稿記事中の見出しから目次を自動で作成してくれるプラグイン。
このブログにEasy Table of Contentsプラグインをインストールして設定した時の事を備忘録として残しておく。
誰かの参考になれば幸いです。
このプラグインを選んだポイントは、
- 見出しから自動で目次を作ってくれる
- ページ内へのアンカーリンクを自動で作成してくれる
- 投稿ページ毎に個別の設定が可能
- WordPressの最新バージョンに対応していた
の４つ。
上の２つはある意味、目次プラグインとしては標準的・当たり前の機能なので下の２つがこのプラグインを選んだ主な理由となる。
インストール方法
WordPressのメニューからプラグインー＞新規追加でキーワード欄に”Easy Table of Contents”を入力して検索する。
Easy Table of Contentsが示されたら「今すぐインストール」をクリックする
インストールされたら”有効化”をクリックする
以上でインストールと有効化は終了
設定はインストール済みプラグインの一覧画面からEasy Table of Contentsの”設定”ボタンを押す。
設定
一般
全般的な動作に関する設定を行う
サポートを有効化 | 目次を有効にしたい記事の種類にチェックをする
| ||||||
自動挿入 | 目次を自動作成したい項目にチェックをする サポートを有効化にチェックをせずに自動挿入だけにチェックをしても目次は自動作成されない
| ||||||
位置 | ”最初の見出しの前（デフォルト）”を選択した 目次の表示位置を指定する、以下の位置が指定可能
| ||||||
表示条件 | ３を指定した 本文内に指定した件数以上の見出しがあるときのみ目次を自動作成する つまり見出しが指定された数よりも少ない時は目次を自動作成しない １～１０までの数字が指定可能 | ||||||
見出しラベルを表示 | チェックした 目次の上に「見出しテキスト」と「折りたたみアイコン」（後述）を表示する
| ||||||
”目次”を設定した 見出しテキストの内容 | |||||||
チェックした チェックをすると目次の右上に”折りたたみアイコン”が表示され、クリックすると目次が折り畳まれる 折り畳まれた目次
| |||||||
初期状態 | 未チェック チェックをすると初期状態で目次が折り畳まれて表示される 説明文には「初期状態で目次を非表示にします。」と書いてあるが非表示ではなくて折りたたみの意味と思われる | ||||||
ツリー表示 | チェックした チェックをすると目次がツリー構造で表示される（前述の目次） チェックを外した時
| ||||||
カウンター | ”小数点表示（デフォルト）”を選択した 目次に付く数字の表記方法を指定する、以下の指定が可能
小数点表示（デフォルト）
数字
ローマ数字
なし
| ||||||
スクロールを滑らかにする | チェックした スクロールを滑らかにする機能だが当方の環境では違いは分からなかった 一応チェックしておいた |
外観
外観に関する設定を行う
幅 | ”Auto”を指定した 目次の幅の指定を行う ピクセル指定、％指定の他にユーザ定義が可能 ユーザ定義の場合は下記のカスタム幅で設定を行う | ||||||||||||
カスタム幅 | 上記の幅で”ユーザ定義”を選択した時に任意の幅指定が可能になる 数字と単位で指定が可能 単位
| ||||||||||||
回り込み | ”なし（デフォルト）”を指定した
が指定可能 左を指定した例
目次が左に配置されて記事が右側に回り込んで表示される 回り込まれると見づらいので”なし”を選択した | ||||||||||||
タイトル文字サイズ | ”１２０％”を指定した タイトル（見出しラベルの事）を他の文字と比較して１２０％で表示するという指定
の指定が可能 | ||||||||||||
タイトル文字の太さ | ”Medium”を指定した 上記タイトルの文字の太さの指定 以下の指定が可能
「こんなに種類が無くても」とも思うけど作者のこだわりなのかも。。。 | ||||||||||||
文字サイズ | ”９５％”を指定した 目次の文字サイズの指定 本文の文字サイズと比較して若干小さくした
の指定が可能 | ||||||||||||
テーマ | 目次のテーマ（全体的な配色）の設定 ブログの他のパーツ類と合わせたかったのでカスタムを指定した
| ||||||||||||
カスタムテーマ | 上記でカスタムを選択した時に細かい色の指定が可能になる
|
高度
小文字 | 未チェック 目次には自動的にアンカーリンクが作成される 見出しが英語の時はその単語が使われて日本語の時には i-n（nは連番）が振られる（後述のデフォルトのアンカー接頭辞参照） チェックをすると英語の時のアンカーが小文字になる 未チェック チェック 何の為にこの機能があるのかはイマイチ分からなかった 明示的にアンカータグを表すためなのか。。。 |
ハイフネーション | 未チェック 「英単語の改行時のアンカーに _ ではなく – を使用します。」と説明にはあるが、見出し中に改行があっても_（アンダーバー）はアンカーに使用されないのでどの様なケースを想定しているのか、よく分からなかった |
ホームページ | 未チェック 「ホームページに掲載されている項目で目次を表示します。」と説明にはあるがこれもイマイチ意味が分からなかった |
CSS | 未チェック チェックをすると CSS スタイルの読み込みを禁止する 上記の外観の設定も無視される |
見出し | h1～h6まで全てにチェックした 目次の生成に含める見出しを選択する |
未指定 目次の表示を除外する見出しを指定する
見出しにはするけど目次に入れたくない時に使用すると思われる | |
スムーズスクロールのオフセット | ”３０ｐｘ”を指定した 以下説明文 「サイト上部に常にメニューがある場合、上部オフセットを調整して見出しがトップメニューの下に表示されないようにすることができます。 WordPressの管理バーは30に設定されています。 この設定は、スムーズスクロールを上から有効にした後に表示されます」 このサイトはヘッダー画像があるのでメニューバーで目次が隠れることは無いが、デフォルト設定の３０ｐｘのままにしておいた |
モバイルのスムーズスクロールのオフセット | 上記のモバイルでの設定 |
パス制限 | 未指定 パスに一致するページ内で目次の作成を制限する事ができる 一括してパス指定で目次の作成を制限する時に使用すると思われる |
”i”を指定した 見出しに英単語が入っていればその英単語がアンカーになるが、日本語の時にこの接頭辞に”-n”（nは連番）でアンカーが作成される i、i-1、i-2、i-3・・・ | |
ウィジェットの固定セレクタ | 未指定 サイドバーのクラスまたはIDを指定するとウィジェットの追加時に”上部に固定”のオプションが表示されるようになる サイドバーに目次を表示してなおかつスクロールしても上部に固定表示したい時に使用するオプションだと思われる 設定例） Chromeのデバッグモード（F12）でHuemanテーマのサイドバーのクラス名を探す
.sidebar-contentを指定する
するとWordPressのメニューの外観ー＞ウィジェットで目次ウィジェットをサイドバーに追加をすると「ウィジェットを上部固定する」のオプションが表示される
しかし残念ながら当方の環境では希望した動きにはならなかった スクロールをすると目次ウィジェットもスクロールしてしまったのでこの項目は指定していない |
記事ごとの設定
今までの設定はデフォルトの設定となる。
一部の項目は記事ごとに別設定が可能になっている
投稿の編集の右上の表示オプションで”Table of Contents”をチェックすると以下の項目が設定可能になる
目次の自動挿入を無効にします | チェックをするとその記事に目次は作成されない 目次が不要な一部の固定ページはこの項目をチェックした |
見出し | 目次にする見出しを選択する 見出し１（h1）～見出し６（h6）までをチェックボックスで指定出来る 例えばデフォルトの設定ではh1～h3までを自動で目次作成をする様に設定しておいて特定の記事だけはh4までの見出しを目次にする、というような使い方。 |
見出しの差し替え | 見出しを差し替える時に指定する 元の見出し|新しい見出し で指定する 利用シーンは正直ピンとこないが、まぁこんな事もできるということで |
除外する見出し | 除外する見出しを指定する 使い方は前述の”除外する見出し”と同様 |
1件の返信
[…] note to self Easy Table of Contents プラグイン ～WordPress～ | そう備忘録 WordPressのプラグインEasy Table of […]