2019年6月10日ツイートシェアB!はてブポケット見出しから目次を自動生成してくれるJqueryライブラリ「TOC」を紹介します。目次は、ユーザービリリティ向上のために欠かせないものとなっています。おわりTOCのダウンロードTOCのライブラリは以下からダウンロードできます。最新版は必要なファイルが揃っていないため注意が必要です。https://github.com/jgallen23/toc仕方ないので、バージョンを落としてダウンロードしていきましょう。「Releases」を選択してください。古くなりますが、、「0.3.2」のバージョンのzipファイルをダウンロードします。zipファイルを解凍してdistフォルダの中身を確認しておいてください。以下のファイルを使います。dist/toc.min.jsTOCの読み込みまずは、先程ダウンロードしたtoc.min.jsファイルを読み込みます。jQueryを先に読み込んでいる必要があります。src="dist/toc.min.js"></script>tocの設定です。いくつかの項目をオプションとして指定できますが、後ほど紹介していきます。コピーjQuery('#toc').toc();目次を表示したい位置に以下のタグを挿入してください。id="toc"></div>これらのソースを読み込むと、表示されているすべての見出しを取得して表示します。現時点のわたしのページだと、以下のような感じで表示されています。h1や、コンテンツ外の見出しも含まれてしまうので、意図したものではありません。先程に設置した以下のソースにオプションを追加していきます。コピーjQuery('#toc').toc();最低限必要なのは、見出しを取得する範囲と、取得する見出しレベルの指定です。*/});この設定を適応させた状態で表示を確認してみると、h1タグやコンテンツ以外の余計な見出しは反映されなくなりました!他にもオプションはあります。物足りないと感じたら公式から使えるものがないか確認してみるといいでしょう。表示される目次のHTMLタグを確認すると以下のようになっています。href="#toc-h2-2">h2</a></li></ul></div>class="toc-active"は、見られている(表示されている)見出しエリアに自動的に付与されるクラスです。toolなどでスクロールしながらクラスを見るとtoc-activeが見出しをどんどん移動しているのが分かります。各要素にクラスが適応されているので、デザインはしやすそうです。TOCのデザインサンプル簡単ですが、デザインのサンプルを作りました。目次のデザインを作る際に意識した方がいいと思うのは、「見出しの階層構造が分かりやすい」こと。人目でどのレベルのコンテンツか分かるとユーザーも選びやすいのではないかと思います。.2em;}適応した際の見栄えは以下のような感じです。シンプルですが、階層の違いは分かりやすくなっているかと思います。@haniwa008jQueryライブラリ「TOC」のダウンロードと使い方の紹介でした。個人的には、表示されているエリアのtoc-activeクラスが用意されていることに興奮しました。サイドメニューで追尾するもよし、スマホではポップアップで目次を出してあげるもよし、いろいろやりたいことが膨らみますね。リンクjQueryライブラリこのページが役に立ったらいいね!お願いします運営の励みになります...。前の記事WordPressで自動出力されるタイトル系のカスタマイズ方法まとめはにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。