{"id":23183,"date":"2023-09-14T12:09:08","date_gmt":"2023-09-14T03:09:08","guid":{"rendered":"https:\/\/motoki-design.co.jp\/wordpress\/?p=23183"},"modified":"2026-10-01T16:11:18","modified_gmt":"2026-10-01T07:11:18","slug":"wordpress-fixed-banner","status":"publish","type":"post","link":"https:\/\/motoki-design.co.jp\/wordpress\/wordpress-fixed-banner\/","title":{"rendered":"WordPress\u2502\u8a18\u4e8b\u306e\u7d42\u308f\u308a\u306b\u30d0\u30ca\u30fc\u3092\u8868\u793a\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba"},"content":{"rendered":"<p class=\"wp-block-paragraph\">\u8a18\u4e8b\u672b\u5c3e\u306b\u7f6e\u3044\u305f\u76ee\u5370\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u3089\u3001\u95a2\u9023\u60c5\u5831\u3078\u306e\u5c0f\u3055\u306a\u56fa\u5b9a\u30d1\u30cd\u30eb\u3092\u51fa\u3059\u4f8b\u3067\u3059\u3002\u30da\u30fc\u30b8\u5168\u4f53\u306e\u9ad8\u3055\u306e80%\u3092\u8a18\u4e8b\u672b\u5c3e\u3068\u898b\u306a\u3059\u51e6\u7406\u3092\u3084\u3081\u3001IntersectionObserver\u3067\u8a2d\u7f6e\u3057\u305f\u76ee\u5370\u3092\u76e3\u8996\u3057\u307e\u3059\u3002\u5e83\u544a\u306e\u6700\u9069\u5316\u3092\u884c\u3046\u4f8b\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<h2 class=\"wp-block-heading\">HTML\u3092\u8a18\u4e8b\u306e\u672b\u5c3e\u3078\u7f6e\u304f<\/h2>\n<p class=\"wp-block-paragraph\">\u5bfe\u8c61\u8a18\u4e8b\u306e\u30ab\u30b9\u30bf\u30e0HTML\u30d6\u30ed\u30c3\u30af\u306b\u6b21\u306e1\u7d44\u3092\u7f6e\u304d\u307e\u3059\u3002URL\u3068\u30ea\u30f3\u30af\u6587\u8a00\u3092\u5b9f\u969b\u306e\u6848\u5185\u306b\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u5f8c\u8ff0\u306e\u300c\u52d5\u304f\u898b\u672c\u300d\u306b\u76ee\u5370\u3092\u7f6e\u3044\u3066\u3044\u307e\u3059\u3002\u753b\u50cf\u30d0\u30ca\u30fc\u306b\u3059\u308b\u5834\u5408\u3082\u30ea\u30f3\u30af\u306e\u76ee\u7684\u304c\u5206\u304b\u308balt\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"html\"><code>&lt;p class=\"waza-end-marker\" tabindex=\"-1\"&gt;\u3053\u306e\u8a18\u4e8b\u306e\u8aac\u660e\u306f\u3053\u3053\u307e\u3067\u3067\u3059\u3002&lt;\/p&gt;\n&lt;aside class=\"waza-end-banner\" aria-label=\"\u95a2\u9023\u60c5\u5831\" hidden&gt;\n&lt;button type=\"button\" class=\"waza-banner-close\"&gt;\u9589\u3058\u308b&lt;\/button&gt;\n&lt;a href=\"https:\/\/motoki-design.co.jp\/wordpress\/\"&gt;WordPress\u306e\u5b9f\u88c5\u4f8b\u3092\u63a2\u3059&lt;\/a&gt;\n&lt;\/aside&gt;\n<\/code><\/pre><\/div>\n<h2 class=\"wp-block-heading\">CSS\u3092\u8ffd\u52a0<\/h2>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"css\"><code>.waza-end-banner&#91;hidden] { display: none !important; }\n.waza-end-banner {\n  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));\n  z-index: 80; width: min(280px, calc(100vw - 32px));\n  padding: 12px; background: #fff; color: #222; border: 2px solid #766028;\n  border-radius: 8px; box-shadow: 0 2px 12px #0002;\n}\n.waza-end-banner a { display: block; padding: 12px 0; color: #173b65; }\n.waza-banner-close { padding: 8px 12px; border: 1px solid #555; color: #222; background: #fff; }\n.waza-end-banner :focus-visible { outline: 3px solid #173b65; outline-offset: 2px; }\n<\/code><\/pre><\/div>\n<h2 class=\"wp-block-heading\">JavaScript\u3092\u8ffd\u52a0<\/h2>\n<p class=\"wp-block-paragraph\">\u5bfe\u8c61\u30da\u30fc\u30b8\u30671\u56de\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002\u65e2\u5b58\u306ewindow.onload\u3092\u66f8\u304d\u63db\u3048\u307e\u305b\u3093\u3002\u76ee\u5370\u30fb\u30d1\u30cd\u30eb\u30fb\u9589\u3058\u308b\u30dc\u30bf\u30f3\u304c\u306a\u3044\u30da\u30fc\u30b8\u3084IntersectionObserver\u975e\u5bfe\u5fdc\u74b0\u5883\u3067\u306f\u4f55\u3082\u3057\u307e\u305b\u3093\u3002<\/p>\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"js\"><code>(() =&gt; {\n  const init = () =&gt; {\n    const marker = document.querySelector('.waza-end-marker');\n    const banner = document.querySelector('.waza-end-banner');\n    const close = banner?.querySelector('.waza-banner-close');\n    if (!marker || !banner || !close || !('IntersectionObserver' in window)) return;\n    let dismissed = false;\n    const hide = () =&gt; {\n      if (banner.contains(document.activeElement)) marker.focus({preventScroll: true});\n      banner.hidden = true;\n    };\n    const observer = new IntersectionObserver(entries =&gt; {\n      if (dismissed) return;\n      const entry = entries&#91;0];\n      if (entry.isIntersecting || entry.boundingClientRect.bottom &lt; 0) banner.hidden = false;\n      else hide();\n    });\n    observer.observe(marker);\n    close.addEventListener('click', () =&gt; { dismissed = true; hide(); observer.disconnect(); });\n    banner.addEventListener('keydown', event =&gt; {\n      if (event.key === 'Escape') { dismissed = true; hide(); observer.disconnect(); event.preventDefault(); }\n    });\n  };\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, {once: true});\n  else init();\n})();\n<\/code><\/pre><\/div>\n<h2 class=\"wp-block-heading\">\u52d5\u304f\u898b\u672c<\/h2>\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u76ee\u5370\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u3068\u53f3\u4e0b\u306b\u6848\u5185\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u9589\u3058\u308b\u30dc\u30bf\u30f3\u307e\u305f\u306f\u30d1\u30cd\u30eb\u5185\u306eEscape\u30ad\u30fc\u3067\u9589\u3058\u307e\u3059\u3002\u9589\u3058\u305f\u5f8c\u306f\u3001\u3053\u306e\u30da\u30fc\u30b8\u3092\u518d\u8aad\u307f\u8fbc\u307f\u3059\u308b\u307e\u3067\u518d\u8868\u793a\u3057\u307e\u305b\u3093\u3002<\/p>\n<style>.waza-end-banner[hidden] { display: none !important; }\n.waza-end-banner {\n  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));\n  z-index: 80; width: min(280px, calc(100vw - 32px));\n  padding: 12px; background: #fff; color: #222; border: 2px solid #766028;\n  border-radius: 8px; box-shadow: 0 2px 12px #0002;\n}\n.waza-end-banner a { display: block; padding: 12px 0; color: #173b65; }\n.waza-banner-close { padding: 8px 12px; border: 1px solid #555; color: #222; background: #fff; }\n.waza-end-banner :focus-visible { outline: 3px solid #173b65; outline-offset: 2px; }\n<\/style><p class=\"waza-end-marker\" tabindex=\"-1\">\u3053\u306e\u8a18\u4e8b\u306e\u8aac\u660e\u306f\u3053\u3053\u307e\u3067\u3067\u3059\u3002<\/p>\n<aside class=\"waza-end-banner\" aria-label=\"\u95a2\u9023\u60c5\u5831\" hidden>\n<button type=\"button\" class=\"waza-banner-close\">\u9589\u3058\u308b<\/button>\n<a href=\"https:\/\/motoki-design.co.jp\/wordpress\/\">WordPress\u306e\u5b9f\u88c5\u4f8b\u3092\u63a2\u3059<\/a>\n<\/aside>\n<script>(() => {\n  const init = () => {\n    const marker = document.querySelector('.waza-end-marker');\n    const banner = document.querySelector('.waza-end-banner');\n    const close = banner?.querySelector('.waza-banner-close');\n    if (!marker || !banner || !close || !('IntersectionObserver' in window)) return;\n    let dismissed = false;\n    const hide = () => {\n      if (banner.contains(document.activeElement)) marker.focus({preventScroll: true});\n      banner.hidden = true;\n    };\n    const observer = new IntersectionObserver(entries => {\n      if (dismissed) return;\n      const entry = entries[0];\n      if (entry.isIntersecting || entry.boundingClientRect.bottom < 0) banner.hidden = false;\n      else hide();\n    });\n    observer.observe(marker);\n    close.addEventListener('click', () => { dismissed = true; hide(); observer.disconnect(); });\n    banner.addEventListener('keydown', event => {\n      if (event.key === 'Escape') { dismissed = true; hide(); observer.disconnect(); event.preventDefault(); }\n    });\n  };\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, {once: true});\n  else init();\n})();\n<\/script><h2 class=\"wp-block-heading\">\u78ba\u8a8d\u3068\u623b\u3057\u65b9<\/h2>\n<p class=\"wp-block-paragraph\">\u76ee\u5370\u3078\u5230\u9054\u3059\u308b\u524d\u3001\u5230\u9054\u6642\u3001\u901a\u904e\u5f8c\u3001\u4e0a\u3078\u623b\u3063\u305f\u6642\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002\u521d\u56de\u304b\u3089\u76ee\u5370\u304c\u753b\u9762\u5185\u306b\u3042\u308b\u77ed\u3044\u8a18\u4e8b\u3067\u306f\u3059\u3050\u8868\u793a\u3057\u307e\u3059\u3002\u30ad\u30fc\u30dc\u30fc\u30c9\u3067\u9589\u3058\u305f\u3068\u304d\u306f\u76ee\u5370\u3078\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u623b\u3057\u307e\u3059\u3002\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u5f37\u5236\u7684\u306b\u30d1\u30cd\u30eb\u3078\u79fb\u3059\u3053\u3068\u306f\u3057\u307e\u305b\u3093\u3002<\/p>\n<p class=\"wp-block-paragraph\">\u30b9\u30de\u30db\u3067\u672c\u6587\u3084\u5225\u306e\u56fa\u5b9aUI\u3092\u96a0\u3055\u306a\u3044\u304b\u3001\u9589\u3058\u308b\u30dc\u30bf\u30f3\u3092\u64cd\u4f5c\u3067\u304d\u308b\u304b\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u306e\u898b\u672c\u306f\u95a2\u9023\u30ea\u30f3\u30af\u306e\u6848\u5185\u3067\u3001\u5168\u753b\u9762\u306e\u5e83\u544a\u3084\u30e2\u30fc\u30c0\u30eb\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u623b\u3059\u5834\u5408\u306f\u8ffd\u52a0\u3057\u305fHTML\u30fbCSS\u30fbJavaScript\u3092\u5916\u3057\u307e\u3059\u3002\u65e7fixed-wrap\u3092\u64cd\u4f5c\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u3082\u505c\u6b62\u3057\u3066\u304b\u3089\u5207\u308a\u66ff\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"375\" height=\"865\" src=\"https:\/\/motoki-design.co.jp\/wordpress\/wp-content\/uploads\/waza-23183-20261001.jpg\" alt=\"\u8a18\u4e8b\u672b\u5c3e\u3067\u8868\u793a\u3055\u308c\u305f\u56fa\u5b9a\u30d0\u30ca\u30fc\u306e\u30b9\u30de\u30db\u5b9f\u753b\u9762\" class=\"wp-image-29871\"\/><figcaption class=\"wp-element-caption\">2026\u5e7410\u67081\u65e5\u3001\u516c\u958b\u30da\u30fc\u30b8\u3092\u5e45390px\u3067\u64cd\u4f5c\u3057\u3066\u64ae\u5f71\u3002<\/figcaption><\/figure>","protected":false},"excerpt":{"rendered":"<p>\u8a18\u4e8b\u672b\u5c3e\u306b\u7f6e\u3044\u305f\u76ee\u5370\u304c\u753b\u9762\u306b\u5165\u3063\u305f\u3089\u3001\u95a2\u9023\u60c5\u5831\u3078\u306e\u5c0f\u3055\u306a\u56fa\u5b9a\u30d1\u30cd\u30eb\u3092\u51fa\u3059\u4f8b\u3067\u3059\u3002\u30da\u30fc\u30b8\u5168\u4f53\u306e\u9ad8\u3055\u306e80%\u3092\u8a18\u4e8b\u672b\u5c3e\u3068\u898b\u306a\u3059\u51e6\u7406\u3092\u3084\u3081\u3001IntersectionObserver\u3067\u8a2d\u7f6e\u3057\u305f\u76ee\u5370\u3092\u76e3\u8996\u3057\u307e\u3059\u3002\u5e83\u544a\u306e\u6700\u9069\u5316\u3092\u884c\u3046 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":23190,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","book_review_data":"","footnotes":"","ssp_meta_title":"WordPress \u30d0\u30ca\u30fc\u3092\u8a18\u4e8b\u672b\u5c3e\u306b\u8868\u793a\u3059\u308b\u5b9f\u88c5\u624b\u9806","ssp_meta_description":"\u8a18\u4e8b\u672b\u5c3e\u306e\u30de\u30fc\u30ab\u30fc\u3092IntersectionObserver\u3067\u691c\u51fa\u3057\u3001\u56fa\u5b9a\u30d0\u30ca\u30fc\u3092\u8868\u793a\u3059\u308b\u5b9f\u88c5\u4f8b\u3002\u9589\u3058\u308b\u30dc\u30bf\u30f3\u3068Escape\u30ad\u30fc\u306b\u5bfe\u5fdc\u3057\u305f\u898b\u672c\u3092\u63b2\u8f09\u3002"},"categories":[91],"tags":[],"area":[],"class_list":["post-23183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-customize"],"_links":{"self":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts\/23183","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=23183"}],"version-history":[{"count":5,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts\/23183\/revisions"}],"predecessor-version":[{"id":29873,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/posts\/23183\/revisions\/29873"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/media\/23190"}],"wp:attachment":[{"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/media?parent=23183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/categories?post=23183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/tags?post=23183"},{"taxonomy":"area","embeddable":true,"href":"https:\/\/motoki-design.co.jp\/wordpress\/wp-json\/wp\/v2\/area?post=23183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}