ブログを書いていると、文章が長くなる。
長くなると、どこにどの項目があるか、探すのがメンドウ。
リンクで該当項目に移動する目次が欲しい。
見つけたもので、使いやすいな、というものをメモしておく。
JavaScriptプラグイン
「WordPressにプラグイン沢山入れるのもな…」ていう同志や、自作システムに使いたい人には、Javascriptタイプをオススメする。
サンプルを作っておいたので、使い方等はソースを見て貰えればと。
『もくじ』とかもくじタイトルを付けたい人向けに、付け方例も書いておいた。
jgallen23/toc
GitHub - jgallen23/toc: jQuery Table of Contents Plugin
ダウンロードの仕方が若干厄介。
2019年7月現在、最新版より旧バージョン版(v0.3.2)を使うことを、個人的にはオススメする。
最新版
単純にgit落とすや、それに『npm init』するでは使えなくて、暫く悩んだ。
windowsだからか、延々エラー続きで出来ない、tocディレクトリ…
- まずnode.js使えるようにしておく
- ディレクトリ作って、コマンド実行できるもので、作ったディレクトリまで移動(cd)。
-
npm install import '@firstandthird/toc'
を実行
- 作られた内『node_modules\@firstandthird\toc\dist』がもくじ機能の対象
タグに対象タグを指定するだけで使える。
h1～h5があるページにおいて、h2とh3だけ表示させるということも簡単。
ただし、hの数字が大きい順から表示するので、他階層が複数あると順番がおかしいので、使い所を考える必要がある。
jgallen23/toc最新版サンプル
旧バージョン版(v0.3.2)
落とし方諸々については、下記を参照すると良いです。
見出しから目次を自動生成してくれるjQueryライブラリ「TOC」のダウンロードと使い方！ | HPcode
最新版にあるエラーがない。しかしjQueryが必須となる。
jgallen23/toc v0.3.2サンプル
小粋空間tocプラグイン
jQueryで目次を自動生成する「tocプラグイン」: 小粋空間
使うまでがスゴく簡単。設定も少ない。jQuery必須。
一番上階層を指定して、それ以下の階層を全て表示する。外すことはできない。
デフォルトはh3以下。それ以外を指定する場合は、オプションstartLevelを指定する。
もくじdevはclass指定は出来ず、id指定のみ。
小粋空間tocサンプル
WordPressプラグイン
WordPressのプラグインの通常の入れ方でカンタンに設置出来る。
設定も解りやすい。
- Table of Contents Plus：超有名。しかし数年更新されていない。
- Easy Table of Contents：更新頻度は高く、最新にも適応。
コメント