{"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":"2024-09-05T15:15:24","modified_gmt":"2024-09-05T06:15:24","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<p>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<p>\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<p>\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<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"812\" height=\"606\" src=\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42-812x606.png\" alt=\"\" class=\"wp-image-597\" srcset=\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42-812x606.png 812w, https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42-382x285.png 382w, https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42-768x573.png 768w, https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42.png 924w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n\n\n<p><small class=\"mininote\">ZIMA\u3055\u3093\u306e<a href=\"https:\/\/tabikumo.com\/widget-mkj-scroll\/\" data-type=\"URL\" data-id=\"https:\/\/tabikumo.com\/widget-mkj-scroll\/\">THE 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<h2 class=\"wp-block-heading\">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<p>\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u76ee\u6b21\u3092\u30cf\u30a4\u30e9\u30a4\u30c8\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306ffunctions.php\u3092\u30b3\u30fc\u30c9\u3092\u633f\u5165\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u3001\u8a73\u3057\u304f\u89e3\u8aac\u3044\u305f\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">functions.php\u306b\u30b3\u30fc\u30c9\u3092\u633f\u5165\u3059\u308b<\/h3>\n\n\n\n<p><code class=\"dir_name\">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<p>functions.php\u306b\u4e0b\u8a18\u306e\u30b3\u30fc\u30c9\u3092\u633f\u5165\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u203b\u65e5\u672c\u8a9e\u30a2\u30f3\u30ab\u30fc\u3092\u5165\u308c\u305f\u6642\u306e\u30a8\u30e9\u30fc\u5bfe\u5fdc\u306b\u3066\u30b3\u30fc\u30c9\u3092\u4fee\u6b63\uff0811\u884c\u76ee 2022.9.30\uff09<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-php\" data-file=\"functions.php\" data-lang=\"PHP\" data-line=\"32,33\"><code>function motoki_mkj_highlighter() {\necho &lt;&lt;&lt; EOM\n&lt;script&gt;\nconst mkjHighlight = (e) =&gt; {\n  const hashes = document.querySelectorAll(&quot;.widget_swell_index a&quot;);\n  const sy = window.pageYOffset;\n  const ey = sy + document.documentElement.clientHeight;\n  let userAgent = window.navigator.userAgent.toLowerCase();\n  let focusEl = [null, null];\n  hashes.forEach((el) =&gt; {\n    const targetEl = document.querySelector(decodeURI(el.hash));\n    const y = sy + targetEl.getBoundingClientRect().top;\n    el.closest(&quot;.p-toc__list li&quot;).classList.remove(&quot;mkj-marker&quot;);\n    el.classList.remove(&quot;mkj-active&quot;);\n    if (sy &lt; y && y &lt; ey && !focusEl[1]) {\n      focusEl[1] = el;\n      focusEl[0] = null;\n    }\n    if (sy &gt; y) focusEl[0] = el;\n  });\n  if (focusEl.length)\n    focusEl.forEach((el) =&gt; {\n      el && el.classList.add(&quot;mkj-active&quot;);\n      el && el.closest(&quot;.p-toc__list &gt; li&quot;).classList.add(&quot;mkj-marker&quot;);\n    });\n};\nmkjHighlight();\nwindow.addEventListener(&quot;scroll&quot;, mkjHighlight);\n&lt;\/script&gt;\n&lt;style&gt;\n.p-toc__link.mkj-active, .mkj-marker::before {\n    background-color: var(--color_main);\n    color: #fff;\n    padding: 0.2em;\n}\n&lt;\/style&gt;\nEOM;\n}\nadd_action( &#39;wp_print_footer_scripts&#39;, &#39;motoki_mkj_highlighter&#39; );<\/code><\/pre><\/div>\n\n\n\n<p>\u3082\u3057\u30cf\u30a4\u30e9\u30a4\u30c8\u3059\u308b\u8272\u3092\u5909\u66f4\u3057\u305f\u3044\u5834\u5408\u306f\u30b3\u30fc\u30c9\u306e32,33\u884c\u76ee\u3067\u80cc\u666f\u306e\u8272\u3068\u6587\u5b57\u306e\u8272\u304c\u5909\u66f4\u3067\u304d\u307e\u3059\uff08CSS\uff09<\/p>\n\n\n\n<p>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306f\u4ee5\u4e0a\u3067\u3059\u3002<\/p>\n\n\n\n<p>\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<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"812\" height=\"606\" src=\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42-812x606.png\" alt=\"\" class=\"wp-image-597\" srcset=\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42-812x606.png 812w, https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42-382x285.png 382w, https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42-768x573.png 768w, https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/2022-04-16_11h19_42.png 924w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>\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<p>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<p>\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","protected":false},"excerpt":{"rendered":"<p>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 \u8a18\u4e8b\u3092\u898b\u3066\u3044\u308b\u969b\u306b\u3001\u4eca\u3069\u3053\u306e\u90e8\u5206\u3092\u898b\u3066\u3044\u308b\u306e\u304b\uff1f \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  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":601,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pochipp_cv_data":"","swell_btn_cv_data":"","footnotes":""},"categories":[110],"tags":[],"area":[],"class_list":["post-596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-swell-customize"],"_links":{"self":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/comments?post=596"}],"version-history":[{"count":1,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts\/596\/revisions"}],"predecessor-version":[{"id":24356,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts\/596\/revisions\/24356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/media\/601"}],"wp:attachment":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/media?parent=596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/categories?post=596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/tags?post=596"},{"taxonomy":"area","embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/area?post=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}