Tocbotで目次をつけてみる

どうも。

いやー、4月16日に情報処理技術者試験ありましたね…。

4月15日と16日はおもっくそ熱出して寝込んで、PM試験受けに行けませんでした…。orz

今も(4月22日)まだ体調が治りきってないけど、なんとなくブログを更新してみます。

さて、 は○なブログ とか読んでると冒頭に目次がついてたりしますよね。しかもページ内リンクになってて結構便利なんです。

それで、自分でもブログで文章を書いていると「 はて○ブログ みたいな目次が自動でついたらいいのになー」とか思ってたらTocbotというものを見つけたのでちょっと試しに使ってみます。Tocbotはhtmlのドキュメントに目次(Table of Contents)をつけてくれるのでブログに便利かもしれません。ただしhtmlの知識がちょっと必要になります。

目次

Tocbotの使い方

準備

Tocbotのデモページを見てみる

デモを兼ねた公式のページ(英語)を読んで雰囲気をつかんでみましょう。読んでみて「わかんないやー」でも可。「Usage」のところに使い方が書いてあるなーくらいでOK。

Tocbot

cdnjsのちからを借りる

そしたらcdnjsのちからを借りてみる。これも「わかんないやー」で可。npmによるインストールやtocbot.jsのダウンロードの手間が省けるという認識で良いでしょう。

tocbot - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

使い方

サンプルコード

FC2ブログでもHTML表示にしてからコピペすれば本文のところ(h1タグやh2タグのところ)を編集するだけで使える…はず。というか、このFC2ブログの本記事で目次が表示できていれば他のブログでもできるはず。

<!-- 目次 -->
<nav class="toc js-toc soft-double transition--300 position--absolute"></nav>
 
<!-- コンテンツ -->
<div class="content js-toc-content soft-double">
 
  <!-- 本文ここから -->
  <!-- h1 や h2 のタグに id をつけるとページ内リンクが自動でつく -->
  <h1 id="header">お題</h1>
 
    <h2 id="title1">タイトル1</h2>
      <h3 id="sub1-1">サブタイトル1-1</h3>
        <p>ここに文章を書く。(中略)</p>
      <h3 id="sub1-2">サブタイトル1-2</h3>
        <p>ここに文章を(中略)</p>
 
    <h2 id="title2">タイトル2</h2>
      <h3 id="sub2-1">サブタイトル2-1</h3>
        <p>ここに文(中略)</p>
      <h3 id="sub2-2">サブタイトル2-2</h3>
        <p>ここ(中略)</p>
  <!-- 本文ここまで -->
 
</div><!--/content js-toc-content -->
 
<!-- cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/2.1.5/tocbot.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/2.1.5/tocbot.css">
 
<!-- Tocbotの初期化 -->
<script>
(function(){
  "use strict;"
 
  tocbot.init({
  tocSelector: '.js-toc',
  contentSelector: '.js-toc-content',
  headingSelector: 'h1, h2, h3',
  collapseDepth: 3,
  });
 
})();
</script>

サンプルページつくったー！

ブログのソースを右クリックで見ようとしても色々と見づらいので比較的見やすいページを作ってみたので置いておきます。

Tocbotを使ってみた - 備忘録的な

最近は『けものフレンズ』ばっかり観てる…

---

[広告]

Amazon

けものフレンズBD付オフィシャルガイドブック (2)

けものフレンズ　ラッキービーストBIGぬいぐるみ