<div class="p-toc post_content">
    <ul class="p-toc__list is-style-index">
        <li><a href="#index_id0" class="p-toc__link" data-nodal="">CSS（スタイルシート）は画面デザインの定義</a>
            <ul>
                <li><a href="#index_id1" class="p-toc__link" data-nodal="">CSSのデザイン定義方法</a></li>
                <li><a href="#index_id2" class="p-toc__link current" data-nodal="">Cascading（カスケーディング）は「連鎖する」という意味</a></li>
                <li><a href="#index_id3" class="p-toc__link" data-nodal="">CSS定義の”連鎖”は上書き可能</a></li>
            </ul>
        </li>
        <li><a href="#howto" class="p-toc__link" data-nodal="">WordPressのCSS（スタイルシート）設定方法</a></li>
        <li><a href="#index_id5" class="p-toc__link" data-nodal="">さいごに</a>
            <ul>
                <li><a href="#index_id6" class="p-toc__link" data-nodal="">CSSデザインに費やす時間に注意しよう</a></li>
                <li><a href="#index_id7" class="p-toc__link" data-nodal="">本サイトのCSSデザインカスタマイズ</a></li>
            </ul>
        </li>
    </ul>
</div>

a.p-toc__link.current {
  background-color: #edf5ff !important;
}

function swell_toc_highlight() {
  echo <<< EOM
  <script>
  class toc_highlight {
    init(){
      this.elem = document.querySelectorAll('.widget_swell_index a');
      this.elem2 = document.querySelectorAll('.-modal a');
    }
    update(){
      if(this.elem === null) {
        return 0;
      } else {
        for (let i = 0; i < this.elem.length; i++) {
          const y = document.documentElement.clientHeight;
          const a = document.getElementById( this.elem[i].hash.slice(1) ).getBoundingClientRect().top;
          if( y > a ){
            this.elem[i].classList.add("current");this.elem2[i].classList.add("current");
              if ( i>0 ){
                this.elem[0].classList.remove("current");this.elem2[0].classList.remove("current");
                this.elem[i-1].classList.remove("current");this.elem2[i-1].classList.remove("current");
              }
          } else {
            this.elem[i].classList.remove("current");this.elem2[i].classList.remove("current");
          }
        }
      }
    }
  }
  var toc=new toc_highlight();
  window.addEventListener('DOMContentLoaded', function(e){ toc.init(); });
  window.addEventListener('scroll', function(e){ toc.update(); });  
  </script>
  EOM;
  }
add_action( 'wp_print_footer_scripts', 'swell_toc_highlight' );

a.p-toc__link.current {
  background-color: #edf5ff !important;
}

<?php

/* ※ 子テーマのfunctions.phpは、親テーマのfunctions.phpより先に読み込まれることに注意してください。 */


/**
 * 親テーマのfunctions.phpのあとで読み込みたいコードはこの中に。
 */
add_filter('after_setup_theme', function(){
    
}, 11);


/**
 * 子テーマでのファイルの読み込み関数
 *   $query : 各ファイルに付与するクエリ文字列。
 */
add_action('wp_enqueue_scripts', function() {
    
    //$query = '1.0';
    $query = date('Ymdgis');  /*子テーマのstyle.cssのブラウザキャッシュを無効にする。 */

    /* 子テーマのstyle.css読み込み */
    wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $query );

    /* その他の読み込みファイルはこの下に記述 */

}, 11);

add_action( 'wp_head', 'afb_highlight_toc_css' );
function afb_highlight_toc_css(){
  echo '<style>a.p-toc__link.current {background-color: var(--color_capbox_02_bg);}}</style>';
}

function swell_toc_highlight() {
  echo <<< EOM
  <script>
  class toc_highlight {
    init(){
      this.elem = document.querySelectorAll('.widget_swell_index a');
      this.elem2 = document.querySelectorAll('.-modal a');
    }
    update(){
      if(this.elem === null) {
        return 0;
      } else {
        for (let i = 0; i < this.elem.length; i++) {
          const y = document.documentElement.clientHeight;
          const a = document.getElementById( this.elem[i].hash.slice(1) ).getBoundingClientRect().top;
          if( y > a ){
            this.elem[i].classList.add("current");this.elem2[i].classList.add("current");
              if ( i>0 ){
                this.elem[0].classList.remove("current");this.elem2[0].classList.remove("current");
                this.elem[i-1].classList.remove("current");this.elem2[i-1].classList.remove("current");
              }
          } else {
            this.elem[i].classList.remove("current");this.elem2[i].classList.remove("current");
          }
        }
      }
    }
  }
  var toc=new toc_highlight();
  window.addEventListener('DOMContentLoaded', function(e){ toc.init(); });
  window.addEventListener('scroll', function(e){ toc.update(); });  
  </script>
  EOM;
  }
add_action( 'wp_print_footer_scripts', 'swell_toc_highlight' );