ブログに目次表示動画解説付きでTable of Contents Plus（TOC+）の設定方法

目次作成と設定方法Table of Contents Plus（TOC+）による

所要時間目安：約 5 分

This session is using　 IPv4 　is established in

人気記事ランキングに順位を付けてCSSで丸く表示する方法

Table of Contents Plus（TOC+）目次のCSSカスタマイズ方法

この記事は2017年1月14日のものです。現在は状況が異なる可能性がありますのでご注意ください。

WordPress カスタマイズ伝えたいこと備忘録

目次に行く･戻る

+本日の人気記事TOP10+

メルカリ招待コード：

これまでは、ブログにおいて目次表示は要らないかなぁなんて思っていました。

ですが、
多くのサイトの方々が導入されているということとSEO的にも若干良いということなのと、訪れていただいたユーザーのユーザビリティを考慮すると…。

目次ってあったほうが良いのかなぁ。とも思ってみたりして…。
一番の理由は、今は日本語化されているのでというのが大きかったり小さかったりです。

アドセンス336pxPC閲覧記事下表示1つ目コード

少しだけ試験的に検証も兼ねてWordPressのプラグインTable of Contents Plus（TOC+）というものを追加してみました。

設定内容は、
多くのサイトの先人さん達が解説されていらっしゃいますので割愛させていただきますが、
（私、何様？_(._.)_）

https://youtu.be/LSUsZyWTPS8

自分が忘れることのないように以下に設定内容を記録（備忘録）として残しておきたいと思います。

位置
表示条件つ以上見出しがあるとき
以下のコンテンツタイプを自動挿入 post
page
見出しテキスト目次の上にタイトルを表示

目次
例: コンテンツ、目次、ページコンテンツ

ユーザーによる目次の表示・非表示を切り替えを許可
テキストを表示
表示
例: 表示
テキストを非表示
非表示
例: 非表示最初は目次を非表示
階層表示
番号振り
スムーズ・スクロール効果を有効化アンカーリンクにジャンプではなくスクロールする
外観

横幅
回り込み
文字サイズ
92

プレゼンテーショングレー (デフォルト)
水色
白
黒
透明
カスタム

上級者向け (show)

詳細設定

小文字アンカーに必ず小文字を使用
ハイフンアンカーでアンダースコアではなくハイフンを使用
ホームページを含めるホームページ上の条件を満たす項目の目次を表示
CSS ファイルを除外プラグインの CSS スタイルを読み込まない場合はチェックを入れてください。選択した場合、上の外観設定も無視されます。
テーマの見出し記号を保持お使いのテーマで番号なしリスト要素に背景が含まれている場合、対応させるにはチェックを入れてください。
見出しレベル
以下の見出しレベルを含める。チェックを外すと非表示になります。
heading 1 - h1
heading 2 - h2
heading 3 - h3
heading 4 - h4
heading 5 - h5
heading 6 - h6
除外する見出し

目次に表示しない見出しを指定します。複数の見出しをパイプ記号 (|) で区切ってください。他のテキストに一致させるには、アステリスク記号 (*) をワイルドカードとして使用してください。大文字と小文字は区別されません。例:
果物* 「果物」から始まる見出しを無視する
*果物ダイエット* 「果物ダイエット」がどこかに含まれる見出しを無視する
リンゴの木|オレンジ|黄色いバナナ「リンゴの木」、「オレンジ」、「黄色いバナナ」という見出しを無視する
スムーズ・スクロール上部余白
30
px
あなたのサイトに画面固定ヘッダーがある場合、スムースクロールの目的地がカブらないように上部オフセットを調整することができます。 30の設定は、 WordPressの管理バーに対応しています。上のほうの設定でスムーズスクロールを有効にした後にこの設定が表示されます。
パス限定

特定のページのみで表示させたい場合、カンマ（,）区切りでスラッシュ（/）からはじまるパスを設定してください。
例: /wiki/ 、/corporate/annual-reports/
アンカーのデフォルト接頭辞
i

アンカーターゲットはHTML仕様（詳細についてはREADMEを参照）に従って英数字に制限されています。何の文字が適格と、デフォルトのアンカーの接頭辞が使用されます。空白のままにすると、番号が代わりに使用されます。
このオプションは通常の文字で書かれた内容は、ASCII以外の設定に適用されます。
例: i、toc_index、index、_
使い方

あなたは完全に内容のテーブルの位置をカスタマイズしたい場合は、あなたの投稿、ページまたはカスタムポストタイプの所望の位置にそれを配置することによって、［toc］ショートコードを使用することができます。この方法では、そのコンテンツタイプに対して無効に自動挿入を持つにもかかわらず、コンテンツのテーブルを生成することができます。このショートの詳細は、 [ヘルプ]タブをご覧ください。

設定を更新

上記が私が今回設定した内容になります。

今後については、
もちろん設定内容を変更してみたり上記したように少しの間（期間は未定ですが…。）、
いろいろな意味でどのようになるのかを検証してみます。

その検証結果によっては、もちろんTable of Contents Plus（TOC+）という目次作成プラグインを外す（無効化）こともあると思われます。

その検証結果は、
最低でも3ヶ月くらいは導入してみたままいろいろな意味で検証などを重ねてみたいと思います。

3ヶ月ももたないかもしれませんが…。ポリポリ (・・*)ゞ

だって、
これまで目次というものを意識して記事自体を作成してこなかったので、逆にユーザビリティを残ってしまうかもしれないんですもんo(´^｀)o ｳｰ。

最後に、Table of Contents Plus（TOC+）というプラグインを用いた際のスクリーンショットになります。

目次Table of Contents Plus導入方法

また、より分かりやすいようにビジュアル的にも以下に残しておきたいと思います。

位置

表示条件

つ以上見出しがあるとき

以下のコンテンツタイプを自動挿入

post
page

見出しテキスト

目次の上にタイトルを表示

例: コンテンツ、目次、ページコンテンツ

ユーザーによる目次の表示・非表示を切り替えを許可

テキストを表示	例: 表示
テキストを非表示	例: 非表示

最初は目次を非表示

階層表示

番号振り

スムーズ・スクロール効果を有効化

アンカーリンクにジャンプではなくスクロールする

外観

横幅
回り込み
文字サイズ
プレゼンテーション	グレー (デフォルト) 水色白黒透明カスタム

上級者向け (show)

詳細設定

小文字	アンカーに必ず小文字を使用
ハイフン	アンカーでアンダースコアではなくハイフンを使用
ホームページを含める	ホームページ上の条件を満たす項目の目次を表示
CSS ファイルを除外	プラグインの CSS スタイルを読み込まない場合はチェックを入れてください。選択した場合、上の外観設定も無視されます。
テーマの見出し記号を保持	お使いのテーマで番号なしリスト要素に背景が含まれている場合、対応させるにはチェックを入れてください。
見出しレベル	以下の見出しレベルを含める。チェックを外すと非表示になります。 heading 1 - h1 heading 2 - h2 heading 3 - h3 heading 4 - h4 heading 5 - h5 heading 6 - h6
除外する見出し	目次に表示しない見出しを指定します。複数の見出しをパイプ記号 (`\|`) で区切ってください。他のテキストに一致させるには、アステリスク記号 (``) をワイルドカードとして使用してください。大文字と小文字は区別されません。例: `果物` 「果物」から始まる見出しを無視する `果物ダイエット` 「果物ダイエット」がどこかに含まれる見出しを無視する `リンゴの木\|オレンジ\|黄色いバナナ` 「リンゴの木」、「オレンジ」、「黄色いバナナ」という見出しを無視する
スムーズ・スクロール上部余白	px あなたのサイトに画面固定ヘッダーがある場合、スムースクロールの目的地がカブらないように上部オフセットを調整することができます。 30の設定は、 WordPressの管理バーに対応しています。上のほうの設定でスムーズスクロールを有効にした後にこの設定が表示されます。
パス限定	特定のページのみで表示させたい場合、カンマ（,）区切りでスラッシュ（/）からはじまるパスを設定してください。例: /wiki/ 、/corporate/annual-reports/
アンカーのデフォルト接頭辞	アンカーターゲットはHTML仕様（詳細についてはREADMEを参照）に従って英数字に制限されています。何の文字が適格と、デフォルトのアンカーの接頭辞が使用されます。空白のままにすると、番号が代わりに使用されます。このオプションは通常の文字で書かれた内容は、ASCII以外の設定に適用されます。例: i、toc_index、index、_

使い方

あなたは完全に内容のテーブルの位置をカスタマイズしたい場合は、あなたの投稿、ページまたはカスタムポストタイプの所望の位置にそれを配置することによって、［toc］ショートコードを使用することができます。この方法では、そのコンテンツタイプに対して無効に自動挿入を持つにもかかわらず、コンテンツのテーブルを生成することができます。このショートの詳細は、 [ヘルプ]タブをご覧ください。

「WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

: サーバ上のファイルやフォルダ削除できない時に削除する方法

: Stinger6トップページ記事間にアドセンス広告を表示・入れる方法

: WordPressプラグインなしでコンタクトフォームを作成方法

: スマホやモバイル端末でサイドバー非表示・削除にする方法

: Stinger7にテーマ変更してみたが…。

: YouTube動画が遅い。重い時、掲載しても遅くならない方法

あなたにおすすめ

: Stinger6 Stinger7 WordPress インターネットカスタマイズテーマ伝えたいこと備忘録
ページ表示速度高速化レンダリングブロックを非同期にしてみる。
ここ最近…。本当にサイトの高速化、サイトのページ表示速度を速くしなければ！！なんて思い過ぎている私です。ない知識をフルに活用してみてはいるものの、うまくいったりいかなったり、トライ・アンド・エラーそ…
もっと読む

インフィード広告アドセンス

: 伝えたいこと備忘録
ありふれた奇跡。それが日常だったのかな…。奇跡の連続が…。
奇跡って、辞書などで引かなくても（調べなくても）誰もが当たり前に使っている言葉だと思います。でも、その奇跡っていう事象・事柄の連続が毎日毎日その都度その都度に起こっていて、その積み重ねが日常なのかな。…
もっと読む

インフィード広告アドセンス

: Stinger6 WordPress
webフォントの使い方GoogleFontは遅い所か早い
ブログやホームページを運営していくにあたり時折他のPCで自分のブログやホームページを表示した所、自分のPCでの文字表示（フォント）が異なってしまいデザイン自体が崩れたりしました。しか…
もっと読む

インフィード広告アドセンス

: 伝えたいこと備忘録
YouTube動画編集中が終わらない場合の対処方法
もうすでにYouTubeというGoogleの無料動画サービスは周知の事実です。私は、最近始めてみたのですが…。そんなにアップロードするものはないのですが　トホホ・・。画像での説明などで足りないなぁ。…
もっと読む

インフィード広告アドセンス

: PC Windows10 伝えたいこと備忘録時事ネタ
Windows10アップグレード通知、ウイルスかとも…。あまりに酷すぎて（強引とも…。）
Windows10が正式にリリースされてから10ヶ月と半月になります。 3月後半ころから多くのWindows7とWindows8（Windows8.1）ユーザー（ユーザ）から悲鳴のような声が上がってい…
もっと読む

インフィード広告アドセンス

: Android スマホ伝えたいこと備忘録
GalaxyS23GalaxyS24おすすめすスマホケース
iPhoneスマホケースなどのオプション品などは数多くありますが、アンドロイド系スマホケース・スマホカバーなどは家電量販店や携帯ショップにある純正品（高い）などでも数か少ないです。 Android系ス…
もっと読む