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

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

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

 

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

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

この記事を読む方へのオススメ

カーメンテナンス
ワコーズ

カーパーツ
WAKO'S

+人気カー用品を見てみるクリックでOPEN+

→人気のカーナビランキングカーメンテナンスWAKO'S車バイク用オイル

カーメンテナンス
ワコーズ

車バイク用オイル

ワコーズカーメンテナンス

メルカリ招待コード： 招待コードをコピー

• 廃バッテリー処分方法
• シガーライターソケット増設方法
• ナビテレビが見れなくなった時
• Windows10・Windows8.1プロダクトキー
• アルミテープチューン貼る場所
• 車から異音の原因
• スロットルポジションセンサー調整方法
• バッテリー交換後アイドリング不調
• ハンドルセンターズレ調整方法
• 車のキーンナンバー確認方法
• ECUリセット方法

少しだけ試験的に検証も兼ねて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+）というプラグインを用いた際のスクリーンショットになります。

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

位置	最初の見出しの前 (デフォルト)最初の見出しの後上下
表示条件	2345678910つ以上見出しがあるとき
以下のコンテンツタイプを自動挿入	post page
見出しテキスト	目次の上にタイトルを表示 例: コンテンツ、目次、ページコンテンツ ユーザーによる目次の表示・非表示を切り替えを許可 テキストを表示 例: 表示 テキストを非表示 例: 非表示 最初は目次を非表示
階層表示
番号振り
スムーズ・スクロール効果を有効化	アンカーリンクにジャンプではなくスクロールする

外観

横幅	200px225px250px275px300px325px350px375px400px自動 (デフォルト)25%33%50%66%75%100%ユーザー指定
回り込み	なし (デフォルト)左右
文字サイズ	pt%em
プレゼンテーション	グレー (デフォルト) 水色 白 黒 透明 カスタム

上級者向け (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］ショートコードを使用することができます。この方法では、そのコンテンツタイプに対して無効に自動挿入を持つにもかかわらず、コンテンツのテーブルを生成することができます。このショートの詳細は、 [ヘルプ]タブをご覧ください。

まとめ、ショートコード［toc］によって任意の位置にも表示可能です。

一番分かりやすいのは上部の動画解説だと思いわれます。

そして、ショートコード［toc］によっても以下のように目次と表示させることも可能になっています。

［toc］←括弧は半角英数字にしてください。

またテーマによって見出しタグの使用方法は異なりますので、ご自分の使用しているテーマの見出しタグの使い方に準じて設定してみてください。

StingerやAFFINGERやmicata系のテーマは、記事中の見出しタグはh2からになっています。

追記）CSSで目次のスタイルをかっこ良くする方法。

このままの記事ではなんだかなぁ。

という感じでしたので、
以下に目次のスタイルを自前仕様・自分仕様に変更する事ができるのがわかりましたので改めて記事を作成しました。

デフォルトのスタイルでは満足いかないなぁ。という方は是非見てみてください。

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

本日、かの有名な目次作成プラグインであるTable of Contents Plus（TOC+）を導入してみました。でも、・・・・・・。なんとなくデザインがどうなの

📅 2017.01.14 | 📂 WordPress, カスタマイズ, 伝えたいこと, 備忘録

あなたにおすすめな関連記事

【AmazonタイムセールSALE車＆バイク】！

人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

年金倍増で日本経済は大復活する!デフレの終わり、第二の「高度成長」の始まり

¥2,070 （2025/05/15 06:05時点 | Amazon調べ）

Amazon

＼楽天ポイント4倍セール！／

楽天市場

＼ポイント5%還元！／

Yahooショッピング

メルカリ

ポチップ

エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー

すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイ

📅 2020.11.14 | 📂 メンテナンス, 車

バッテリー交換後の廃バッテリー処分方法3つ

バッテリー交換は、どの車においてもいずれは発生する事象です。新車で購入して3年で乗り換えなんて言う方は今ではそんなに多くはないと思います。（中に入ると思いますが、多くの方々はそれ

📅 2023.08.06 | 📂 メンテナンス, 車

あなたが訪問してから

⏰ 0 秒経過 🎉

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。