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

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

プロモーションを含みます WordPress カスタマイズ 伝えたいこと 備忘録

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

所要時間目安：約5分

This session is using　 IPv4 　is established in

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

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

カーメンテナンスWAKO'S

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

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

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

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 5PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. エクストレイルステアリング内のスパイラルケーブル接続部コネクタ

    ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に 4PV

    NISSANエクストレイルは日産の中でも人気のSUV車です。そのエクストレイルは今年の6月8日にT32型の後期型がマイナーチェンジして発売されました。新しい後期型にはメーカーオプションで話題の半分自動…

    もっと読む

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

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

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

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 33PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 21PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…

    もっと読む

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

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

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

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 33PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 21PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。（メンテナンスしないのはもっと悪いですが…。） その記…

    もっと読む

2024年10月16日 (水曜日)
本日の人気記事トップ１０

今日は2024年10月16日です。

目次に行く･戻る

メルカリ招待コード：

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

ですが、
多くのサイトの方々が導入されているということと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で目次のスタイルをかっこ良くする方法。

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

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

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

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

WordPress管理画面タイトル文字数カウント表示

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

WordPress管理画面タイトル文字数カウントを自動的にする方法

WordPressではデフォルトで記事の文字数は記事を書くエリアの左下に表示されています。しかし、タイトルの文字数はカウントされていません。そんな時にタイトルを入力したのと同時に自動的に文字数を表示さ…

もっと読む

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

2匹のネコ

AdSense php WordPress カスタマイズ テーマ

Stinger6カスタマイズ?スマホ表示がオカシイので変更と削除した部分

ここ10日間くらいwordpressの勉強に励んでいるところです。 テーマは、 調べた所一番評判が良いStingerというものにしました。 バージョンは6です。 Stinger5も一応ダウンロードはさ…

もっと読む

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

RSSフィード画像

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

RSSにアイキャッチ画像を出力する方法Stinger6、Stinger7、StingerPLUS+版

以前、RSSにアイキャッチ画像を出力する方法という記事を書きました。     普通の？RSSフィードに（PINGOOなど）にはアイキャッチがちゃんと表示されていました。 ですが、B…

もっと読む

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

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

マイナ保険証なくても資格確認書で受診可能保険証は最長1年有効

今年2024年12月2日に新規の紙のこれまでの保険証の発行を停止するとのことです。マイナンバーカードに保険証を登録してマイナ保険証としての利用を促しています。ですが、以下の記事のようにマイナ保険証はト…

もっと読む

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

AMP画像

SNS WordPress インターネット カスタマイズ 伝えたいこと 備忘録

AMP化する方法プラグインなしで対応してみる

今年の初め頃にGoogleがスマホやモバイルユーザーに特化したサイト表示ができるようになるAMPというものを発表しました。 その後もHTTPS everywhere（SSL化）などもありますが…。 は…

もっと読む

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

アプリーチCSS最終型

Android iPhone PC スマホ ツール 伝えたいこと 備忘録

アプリーチCSSデザインでiTunesアフィリエイトプログラム(PHG)を使い方法

もうアフィリエイトをしている人には知れ渡っているかもしれませんが、アプリーチというままはっくさんの旦那さんが作ったツール？サイトがあります。 同じような便利なツールとしてカエレバブックマークレットなど…

もっと読む

おすすめの記事一部広告


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

Multiplex 広告

Total314


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

目次に戻る

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

この記事タイトルとURLをコピー

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

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

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

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.

あと5秒で記事が閲覧できます。

Protected by AFFINGER