{"id":2,"date":"2025-07-29T10:22:51","date_gmt":"2025-07-29T10:22:51","guid":{"rendered":"http:\/\/hr-hackerplus.com\/invision"},"modified":"2026-03-24T16:43:15","modified_gmt":"2026-03-24T07:43:15","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/hr-hackerplus.com\/sample-page\/","title":{"rendered":"\u30c6\u30b9\u30c8\u52d5\u753b\u97f3\u58f0"},"content":{"rendered":"\n<div class=\"swell-block-fullWide pc-py-0 sp-py-0 alignfull\" style=\"background-color:#f7f7f7\"><div class=\"swell-block-fullWide__inner\">\n<!-- ======================================================\n     Swell \u30c8\u30c3\u30d7\u30da\u30fc\u30b8 \u52d5\u753b + \u97f3\u58f0\u30c8\u30b0\u30eb\u30dc\u30bf\u30f3\n     Swell\u306e\u300c\u30ab\u30b9\u30bf\u30e0HTML\u300d\u30d6\u30ed\u30c3\u30af\u306b\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\n     ====================================================== -->\n\n<style>\n  .swell-hero-video-wrap {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: #000;\n    \/* \u9ad8\u3055\u306f\u304a\u597d\u307f\u3067\u8abf\u6574 *\/\n    min-height: 400px;\n    max-height: 90vh;\n  }\n\n  .swell-hero-video-wrap video {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  \/* ---- \u97f3\u58f0\u30c8\u30b0\u30eb\u30dc\u30bf\u30f3 ---- *\/\n  .swell-audio-btn {\n    position: absolute;\n    bottom: 20px;\n    right: 20px;\n    z-index: 10;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    background: rgba(0, 0, 0, 0.55);\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n    border: 1.5px solid rgba(255, 255, 255, 0.35);\n    border-radius: 999px;\n    padding: 8px 18px 8px 14px;\n\n    color: #fff;\n    font-size: 13px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", sans-serif;\n    font-weight: 600;\n    letter-spacing: 0.04em;\n    cursor: pointer;\n\n    transition: background 0.25s, transform 0.15s, border-color 0.25s;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .swell-audio-btn:hover {\n    background: rgba(255, 255, 255, 0.2);\n    border-color: rgba(255, 255, 255, 0.7);\n    transform: scale(1.04);\n  }\n\n  .swell-audio-btn:active {\n    transform: scale(0.97);\n  }\n\n  \/* \u30a2\u30a4\u30b3\u30f3 SVG *\/\n  .swell-audio-btn svg {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    fill: #fff;\n    transition: opacity 0.2s;\n  }\n\n  \/* \u30df\u30e5\u30fc\u30c8\u6642\u306e\u30c6\u30ad\u30b9\u30c8 *\/\n  .swell-audio-btn .btn-label-unmuted { display: inline; }\n  .swell-audio-btn .btn-label-muted   { display: none; }\n\n  .swell-audio-btn.is-muted .btn-label-unmuted { display: none; }\n  .swell-audio-btn.is-muted .btn-label-muted   { display: inline; }\n\n  \/* \u6ce2\u5f62\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff08\u30df\u30e5\u30fc\u30c8\u89e3\u9664\u4e2d\uff09 *\/\n  @keyframes swellWave {\n    0%, 100% { transform: scaleY(1); }\n    50%       { transform: scaleY(0.4); }\n  }\n\n  .swell-audio-btn .wave-bar {\n    display: inline-block;\n    width: 3px;\n    border-radius: 2px;\n    background: #fff;\n    margin: 0 1px;\n    animation: swellWave 0.9s ease-in-out infinite;\n  }\n  .swell-audio-btn .wave-bar:nth-child(2) { animation-delay: 0.15s; height: 14px; }\n  .swell-audio-btn .wave-bar:nth-child(3) { animation-delay: 0.3s;  height: 10px; }\n  .swell-audio-btn .wave-bar:nth-child(4) { animation-delay: 0.0s;  height: 8px;  }\n  .swell-audio-btn .wave-bar:nth-child(5) { animation-delay: 0.45s; height: 12px; }\n\n  .swell-audio-btn.is-muted .wave-bar { animation: none; opacity: 0.35; }\n\n  \/* \u30df\u30e5\u30fc\u30c8\u30a2\u30a4\u30b3\u30f3\uff08\u00d7\u7dda\uff09 *\/\n  .swell-audio-btn .mute-x {\n    display: none;\n    position: relative;\n    width: 20px;\n    height: 20px;\n  }\n  .swell-audio-btn.is-muted .mute-x { display: block; }\n  .swell-audio-btn:not(.is-muted) .wave-icon { display: flex; }\n  .swell-audio-btn.is-muted .wave-icon { display: none; }\n\n  .mute-x::before,\n  .mute-x::after {\n    content: '';\n    position: absolute;\n    top: 50%; left: 50%;\n    width: 16px; height: 2px;\n    background: #fff;\n    border-radius: 1px;\n    transform-origin: center;\n  }\n  .mute-x::before { transform: translate(-50%, -50%) rotate(45deg); }\n  .mute-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }\n<\/style>\n\n<div class=\"swell-hero-video-wrap\">\n\n  <!--\n    \u25bc src \u306b\u52d5\u753b\u30d5\u30a1\u30a4\u30eb\u306eURL \u3092\u5165\u308c\u3066\u304f\u3060\u3055\u3044\n    \u25bc poster \u306b\u52d5\u753b\u306e\u5148\u982d\u753b\u50cfURL\uff08\u4efb\u610f\uff09\n    \u25bc autoplay \/ loop \/ muted \u306f\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u5909\u66f4\u53ef\n  -->\n  <video\n    id=\"swellHeroVideo\"\n    src=\"https:\/\/hr-hackerplus.com\/invision\/wp-content\/uploads\/2026\/03\/3673286763-preview.mp4\"\n    poster=\"YOUR_POSTER_IMAGE_URL_HERE.jpg\"\n    autoplay\n    loop\n    muted\n    playsinline\n    preload=\"auto\"\n  ><\/video>\n\n  <!-- \u97f3\u58f0\u30c8\u30b0\u30eb\u30dc\u30bf\u30f3 -->\n  <button\n    id=\"swellAudioBtn\"\n    class=\"swell-audio-btn is-muted\"\n    aria-label=\"\u97f3\u58f0\u306e\u30aa\u30f3\u30fb\u30aa\u30d5\u3092\u5207\u308a\u66ff\u3048\u308b\"\n    aria-pressed=\"true\"\n  >\n    <!-- \u6ce2\u5f62\u30a2\u30a4\u30b3\u30f3\uff08\u30df\u30e5\u30fc\u30c8\u89e3\u9664\u4e2d\uff09 -->\n    <span class=\"wave-icon\" aria-hidden=\"true\" style=\"display:none;align-items:flex-end;height:16px;gap:0;\">\n      <span class=\"wave-bar\" style=\"height:8px;\"><\/span>\n      <span class=\"wave-bar\" style=\"height:14px;\"><\/span>\n      <span class=\"wave-bar\" style=\"height:10px;\"><\/span>\n      <span class=\"wave-bar\" style=\"height:8px;\"><\/span>\n      <span class=\"wave-bar\" style=\"height:12px;\"><\/span>\n    <\/span>\n\n    <!-- \u30df\u30e5\u30fc\u30c8\u30a2\u30a4\u30b3\u30f3\uff08\u00d7\uff09 -->\n    <span class=\"mute-x\" aria-hidden=\"true\"><\/span>\n\n    <span class=\"btn-label-unmuted\">\u97f3\u58f0\u30aa\u30f3<\/span>\n    <span class=\"btn-label-muted\">\u30df\u30e5\u30fc\u30c8<\/span>\n  <\/button>\n\n<\/div>\n\n<script>\n(function () {\n  var video = document.getElementById('swellHeroVideo');\n  var btn   = document.getElementById('swellAudioBtn');\n  if (!video || !btn) return;\n\n  function setMute(muted) {\n    video.muted = muted;\n    if (muted) {\n      btn.classList.add('is-muted');\n      btn.setAttribute('aria-pressed', 'true');\n    } else {\n      btn.classList.remove('is-muted');\n      btn.setAttribute('aria-pressed', 'false');\n      \/\/ \u30d6\u30e9\u30a6\u30b6\u306eAutoplay Policy \u5bfe\u7b56: \u30e6\u30fc\u30b6\u30fc\u64cd\u4f5c\u5f8c\u306b\u518d\u751f\u3092\u8a66\u307f\u308b\n      video.play().catch(function(){});\n    }\n  }\n\n  btn.addEventListener('click', function () {\n    setMute(!video.muted);\n  });\n\n  \/\/ \u521d\u671f\u72b6\u614b\u3092\u540c\u671f\n  setMute(video.muted);\n})();\n<\/script>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hr-hackerplus.com\/?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hr-hackerplus.com\/?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hr-hackerplus.com\/?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hr-hackerplus.com\/?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hr-hackerplus.com\/?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":8,"href":"https:\/\/hr-hackerplus.com\/?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":1747,"href":"https:\/\/hr-hackerplus.com\/?rest_route=\/wp\/v2\/pages\/2\/revisions\/1747"}],"wp:attachment":[{"href":"https:\/\/hr-hackerplus.com\/?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}