現在の接続環境は
です

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

Windows10サポート終了まで
¥1,650 (2024/11/30 16:49時点 | Amazon調べ)

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

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

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

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

所要時間目安:5

This session is using  IPv4  is established in

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

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

  • 本日
  • 週間
  • 月間
  1. エクストレイルリアワイパー交換方法と純正部品番号 2PV

    エクストレイルT32以降のリアワイパーは汎用品があまりなく(PIAA製品でブレードごと交換というものはあります。)長さが30cm(300mm)でリアワイパーゴムに鉄心があります。 PIAA製品でブレー…

    もっと読む

  2. シガーライターがない車にシガーライターソケット増設

    シガーライターがない車にシガーライターソケットの付け方と増設方法 1PV

    ここのところ最近の車にはシガーライターソケットもしくはシガーライター自体が付いていない車があります。 そんな時には、昨今ではスマホの充電などでも車のシガーライターソケット電源は必須とも言えます。 しか…

    もっと読む

  3. ブレーキペダルストローク調整部分

    ブレーキペダル調整ストローク調整方法高さ調整 1PV

    やっと、 本来書こうとしたネタである車ネタを書きます。多くの車でフットブレーキがあるのは当たり前です。 (ないと車とは言えないんですが^^;)そのフットブレーキがメーカーや車種によって、高さや長さが違…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

今日は2025年1月22日です。

目次に行く・戻る

メルカリ招待コード:

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

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

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

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

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

バレンタインまであと…VALENTINEはどんなPresent(プレゼント)でどのように過ごされますか?

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

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

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

0

カウントダウンタイマー

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

🎉 Counting Up! 🎉
Loading...
ウイルスと緊急事態宣言画像

伝えたいこと 備忘録

新型コロナウイルス感染症は本当でしょうけれど本当なのか…

本当に、どうなっているのか・・・。 わからないテレビというメデイアに洗脳されているのか。そうではないのか。 でも、現実に患者さんはいる。 軽症から重症まで。 どこまでが真実なのか。 洗脳なのか。

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

続けるには次の数字を入力してください

メンテナンス 不具合 備忘録

続行するには、下の数字を入力してください:

いきなり!! Googleさんからタイトルのようなことを言われてしまいました。 「続行するには、以下の数字を入力してください:」 なんだこれは? と…。 何やら検索した数?が多すぎたり?検索の仕方が人…

もっと読む

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

桜開花

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

桜開花のライブ配信情報をウェザーニューズさんが中継

そろそろ、3月も終わってしまいます。 しかし、 日本人の楽しみの1つでもあ桜を見る花見があります。今年も桜が全国で開花し始めています。見頃は、 その土地・地方によって異なると思いますがウェザーニューズ…

もっと読む

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

ステロイド軟膏アンテベート軟膏強さ

伝えたいこと 備忘録 治療

帯状疱疹かと思ったけれど蕁麻疹で治らない時にデルマクリン軟膏とアンテベート軟膏

以前に帯状疱疹かと思い皮膚科を受診しました。 そしたら、ちょっと診断まではつかないなぁ。ということでステロイド軟膏と神経障害性疼痛に処方されるリリカという薬が処方されました。 それから1ヶ月弱・・・・…

もっと読む

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

背景画像の設定方法

Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 備忘録

WordPressのStinger6とStinger7で背景画像を設定する方法

WordPressの無料テーマで有名なStingerがあります。 現在での一番新しいバージョンはStinger7ですが当ブログにおいては今のところStinger6を使用しています。 背景に画像を設定し…

もっと読む

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

HDDが壊れそうか否か健康状態確認

PC 伝えたいこと 備忘録

CrystalDiscinfoでHDDが壊れそうかどうか確認方法と対処方法

以前と言っても先月末くらいからパソコンから異音が出始めました。 異音の種類によってもどこら壊れそうなのか概ねの判断・推測ができます。 以前の記事が以下です。 これらのことを行っても異音が解消されない場…

もっと読む

あなたが訪問してから

0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告

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

Multiplex 広告

Total402


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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


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