現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

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

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

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

所要時間目安:5

This session is using  IPv4  is established in

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

目次に行く・戻る

2025年4月25日 (金曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. Windows10アップグレードキャンセル方法

    Windows10アップグレードキャンセル方法をMicrosoft正式に公開 1PV

    マイクロソフト(Microsoft)によるWindows10へのアップグレード攻撃?と通知が無償アップグレード期間残すところ約2ヶ月となったところで、3月ころから勝手にWindows10になっていた(…

    もっと読む

  2. キッチンシンクからドブ臭い異臭原因解決方法

    キッチンシンク下がドブ臭い下水臭い原因と解決方法 1PV

    意外と知られていないのが、キッチンシンクからいつもと違う臭いや異臭や下水臭い強烈な匂いが出てくることがあります。いくらシンク内をカビキラーやキッチンハイターなどの塩素系漂白剤などできれいにしても・・・…

    もっと読む

  3. オカルトチューンと言われていたマグチューンを取り付け 1PV

    2000年代後半のガソリン価格の高騰時に数々の燃費向上グッズが発売されました。その中のひとつでもあるマグチューンMG-600が埋もれていたので、効果の程は定かではないものの自分の車もであるので試しに再…

    もっと読む

  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 28PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 23PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 22PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 28PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 23PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 22PV

    初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

今日は2025年4月25日です。

メルカリ招待コード:

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

ですが、
多くのサイトの方々が導入されているということと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導入方法

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

つ以上見出しがあるとき
以下のコンテンツタイプを自動挿入

外観

プレゼンテーション
 

上級者向け (show)

詳細設定

見出しレベル

以下の見出しレベルを含める。チェックを外すと非表示になります。







  • 果物* 「果物」から始まる見出しを無視する
  • *果物ダイエット* 「果物ダイエット」がどこかに含まれる見出しを無視する
  • リンゴの木|オレンジ|黄色いバナナ 「リンゴの木」、「オレンジ」、「黄色いバナナ」という見出しを無視する
px


使い方

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

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

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

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

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

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

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

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

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

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

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

Windows10サポート終了まで

【AmazonタイムセールSALE車&バイク】!


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

出展:Amazonタイムセール

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

あなたが訪問してから

0 秒経過 🎉

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

セキュリティ 伝えたいこと 備忘録 時事ネタ

ナンバーレスクレジットカードとキャッシュカードのナンバーレス

昨今では、クレジットカードの16桁のクレジットカード番号が表面に印字されていないクレジットカードが主流になりつつあります。他にも銀行口座のキャッシュカードも三井住友銀行においては、oliveアカウント…

もっと読む

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

乙武洋匡さん

Twitter 伝えたいこと 備忘録 時事ネタ

乙武洋匡さんもTwitter裏アカウント使ってたの…。「純愛エロメガネ」らしい

(アイキャッチ画像出典元:乙武洋匡さん公式Twitterより:https://twitter.com/h_ototake)先日、おとといかな…。 Twitter(ツイッター)に裏アカウント(通称:裏垢…

もっと読む

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

大山式ボディメイクパット趾

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ テーマ 備忘録

WordPress自分のショートコード備忘録

現在の自分が使用しているテーマでの、 ショートコードを用いてテンプレートからショートコードを用いて任意のコードを表示させる方法の備忘録です。

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

伝えたいこと 備忘録 時事ネタ

Googleを独禁法違反で審査 公取委、検索寡占を解明へ

公正取引委員会(公取委)が、Google(グーグル)を検索サービス(検索ポータルサイト。検索プラットフォーム)の独占禁止法疑いで審査へとのことのようです。(調査) ググるという言葉が出来たのが2000…

もっと読む

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

マウス分解清掃前

PC メンテナンス 不具合 伝えたいこと 備忘録

マウスの左クリックや右クリックが効かないのでマウス分解して直す方法

マウスは今やパソコンなどにはなくてはならない入力装置です。入力機器。昔のキーボードのみでの操作には戻れませんね。そこで長年使ってきたマウスの右クリックではなく左クリックが効かなかったりジャダー(チャタ…

もっと読む

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

Table of Contents Plus(TOC+)目次CSS-min

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

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

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

もっと読む

WordPress, カスタマイズ, 伝えたいこと, 備忘録」の人気記事

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

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

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

Total525


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

目次に戻る

よろしかったらシェアよろしくお願いします。

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

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.