これまでは、ブログにおいて目次表示は要らないかなぁなんて思っていました。
ですが、
多くのサイトの方々が導入されているということとSEO的にも若干良いということなのと、訪れていただいたユーザーのユーザビリティを考慮すると…。
目次ってあったほうが良いのかなぁ。とも思ってみたりして…。
一番の理由は、今は日本語化されているのでというのが大きかったり小さかったりです。
メルカリ招待コード：
プロモーションを含みます
ブログに目次表示動画解説付きでTable of Contents Plus（TOC+）の設定方法
2025年7月11日 (金曜日)本日の人気記事トップ１０
This session is using IPv4 is established in
今日は2025年7月11日です。
この記事は2017年1月14日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年7月11日 (金曜日)↓における週間月間人気記事トップ３は？↓
- 本日
- 週間
- 月間
計測データがありません。
-
カーメイトのエンジンスターターでエラー15表示と対処方法 37PV
夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 36PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 25PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
-
カーメイトのエンジンスターターでエラー15表示と対処方法 37PV
夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…
-
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 36PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…
-
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 25PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
少しだけ試験的に検証も兼ねて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+）というプラグインを用いた際のスクリーンショットになります。
また、より分かりやすいようにビジュアル的にも以下に残しておきたいと思います。
| つ以上見出しがあるとき | |
| 以下のコンテンツタイプを自動挿入 | |
外観
| プレゼンテーション |
|---|
上級者向け (show)
詳細設定
| 見出しレベル | 以下の見出しレベルを含める。チェックを外すと非表示になります。
|
|---|---|
| |
| px | |
使い方
あなたは完全に内容のテーブルの位置をカスタマイズしたい場合は、あなたの投稿、ページまたはカスタムポストタイプの所望の位置にそれを配置することによって、［toc］ショートコードを使用することができます。この方法では、そのコンテンツタイプに対して無効に自動挿入を持つにもかかわらず、コンテンツのテーブルを生成することができます。このショートの詳細は、 [ヘルプ]タブをご覧ください。
まとめ、ショートコード［toc］によって任意の位置にも表示可能です。
一番分かりやすいのは上部の動画解説だと思いわれます。
そして、ショートコード［toc］によっても以下のように目次と表示させることも可能になっています。
［toc］←括弧は半角英数字にしてください。
またテーマによって見出しタグの使用方法は異なりますので、ご自分の使用しているテーマの見出しタグの使い方に準じて設定してみてください。
StingerやAFFINGERやmicata系のテーマは、記事中の見出しタグはh2からになっています。
追記）CSSで目次のスタイルをかっこ良くする方法。
このままの記事ではなんだかなぁ。
という感じでしたので、
以下に目次のスタイルを自前仕様・自分仕様に変更する事ができるのがわかりましたので改めて記事を作成しました。
デフォルトのスタイルでは満足いかないなぁ。という方は是非見てみてください。
あなたにおすすめ
¥1,980 （2025/07/06 13:22時点 | Amazon調べ）
ポチップ
あなたが訪問してから
⏰ 0 秒経過 🎉入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
- カーメイトのエンジンスターターでエラー15表示と対処方法
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ
- アイドリングストップシステム異常警告灯表示対処方法
- 車のキーナンバー確認方法。キーレス紛失や壊れた時
- ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に
- エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
- キッチンシンク下がドブ臭い下水臭い原因と解決方法
- PITWORKエンジンリフレッシュのレ PV効果ありワコーズRECSに似ている
おすすめの記事一部広告
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ88
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく66
- 車のキーナンバー確認方法。キーレス紛失や壊れた時63
- カーメイトのエンジンスターターでエラー15表示と対処方法55
- アイドリングストップシステム異常警告灯表示対処方法49
- ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に45
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法40
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）27
- キッチンシンク下がドブ臭い下水臭い原因と解決方法24
- エクストレイルT32マイナーチェンジ後ステアリング外し方23
Total621
よろしかったらシェアよろしくお願いします。
コメントを表示（0）
新着コメント