[Blogger] 目次を自動生成する方法（カスタマイズ方法とスクロールアニメーション付き）

    <!-- jQuery -->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
  

    <!-- [START] TOC Top -->
    <b:if cond='data:view.isSingleItem'>
      <script defer>
      //<![CDATA[
      $(function(){
        var toc="<ol class='h2list'>";
        var h2cnt=0;
        var h3cnt=0;
        var h4cnt=0;
        $(".post-body h2,.post-body h3,.post-body h4", this).each(function() {
          var prefix='';
          var chapter='';
          var node=this.nodeName.toLowerCase();
          if (node == "h2") {
            if(h3cnt>0 && h4cnt==0){
              prefix = "</li></ol></li>";
			}else if(h4cnt>0){
     		  prefix = "</li></ol></li></ol></li>";
            }else{
              prefix = "</li>";
            }
            h2cnt++;
            h3cnt=0;
            h4cnt=0;
            chapter+=h2cnt;
          } else if (node == "h3") {
            if(h3cnt==0){
              prefix = "<ol class='h3list'>";
            }else if(h4cnt>0){
              prefix = "</li></ol></li>";
            }else{
              prefix = "</li>";
            }
            h3cnt++;
            h4cnt=0;
            chapter+=h2cnt+"-"+h3cnt;
          } else if (node == "h4") {
            if(h4cnt==0){
              prefix = "<ol class='h4list'>";
            }else{
              prefix = "</li>";
            }
            h4cnt++;
            chapter+=h2cnt+"-"+h3cnt+"-"+h4cnt;
          }
          var caption=$(this).text();
          //$(this).html("<span id='"+chapter+"'>"+caption+"</span>");
          $(this).attr('id',chapter);
          toc += prefix + "<li><a href='#" + chapter + "'><span>" + caption + "</span></a>";
        });
        toc+="</li></ol>"
        $(".post-body h2").first().before("<div id='toc'><div id='toc-header'><p>Table of Contents</p></div>"+toc+"</div>");    
      });
      //]]>
      </script>
      <style>
      #toc{
        background:#f1f8ff;
        border:dotted 2px #779cff;
        border-radius:5px;
        padding:10px;
        margin:1em auto .5em auto;
        width:auto;
        display:table;
      }
      #toc-header{
        text-align:center;
        font-size:120%;
        border-bottom:1px solid black;
        margin-bottom:.5em;
      }
      #toc a{
        color:#779cff;
        font-size:100%;
      }
      .h2list,.h3list,.h4list{
        border:none;
        margin:0;
	  }        
      .h2list{
        list-style-type:upper-roman;
      }
      .h3list{
        list-style-type:lower-roman;
      }
      .h4list{
        list-style-type:square;
      }
      </style>
    </b:if>
    <!-- [END] TOC Top -->
  

    <!-- [START] TOC Scrolling Animation -->
    <script>
    $(function(){
      $('[href^="#"]').click(function(){
        var id= $(this).attr('href');
        var position=$(id).offset().top-50;
        $('html,body').animate({'scrollTop':position},800);
        //return false;
      });
    });
    </script>
    <!-- [END] TOC Scrolling Animation -->
  

$(".post-body h2,.post-body h3,.post-body h4", this).each(function() {
  

$(".post-body h2").first().before("<div id='toc'><div id='toc-header'><p>Table of Contents</p></div>"+toc+"</div>"); 
  

      <style>
      #toc{
        background:#f1f8ff; /*背景色*/
        border:dotted 2px #779cff;  /*枠線スタイル、太さ、色*/
        border-radius:5px;  /*枠線の角の丸み*/
        padding:10px; /*文字と枠線の間の余白*/
        margin:1em auto .5em auto;  /*枠線とその周囲の余白*/
        width:auto; /*幅を文字長さに合わせる*/
        display:table;  /*幅を文字長さに合わせて中央寄せ*/
      }
      #toc-header{  /*タイトル*/
        text-align:center;  /*中央寄せ*/
        font-size:120%; /*文字サイズ*/
        border-bottom:1px solid black;  /*下線*/
        margin-bottom:.5em; /*下線の下の余白*/
      }
      #toc a{ /*リンク部分*/
        color:#779cff;  /*文字色*/
        font-size:100%;
      }
      .h2list,.h3list,.h4list{
        border:none;
        margin:0;
	    }        
      .h2list{
        list-style-type:upper-roman;  /*大文字ローマ数字*/
      }
      .h3list{
        list-style-type:lower-roman;  /*小文字ローマ数字*/
      }
      .h4list{
        list-style-type:square; /*四角マーク*/
      }
      </style>
  

var position=$(id).offset().top-50;
$('html,body').animate({'scrollTop':position},800);
//return false;