SWELLで目次をハイライト【JINからSWELLへテーマ変更】

/*fontawesomeを文字の前に*/
  .easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    padding-right: 3px;
  }

[jin_icon_academic]　から　<i class="fas fa-heartbeat"></i>　へ変更

/*目次ハイライト*/
a.p-toc__link.mkj-active {
background-color: #F8FFB9;
}
li.mkj-marker::before {
background-color: #F8FFB9;
}

function motoki_mkj_highlighter() {
echo <<< EOM
<script>
const mkjHighlight = (e) => {
  const hashes = document.querySelectorAll(".widget_swell_index a");
  const sy = window.pageYOffset;
  const ey = sy + document.documentElement.clientHeight;
  let userAgent = window.navigator.userAgent.toLowerCase();
  let focusEl = [null, null];
  hashes.forEach((el) => {
    const targetEl = document.querySelector(decodeURI(el.hash));
    const y = sy + targetEl.getBoundingClientRect().top;
    el.closest(".p-toc__list li").classList.remove("mkj-marker");
    el.classList.remove("mkj-active");
    if (sy < y && y < ey && !focusEl[1]) {
      focusEl[1] = el;
      focusEl[0] = null;
    }
    if (sy > y) focusEl[0] = el;
  });
  if (focusEl.length)
    focusEl.forEach((el) => {
      el && el.classList.add("mkj-active");
      el && el.closest(".p-toc__list > li").classList.add("mkj-marker");
    });
};
mkjHighlight();
window.addEventListener("scroll", mkjHighlight);

EOM;
}
add_action( 'wp_print_footer_scripts', 'motoki_mkj_highlighter' );

/*行間*/
.post_content {
 line-height: 2.0;
}
/*ブロック間余白*/
.post_content > p {
 margin-bottom: 5.0em;
}
/*SWELLステップブロック行間*/
.swell-block-step__body {
 line-height: 2.0;
}
/*ステップブロックブロック間*/
.swell-block-step__body > p {
 margin-bottom: 3.0em;
}
/*ステップブロックタイトル余白*/
.swell-block-step__title {
margin: 1.7em 0 1.0em;
}

/*もしもアフィリかんたんリンクCSS*/
div.easyLink-box {
   border:double #CCC !important; /*2重線*/
  margin-bottom: 1.5em!important;/*簡単リンク枠下と文字の空白つける*/
    box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
  border-radius: 20px;/*角を丸く*/
}
/*Amazon楽天Yahoo幅揃えて見やすく*/
.easyLink-info-btn a{
 margin: 1px 1px 5px 0!important;
  padding: 0 12px!important;
    line-height: 35px!important;
  display: inline-block!important;
  width: 100%!important;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
  font-size: 0.7em!important;
}
/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
  color: #1111cc !important; /* 文字色 */}
/*各ボタン色*/
a.easyLink-info-btn-amazon {
  background: #f6a306 !important; /* 背景色 */
  border: 2px solid #f6a306 !important; /* 外枠 */
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
  background: #cf4944 !important; /* 背景色 */
  border: 2px solid #cf4944 !important; /* 外枠 */
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
  background: #51a7e8 !important; /* 背景色 */
  border: 2px solid #51a7e8 !important; /* 外枠 */
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/*マウスオーバー時のボタン色*/
a:hover.easyLink-info-btn-amazon {
  opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
  background: #fff !important; /* 背景色 */
  color: #f6a306 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
  opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
  background: #fff !important; /* 背景色 */
  color: #cf4944 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
  opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
  background: #fff !important; /* 背景色 */
  color: #51a7e8 !important; /* 文字色 */
}
/*fontawesomeを文字の前に*/
.easyLink-info-btn a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  padding-right: 3px;
}
/*PC以外の時の設定*/
@media screen and (max-width: 480px) { 
  div.easyLink-box div.easyLink-info p.easyLink-info-btn a { 	
    width: 100%!important; 	
      position: relative; 	} 	
.easyLink-info-btn a:before { 		padding-right: 5px; 
    right: 5px; 	
  position: absolute;		 
  } }
@media screen and (max-width: 480px){
  div.easyLink-box.easyLink-size-s {
  max-width: 340px !important;
}}