{"id":596,"date":"2022-04-16T11:41:16","date_gmt":"2022-04-16T02:41:16","guid":{"rendered":"https:\/\/motoki-design.co.jp\/wordpress\/?p=596"},"modified":"2026-10-04T22:40:17","modified_gmt":"2026-10-04T13:40:17","slug":"swell-toc-highlight","status":"publish","type":"post","link":"https:\/\/motoki-design.co.jp\/wordpress\/swell-toc-highlight\/","title":{"rendered":"SWELL\u2502\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u76ee\u6b21\u3092\u30cf\u30a4\u30e9\u30a4\u30c8\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba"},"content":{"rendered":"\n

PC\u7248\u306e\u5834\u5408\u3001SWELL\u3067\u306e\u76ee\u6b21\u306f\u8ffd\u5f93\u30b5\u30a4\u30c9\u30d0\u30fc\u306b\u8a2d\u7f6e\u3059\u308b\u30b1\u30fc\u30b9\u304c\u591a\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u8a18\u4e8b\u3092\u898b\u3066\u3044\u308b\u969b\u306b\u3001\u4eca\u3069\u3053\u306e\u90e8\u5206\u3092\u898b\u3066\u3044\u308b\u306e\u304b\uff1f<\/p>\n\n\n\n

\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u76ee\u6b21\u306e\u9805\u76ee\u3092\u30cf\u30a4\u30e9\u30a4\u30c8\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3092SWELL\u3067\u9069\u5fdc\u3055\u305b\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\"SWELL\u306e\u8ffd\u5f93\u30b5\u30a4\u30c9\u30d0\u30fc\u306b\u8a2d\u7f6e\u3057\u305f\u76ee\u6b21\u306e\u8a72\u5f53\u9805\u76ee\u304c\u30cf\u30a4\u30e9\u30a4\u30c8\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u69d8\u5b50\u3002\"<\/figure>\n\n\n\n

ZIMA\u3055\u3093\u306eTHE SONIC\u7528\u306e\u76ee\u6b21\u30b9\u30af\u30ed\u30fc\u30eb<\/a>\u3092SWELL\u7528\u306b\u3057\u3066\u307f\u307e\u3057\u305f\uff61<\/small><\/p>\n\n\n\n

SWELL\u3067\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u76ee\u6b21\u3092\u30cf\u30a4\u30e9\u30a4\u30c8\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h2>\n\n\n\n

\u3053\u306e\u30b3\u30fc\u30c9\u306f\u3001\u3059\u3067\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308bSWELL\u306e\u30b5\u30a4\u30c9\u30d0\u30fc\u76ee\u6b21\u3092\u5f37\u8abf\u3059\u308b\u3082\u306e\u3067\u3059\u3002<\/p>\n\n\n\n

\u76ee\u6b21\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u81ea\u4f53\u306f\u8ffd\u52a0\u3057\u306a\u3044\u305f\u3081\u3001\u8a2d\u7f6e\u5148\u306ePC\u753b\u9762\u3067\u30b5\u30a4\u30c9\u30d0\u30fc\u76ee\u6b21\u3068\u30ea\u30f3\u30af\u5148\u306e\u898b\u51fa\u3057\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u5148\u306b\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u4ee5\u4e0b\u3001\u8a73\u3057\u304f\u89e3\u8aac\u3044\u305f\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

functions.php\u306b\u30b3\u30fc\u30c9\u3092\u633f\u5165\u3059\u308b<\/h3>\n\n\n\n

WordPress\u306e\u7ba1\u7406\u753b\u9762 \uff1e \u5916\u89b3 \uff1e \u30c6\u30fc\u30de\u30d5\u30a1\u30a4\u30eb\u30a8\u30c7\u30a3\u30bf\u30fc \uff1e functions.php<\/code><\/p>\n\n\n\n

\u5b50\u30c6\u30fc\u30de\u306efunctions.php\u3092\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u3057\u3001PHP\u30a8\u30e9\u30fc\u6642\u306b\u3082\u5143\u306e\u30d5\u30a1\u30a4\u30eb\u3078\u623b\u305b\u308b\u624b\u6bb5\u3092\u78ba\u4fdd\u3057\u3066\u304b\u3089\u3001PHP\u958b\u59cb\u30bf\u30b0\u306e\u5185\u5074\u3078\u4ee5\u4e0b\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u4ee5\u524d\u306emotoki_mkj_highlighter\u95a2\u6570\u30fb\u767b\u9332\u884c\u306f\u7f6e\u304d\u63db\u3048\u3001\u4e8c\u91cd\u767b\u9332\u3057\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n

\u89aa\u30c6\u30fc\u30de\u306b\u306f\u8ffd\u52a0\u3057\u307e\u305b\u3093\u3002<\/p>\n\n\n\n

\u65e5\u672c\u8a9eID\u306f\u30c7\u30b3\u30fc\u30c9\u3057\u3066getElementById\u3067\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u7a7a\u306e\u30cf\u30c3\u30b7\u30e5\u3001\u4e0d\u6b63\u306a\u30a8\u30f3\u30b3\u30fc\u30c9\u3001\u5b58\u5728\u3057\u306a\u3044\u898b\u51fa\u3057\u3001\u5225\u30da\u30fc\u30b8\u306e\u30ea\u30f3\u30af\u306f\u51e6\u7406\u5bfe\u8c61\u304b\u3089\u5916\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

function motoki_mkj_highlighter() {\n    if (!is_singular()) return;\n    echo <<<'WAZA_TOC'\n<script>\n(() => {\n  const init = () => {\n  const groups = Array.from(document.querySelectorAll('.widget_swell_index')).map(widget => {\n    const entries = [];\n    widget.querySelectorAll('a[href*="#"]').forEach(link => {\n      let id;\n      try { id = decodeURIComponent(link.hash.slice(1)); } catch (_) { return; }\n      if (!id || link.pathname !== location.pathname || link.origin !== location.origin) return;\n      const heading = document.getElementById(id);\n      if (heading) entries.push({link, heading});\n    });\n    return entries;\n  });\n  const update = () => {\n    groups.forEach(entries => {\n      let current = null;\n      entries.forEach(entry => {\n        if (entry.heading.getBoundingClientRect().top <= 120) current = entry;\n      });\n      entries.forEach(entry => {\n        const active = entry === current;\n        entry.link.classList.toggle('mkj-active', active);\n        if (active) entry.link.setAttribute('aria-current', 'location');\n        else entry.link.removeAttribute('aria-current');\n      });\n    });\n  };\n  let scheduled = false;\n  const schedule = () => {\n    if (scheduled) return;\n    scheduled = true;\n    requestAnimationFrame(() => { scheduled = false; update(); });\n  };\n  update();\n  window.addEventListener('scroll', schedule, {passive:true});\n  window.addEventListener('resize', schedule);\n  };\n  if (document.readyState === 'complete') init();\n  else window.addEventListener('load', init, {once:true});\n})();\n<\/script>\n<style>\n.widget_swell_index a.mkj-active { background:#24507a; color:#fff; }\n.widget_swell_index a:focus-visible { outline:3px solid #24507a; outline-offset:3px; }\n<\/style>\nWAZA_TOC;\n}\nadd_action('wp_print_footer_scripts', 'motoki_mkj_highlighter');<\/code><\/pre><\/div>\n\n\n\n
\u8272\u306fstyle\u5185\u306ebackground\u3068color\u3067\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u6587\u5b57\u3068\u80cc\u666f\u306e\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u3092\u78ba\u4fdd\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u753b\u9762\u4e0a\u7aef\u304b\u3089120px\u3092\u901a\u904e\u3057\u305f\u6700\u5f8c\u306e\u898b\u51fa\u3057\u3092\u73fe\u5728\u4f4d\u7f6e\u3068\u3057\u3001\u6700\u521d\u306e\u898b\u51fa\u3057\u3088\u308a\u524d\u3067\u306f\u9078\u629e\u3057\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u56fa\u5b9a\u30d8\u30c3\u30c0\u30fc\u306e\u9ad8\u3055\u306b\u5408\u308f\u305b\u3066120\u306e\u5024\u3092\u8abf\u6574\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306f\u4ee5\u4e0a\u3067\u3059\u3002<\/p>\n\n\n\n
\u30b3\u30fc\u30c9\u633f\u5165\u5f8c\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u30af\u30ea\u30a2\u3057\u3066\u3001\u8a18\u4e8b\u3092\u8aad\u307f\u306a\u304c\u3089\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u76ee\u6b21\u304c\u898b\u51fa\u3057\u306e\u4e0a\u306b\u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\"\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u5f8c\u306b\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u76ee\u6b21\u9805\u76ee\u304c\u30cf\u30a4\u30e9\u30a4\u30c8\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u304b\u3092\u78ba\u8a8d\u3059\u308b\u69d8\u5b50\u3002\"<\/figure>\n\n\n\n
\u307e\u3068\u3081<\/h2>\n\n\n\n
\u672c\u8a18\u4e8b\u3067\u306f\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u76ee\u6b21\u3092\u30cf\u30a4\u30e9\u30a4\u30c8\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306b\u3064\u3044\u3066\u66f8\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
PC\u7248\u3067\u898b\u308b\u30e6\u30fc\u30b6\u30fc\u304c\u591a\u3044\u5834\u5408\u3001\u30b5\u30a4\u30c9\u30d0\u30fc\u306b\u76ee\u6b21\u3092\u3064\u3051\u3066\u898b\u3084\u3059\u304f\u3057\u3066\u3042\u3052\u308b\u3068\u30e6\u30fc\u30b6\u30d3\u30ea\u30c6\u30a3\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u662f\u975e\u3001\u672c\u8a18\u4e8b\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3092\u53c2\u8003\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u30d6\u30ed\u30c3\u30af\u3054\u3068\u306e\u4f59\u767d\u3092PC\u30fb\u30b9\u30de\u30db\u5225\u306b\u5909\u3048\u308b\u65b9\u6cd5\u3082\u307e\u3068\u3081\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n
\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\u3042\u308f\u305b\u3066\u8aad\u307f\u305f\u3044<\/span>\n\t\t\t\t\t
\"\"<\/figure><\/div>\t\t\t\t\t
\n\t\t\t\t\t\t\u30d6\u30ed\u30c3\u30af\u3054\u3068\u306e\u4f59\u767d\u3092PC\u30fb\u30b9\u30de\u30db\u5225\u306b\u8abf\u6574\u3059\u308b\uff5cMotoki Spacing Controller\u306e\u4f7f\u3044\u65b9<\/a>\n\t\t\t\t\t\t\u30d6\u30ed\u30c3\u30af\u306e\u4e0a\u4e0b\u306e\u4f59\u767d\u3060\u3051\u3092\u3001PC\u3068\u30b9\u30de\u30db\u3067\u5225\u3005\u306b\u5909\u3048\u305f\u3044\u3002 \u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u306e\u6a19\u6e96\u6a5f\u80fd\u3067\u306f\u3001\u3053\u3053\u304c\u5c4a\u304d\u307e\u305b\u3093\u3002 \u7d50\u5c40CSS\u3092\u66f8\u3044\u3066\u3001\u66f4\u65b0\u3057\u3066\u3001\u78ba\u8a8d\u3057\u3066\u3001\u3068\u3044\u3046\u5f80\u5fa9\u306b…<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n
\u4ee5\u524d\u306e\u30b3\u30fc\u30c9\u306fGitHub\u306eMOTOKI-LLC\/WAZA-code<\/a>\u306b\u3082\u307e\u3068\u3081\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n
\u5bfe\u8c61\u306fSWELL\u306e\u30b5\u30a4\u30c9\u30d0\u30fc\u76ee\u6b21\uff08.widget_swell_index\uff09\u3067\u3059\u3002<\/p>\n\n\n\n
\u30b5\u30a4\u30c9\u30d0\u30fc\u304c\u975e\u8868\u793a\u306e\u30b9\u30de\u30db\u5e45\u3067\u306f\u76ee\u5370\u3082\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u30ea\u30f3\u30af\u81ea\u4f53\u306e\u30af\u30ea\u30c3\u30af\u30fbTab\u30fbEnter\u64cd\u4f5c\u306f\u5909\u66f4\u3057\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u623b\u3059\u5834\u5408\u306f\u8ffd\u52a0\u3057\u305f\u95a2\u6570\u3068add_action\u884c\u3092\u524a\u9664\u3057\u3001\u5909\u66f4\u524d\u306e\u30d5\u30a1\u30a4\u30eb\u3078\u623b\u3057\u3066\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u898b\u51fa\u3057\u3092JavaScript\u3067\u5f8c\u304b\u3089\u8ffd\u52a0\u3059\u308b\u69cb\u6210\u306b\u306f\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n
\u516c\u958b\u30da\u30fc\u30b8\u3067\u306e\u30cf\u30a4\u30e9\u30a4\u30c8\u306e\u898b\u672c<\/h2>\n
\u3053\u306e\u30da\u30fc\u30b8\u306ePC\u7528\u30b5\u30a4\u30c9\u30d0\u30fc\u76ee\u6b21\u3067\u3001\u753b\u9762\u4e0a\u7aef\u304b\u3089120px\u3092\u901a\u904e\u3057\u305f\u898b\u51fa\u3057\u306b\u5bfe\u5fdc\u3059\u308b\u30ea\u30f3\u30af\u3092\u5f37\u8abf\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u63b2\u8f09\u30b3\u30fc\u30c9\u306f\u901a\u5e38\u8aad\u307f\u8fbc\u307f\u3067\u306fload\u3092\u5f85\u3061\u3001document.readyState\u304ccomplete\u306a\u3089\u305d\u306e\u5834\u3067\u521d\u671f\u5316\u3059\u308b\u69cb\u6210\u3067\u3059\u3002<\/p>\n\n\n\n
\u521d\u671f\u5316\u5f8c\u306b\u751f\u6210\u3055\u308c\u305f\u76ee\u6b21\u30ea\u30f3\u30af\u3084\u898b\u51fa\u3057\u306f\u518d\u53ce\u96c6\u3057\u306a\u3044\u305f\u3081\u3001\u9045\u5ef6\u751f\u6210\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u306a\u3069\u3068\u306e\u7d44\u307f\u5408\u308f\u305b\u306f\u500b\u5225\u306b\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u76ee\u6b21\u30ea\u30f3\u30af\u306fTab\u3067\u9078\u629e\u3057Enter\u3067\u79fb\u52d5\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u30b9\u30de\u30db\u3067\u306f\u30c6\u30fc\u30de\u304c\u30b5\u30a4\u30c9\u30d0\u30fc\u3092\u8868\u793a\u3057\u306a\u3044\u305f\u3081\u3001\u3053\u306e\u898b\u672c\u306e\u30cf\u30a4\u30e9\u30a4\u30c8\u3082\u8868\u793a\u3057\u307e\u305b\u3093\u3002<\/p>\n