ブログ運営

WordPressで簡単に目次を作成!Easy Table of Contentsの設定方法

ブログ運営
くまえもん
くまえもん
ドーモ!道楽者看護師夫婦、夫のくまえもんデス。

ワードプレスでブログやアフィリエイトを始めたあなた!

そろそろ目次を自動で作ってくれるプラグインをお探しではないでしょうか!?

そう、ベテランブロガーの皆さんが導入してるこんなやつです

目次サンプル

私も日々編集している中でようやく重い腰をあげることにしました。

私が今回ご紹介するのは「Easy Table of Contents」というプラグインです。

「ワードプレス 目次」なんかでググると、

みなさんこぞって「Table of Contents Plus」というプラグインを進めているのですが、

見てください、

2つのプラグイン比較

Table of Contents Plusの最終更新日がかなり古い!3年前なんです!(2018/8/5時点)

「お使いのバージョンの WordPress ではテストされていません」と、

ワードプレスの最新のバージョンでもテストされていないとのこと!

皆さん、ワードプレスのバージョンアップは常に最新のものへ更新していますか?

古いままのバージョンを使用しているということは、

セキュリティの脆弱性が放置されているということですから、外部からの不正侵入等のリスクがあるということです!

最新のアップデートをすることで、更新の追いついていないプラグインの動作不良などのデメリットもあるかもしれませんが、

潔くプラグインも更新の新しいものへチェンジすることが望ましいでしょう。

ということで、「Easy Table of Contents」を今回はお勧めします!

Easy Table of Contentsの特徴

更新が新しい

この記事を書いている2018/8/5の時点では最終更新日が3ヶ月前と、

Table of Contents Plusの最終更新3年前というのより遥かに新しいです。

ワードプレスの最新バージョンにも対応しているので使っていて安心です。

レビュー数や有効インストール数は少ないですが、

星の評価はTable of Contents Plusと同等です。

Table of Contents Plusから乗り換えやすい

というのも、設定が酷似しているので迷ったり分からなくなることはほぼ無いでしょう。

また外観もさほど変わらないですし、

デフォルトではどちらもシンプルなので、

まあ古いものを使い続けるか、

新しいものへ乗り換えるかといったところでしょう。

自動で見出しを拾ってくれるから楽

そもそも私は今まで手動で目次を作っていました。

ただベースとなるボックスは現在採用してる「JIN」というワードプレスの有料テーマにデフォルトでついてるものを使っていますが。

まあ手動ですともちろん面倒臭いんですよね、

皆さんどうやってるかわかりませんが、

私の場合は、文章書いて、

見出しのテキストをコピーして目次のとこにペーストって作業をしています。

しかしEasy Table of Contentsなら自動でh1〜h6の見出しを拾って目次作成してくれるので楽!

ジャンプだってデフォルト!

皆さん、目次作ったらせっかくなので、

見たい項目をクリックすれば、

その見出しの本文まで飛べるようにしたいですよね?

そのほうが読み手だって便利です。

もちろんEasy Table of Contentsなら初めからそういう設定になっています。

これも手動でコード打つのは手間なんですよね。

一応、手動で指定の場所にジャンプさせるためのコードの書き方をのせておきますので興味のある方はこちらを参照してください。

→(HTML初心者でもわかる指定したテキストへジャンプさせるコードの書き方

※また、もし上のリンク先からジャンプして来た方はここをクリックして戻ってください。

コードを書くというと大変そうに思いますが、手間というだけで、

コード自体はとても簡単なので、チャレンジしてみてもいいかと思います。

ちなみにこんな記事書いといてなんですが、

私たち夫婦は最終的に、

やっぱり「JIN」のデザインがいい!ということで、

手動で目次を作る方を採用しています(笑

Easy Table of Contentsの設定方法

Easy Table of Contentsのインストール

まずは「Easy Table of Contents」のインストールです。

方法① ワードプレスへログイン→プラグイン→新規追加→キーワード検索で「Easy Table of Contents」を検索。

方法② WORDPRESS.ORGからダウンロード(Easy Table of Contentsのページへ飛ぶ

インストールしたら「有効」にします。

「インストール済みプラグイン」のところにEasy Table of Contentsがあるので「設定」をクリック

インストール済みプラグインから設定

設定項目【一般】

設定項目はざっとこんな感じです。(以下の内容だと冒頭の画像のようなデザインです)

EToC設定項目1
サポートを有効化
Easy Table of Contentsを適用したい投稿タイプを選びます。
通常は「投稿」と「固定ページ」だけでいいと思います。
CSSでカスタマイズしたい場合は「カスタムCSS」もチェック。

自動挿入
上で選んだ投稿タイプのうち、自動で適用しちゃっていいやつにチェック。
上でチェック入れてココでチェックなしの場合は投稿の際に編集画面の表示オプションを開いて「Table of Contents」にチェックを入れればその記事で適用されます。
表示オプションを開く

位置
目次の挿入位置は、
・最初の見出しの前
・最初の見出しの後
・上部
・下部
から選べます。

表示条件
いくつ以上見出しがあるときに目次を挿入するか選べます。
1〜10件で設定できます。

見出しラベルを表示
「目次」とか「Index」などのいわば目次のタイトル的な部分を表示するかどうかです。
次の項目で表示テキストを設定できます。

見出しラベル
表示させたいテキストを入力。

折りたたみ表示
チェックを入れれば訪問者が目次を折りたためるようになります。

初期状態
チェックを入れると、訪問者がページを開いた時、目次を折りたたんだ状態で表示されます。
開くボタンがあるので、訪問者が押せば目次を見ることができます。

ツリー表示
チェックを入れた場合、例えば見出しがh2,h3とあった場合、h2のカウンターが「1」その中のh3のカウンターは「1.1」「1.2」「1.3」となります。
チェックを入れなかった場合は、ツリーになりませんので、h2の中にh3があっても全て順番に「1」「2」「3」「4」とカウンターが振られます。

カウンター
目次の前に付ける数字の表示方法です。
・小数点表示
・数字
・ローマ数字
・なし
の中から選べます。

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

設定項目【外観】

EToC設定項目2

「px」の中から選ぶと、どのモニターサイズの画面でも固定でその大きさで表示します。
「%」から選べば、表示させる横幅に対して自動で、それに対する何%という形で表示されます。
「ユーザー定義」は任意の設定となります。
px単位は避けたほうがいいかと思います。

カスタム幅
上の項目でユーザー定義を選択した場合に入力します。

回り込み
・なし
・左
・右
から選べますが、「なし」をお勧めします。
左右を選択した場合、場合によって表示が崩れてしまいます。

タイトル文字サイズ
設定項目【一般】の「見出しラベル」の文字のサイズを設定します。

タイトル文字の太さ
設定項目【一般】の「見出しラベル」の文字の太さを設定します。

文字サイズ
目次内の項目の文字サイズを設定します。

テーマ
目次のカラー設定です。
カスタムを選べば次の項目で好きな色を選べます。

カスタムテーマ

・背景色:背景色です。

・枠線色:枠の色です。

・タイトル色:見出しラベルの色です。

・リンク色:どこかへリンクを張っているテキストに適用されます。(Easy Table of Contentsではデフォルトで各見出しへジャンプするようになっているので、タイトル以外の文字はここの色になります)

・ホバー時のリンク色:マウスカーソルを重ねた時に変わる色です。

・訪問済みリンク色:訪問者が一度押したリンクテキストはこの色に変わります。

設定項目【高度】

EToC設定項目3

小文字
チェックを入れれば、アンカーに必ず小文字を使用します。

ハイフネーション
チェックを入れれば、英単語の改行時のアンカーに _ ではなく – が使用されます。

ホームページ
チェックを入れれば、ホームページに掲載されている項目で目次を表示します。

CSS
独自のCSSでプラグインをデザインをする場合はチェックを入れます。

見出し:
目次の生成時に含める見出しを選択します。選択を解除すると除外されます。

除外する見出し
任意で除外する見出しを設定できます。

スムーズスクロールのオフセット
サイト上部に常にメニューがある場合、上部オフセットを調整して見出しがトップメニューの下に表示されないようにすることができます。 WordPressの管理バーは30に設定されています。 この設定は、スムーズスクロールを上から有効にした後に表示されます。

モバイルのスムーズスクロールのオフセット
上のスムーズスクロールオフセットと同じ働きをしますが、ユーザーがモバイル端末を利用しているときのみ適用されます。

パス制限
パスに一致するページ内で、目次の生成を制限します。

デフォルトのアンカー接頭辞
HTML の仕様上、アンカーターゲットには英数字のみ利用できます (詳しくは readme を参照)。利用できる文字がない場合、デフォルトのアンカー接頭辞を利用します。空欄にすると数字を指定します。
この設定は通常、ASCII 以外の文字セットで書かれたコンテンツに適用されます。

ウィジェットの固定セレクタ
目次ウィジェットの固定オプションを選択可能にしたい場合、テーマが定義したサイドバーのクラスまたは ID を入力します。

まとめ

こうして見てみると、見慣れない言葉も出てきて、

初心者には難しそうに思えますが、

1つ1つ設定していけば大丈夫です。

特に設定項目【高度】のところは私も殆どいじってません。

「見出し:」のとこだけ自分が使用しているhタグを選択しておきましょう。

一度プラグインの設定をしてしまえば本当に作業は捗りますよ!

あわせて読みたい
ブログ運営
HTML初心者でもわかる指定したテキストへジャンプさせるコードの書き方 私がこの機能を欲しいと思ったのは、 プラグインを使用せずに記事の目次を作ろうと思った時でした。 ただ目次があるだけで...
ABOUT ME
くまえもん
くまえもん
このサイトの管理人。転職を繰り返した末、安定を求めてとりあえず看護師の国家資格を取得するも、やはりもっと自由に生きたいと願い、収入を増やすため副業にチャレンジし始めたとある漢!

COMMENT

メールアドレスが公開されることはありません。