{"id":4036,"date":"2023-04-25T10:14:41","date_gmt":"2023-04-25T01:14:41","guid":{"rendered":"http:\/\/www.lining-moon.casa\/andplus.co.jp_230822_230809\/?p=4036"},"modified":"2026-07-09T10:56:01","modified_gmt":"2026-07-09T01:56:01","slug":"post-4036","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/post-4036\/","title":{"rendered":"WordPress\u306e\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3067Masonry\u3068Swiper\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"<p>WordPress\u306b\u306f\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3068\u547c\u3070\u308c\u308b\u77ed\u3044\u30b3\u30fc\u30c9\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u7c21\u5358\u306b\u7279\u5b9a\u306e\u6a5f\u80fd\u3092\u8ffd\u52a0\u3067\u304d\u308b\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001WordPress\u306e\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u4f7f\u3063\u3066\u3001Masonry\u3068Swiper\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\r\n<p>&nbsp;<\/p>\r\n<p>\u307e\u305a\u306f\u3001Masonry\u306e\u5b9f\u88c5\u306b\u3064\u3044\u3066\u3067\u3059\u3002Masonry\u306f\u3001\u7e26\u6a2a\u306b\u914d\u7f6e\u3055\u308c\u305f\u30b0\u30ea\u30c3\u30c9\u72b6\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002WordPress\u306e\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u4f7f\u3063\u3066\u3001\u7c21\u5358\u306bMasonry\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\r\n<p>&nbsp;<\/p>\r\n<p>\u6b21\u306b\u3001Swiper\u306e\u5b9f\u88c5\u306b\u3064\u3044\u3066\u3067\u3059\u3002Swiper\u306f\u3001\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002WordPress\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u6a5f\u80fd\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u3001Swiper\u3092\u3046\u307e\u304f\u7d44\u307f\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\r\n<p>&nbsp;<\/p>\r\n<p>\u3057\u304b\u3057\u3001Swiper\u3092\u4f7f\u7528\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u72ec\u81ea\u306e\u30ab\u30b9\u30bf\u30e0\u30b3\u30fc\u30c9\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u3067\u3001WordPress\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u6a5f\u80fd\u3092Swiper\u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\r\n<p>&nbsp;<\/p>\r\n<pre class=\"language-javascript\"><code>\r\nfunction swpViewModalPromiseNH1A() {\r\n\/\/Swiper\uff1aswiper-viewModal\uff1aJS\r\nreturn new Promise(function (resolve, reject) {\r\n  setTimeout(function () {\r\n  \/\/\u6700\u521d\u306e\u51e6\u7406\uff1a\u300c.masonry>img\u300d\u306b\u3001\u9023\u756a\u3067\u300cdata-slito=\"\"\u300d\u3092\u4ed8\u4e0e\r\n  let lstMsryHtmbNH0As = document.querySelectorAll('.masonry-href-thumbnail>img');\r\n  let msryHtmbNH0As = Array.prototype.slice.call(lstMsryHtmbNH0As); \/\/Array.NodeList\r\n  msryHtmbNH0As.forEach((msryHtmbNH0A, index) => {\r\n    msryHtmbNH0A.setAttribute('data-sldto', index + 1);\r\n  });\r\n  resolve();\r\n  }, 0);\r\n})\r\n.then(function () {\r\nreturn new Promise(function (resolve, reject) {\r\n  setTimeout(function () {\r\n    \/\/2\u756a\u76ee\u306e\u51e6\u7406\uff1aMasonry.js\r\n    let lstMsryWrpNH0As = document.querySelectorAll(\".masonry-container .masonry-wrapper\");\r\n    let msryWrpNH0As = Array.prototype.slice.call(lstMsryWrpNH0As); \/\/Array.NodeList\r\n\r\n    \/\/\u30a6\u30a3\u30f3\u30c9\u30a6\u30ea\u30b5\u30a4\u30ba\u30fb\u753b\u50cf\u30ed\u30fc\u30c9\u6642\u306e\u30a4\u30d9\u30f3\u30c8\r\n    let timerNH0A = 0;\r\n    let phancMsryRsizImeloadNH0A = function () {\r\n      if (timerNH0A) clearTimeout(timerNH0A);\r\n      timerNH0A = setTimeout(() => {\r\n        \/\/Masonry.js\r\n        $(msryWrpNH0As).masonry({\r\n          itemSelector: '.masonry-wrapper .masonry-slide',\r\n          fitWidth: true \/\/\u89aa\u8981\u7d20\u306e\u5e45\u3092\u30b0\u30ea\u30c3\u30c9\u5e45\u306b\u5408\u308f\u305b\u3066\u8a2d\u5b9a\r\n        });\r\n      }, 300);\r\n    };\r\n    \/\/\u30a6\u30a3\u30f3\u30c9\u30a6\u30ea\u30b5\u30a4\u30ba\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u547c\u3073\u51fa\u3057\u767b\u9332\r\n    window.addEventListener('resize', function (e) {\r\n      phancMsryRsizImeloadNH0A();\r\n    });\r\n    \/\/\u753b\u50cf\u30ed\u30fc\u30c9\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u547c\u3073\u51fa\u3057\u767b\u9332\uff08imagesLoaded\uff09\r\n    imagesLoaded(msryWrpNH0As, function (e) {\r\n      phancMsryRsizImeloadNH0A();\r\n    }); \/\/\/window.'resize\r\n    resolve();\r\n  }, 0);\r\n})\r\n})\r\n.then(function () {\r\nreturn new Promise(function (resolve, reject) {\r\n  setTimeout(function () {\r\n    \/\/3\u756a\u76ee\u306e\u51e6\u7406\uff1aSwiper\u30e2\u30fc\u30c0\u30eb\u8a2d\u5b9a\r\n    let lstMdlClsrNH1As = document.querySelectorAll(\".js-modalCloser\");\r\n    let mdlClsrNH1As = Array.prototype.slice.call(lstMdlClsrNH1As);\r\n    let lstMdlOpnrNH1As = document.querySelectorAll(\".js-modalOpener\");\r\n    let mdlOpnrNH1As = Array.prototype.slice.call(lstMdlOpnrNH1As); \/\/Array.NodeList\r\n    let lstTriggerNH1As = document.querySelectorAll(\".swiper-container.swiper-viewModal\");\r\n    let triggerNH1As = Array.prototype.slice.call(lstTriggerNH1As);\r\n\r\n    \/\/\u30c8\u30ea\u30ac\u30fc\u304b\u3089ID\u3092\u53d6\u308a\u51fa\u3057\u3066\u3001\u30eb\u30fc\u30d7\u51e6\u7406\r\n    let lngtNH1A = triggerNH1As.length;\r\n    for (var n = 0; n < lngtNH1A; n++) {\r\n      var targetNH1A = triggerNH1As[n].getAttribute('id');\r\n      var targetNH1A = document.getElementById(targetNH1A);\r\n      \/\/action\uff08swpViewModal\uff09\r\n      let swpViewModalNH1A = new Swiper(targetNH1A, {\r\n        \/\/effect: 'fade', \/\/\u30b9\u30e9\u30a4\u30c9\u30a8\u30d5\u30a7\u30af\u30c8\r\n        slidesPerView: 1, \/\/\u30b3\u30f3\u30c6\u30ca\u5185\u306b\u8868\u793a\u3055\u305b\u308b\u30b9\u30e9\u30a4\u30c9\u6570\r\n        spaceBetween: 0, \/\/\u30b9\u30e9\u30a4\u30c9\u9593\u306e\u4f59\u767d\uff08px\uff09\r\n        \/\/direction: 'vertical', \/\/\u7e26\u65b9\u5411\r\n        centeredSlides: true, \/\/\u4e2d\u592e\u914d\u7f6e\r\n        loop: true, \/\/\u30eb\u30fc\u30d7\r\n        \/\/loopedSlides: 9, \/\/\u30b9\u30e9\u30a4\u30c9\u306e\u679a\u6570\u3068\u540c\u3058\u5024\u3092\u6307\u5b9a\r\n        speed: 1000, \/\/\u30b9\u30e9\u30a4\u30c9\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u901f\u5ea6\uff08\u30df\u30ea\u79d2\uff09\r\n        \/\/autoplay: { \/\/\u81ea\u52d5\u518d\u751f\r\n        \/\/  delay: 3000, \/\/\u6b21\u306e\u30b9\u30e9\u30a4\u30c9\u3078\u306e\u5207\u66ff\u6642\u9593\uff08\u30df\u30ea\u79d2\uff09\r\n        \/\/  disableOnInteraction: true, \/\/\u30e6\u30fc\u30b6\u30fc\u64cd\u4f5c\u3067\u81ea\u52d5\u518d\u751f\u30b9\u30c8\u30c3\u30d7\r\n        \/\/  stopOnLastSlide: true \/\/\u6700\u7d42\u30b9\u30e9\u30a4\u30c9\u3067\u81ea\u52d5\u518d\u751f\u30b9\u30c8\u30c3\u30d7\r\n        \/\/},\r\n        grabCursor: true, \/\/PC\u30ab\u30fc\u30bd\u30eb\u3092\u300c\u63b4\u3080\u300d\u30de\u30fc\u30af\u306b\u3059\u308b\r\n        \/\/allowTouchMove: true, \/\/\u30b9\u30ef\u30a4\u30d7\u7121\u52b9\r\n\r\n        pagination: {\r\n          el: '.swiper-pagination', \/\/\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u8981\u7d20\u306e\u30af\u30e9\u30b9\r\n          clickable: true, \/\/\u30af\u30ea\u30c3\u30af\u6709\u52b9\r\n          type: 'bullets'\r\n        },\r\n        navigation: {\r\n          nextEl: '.swiper-button-next', \/\/\u300c\u6b21\u3078\u300d\u30dc\u30bf\u30f3\r\n          prevEl: '.swiper-button-prev', \/\/\u300c\u524d\u3078\u300d\u30dc\u30bf\u30f3\r\n        },\r\n        \/\/on: { \/\/\u30a4\u30d9\u30f3\u30c8 },\r\n      });\r\n\r\n      \/\/\u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3059\u308b\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\r\n      let phancMdlOpnrNH1A = function () {\r\n        let lngtNH1A = mdlOpnrNH1As.length;\r\n        for (let n = 0; n < lngtNH1A; n++) {\r\n          mdlOpnrNH1As[n].addEventListener('click', function (e) {\r\n            e.preventDefault(); \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u52d5\u4f5c\u3092\u30ad\u30e3\u30f3\u30bb\u30eb\r\n            \/\/img\u306edata\u5c5e\u6027\u306e\u5024\u3092\u53d6\u5f97\u3057\u3066\u3001\u6570\u5024\u306b\u5909\u63db\u3059\u308b\r\n            let openImgNH1A = mdlOpnrNH1As[n].querySelector('img');\r\n            let dataSldTo = openImgNH1A.dataset.sldto;\r\n            \/\/let dataSldTo = openImgNH1A.getAttribute('title');\r\n            let intSldTo = parseInt(dataSldTo);\r\n            if (isNaN(intSldTo)) {\r\n              intSldTo = 1;\r\n            };\r\n            swpViewModalNH1A.slideTo(intSldTo);\r\n            targetNH1A.classList.add(\"is-active\");\r\n          });\r\n        };\r\n      }(); \/\/\/.for.addEventListener('click'\r\n\r\n      \/\/\u30e2\u30fc\u30c0\u30eb\u3092\u9589\u3058\u308b\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\r\n      let phancMdlClsrNH1A = function () {\r\n        mdlClsrNH1As.forEach((mdlClsrNH1A) => {\r\n          mdlClsrNH1A.addEventListener(\"click\", () => {\r\n            targetNH1A.classList.remove(\"is-active\");\r\n          });\r\n        });\r\n      }(); \/\/\/.forEach.addEventListener('click'\r\n    }; \/\/for{}\r\n    resolve();\r\n  }, 0);\r\n})\r\n})\r\n.catch(function (error) {\r\nconsole.log(error);\r\n});\r\n}\r\nswpViewModalPromiseNH1A();    \r\n<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<pre class=\"language-css\"><code>\r\n\/* masonry-viewModalTmb\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a *\/\r\n.masonry-container.masonry-viewModalTmb {\r\n  position: relative;\r\n  \/* Flex *\/\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  align-items: flex-start;\r\n  width: 1050px;\r\n  max-width: 100%;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  overflow: hidden;\r\n  margin-bottom: 3rem;\r\n}\r\n\r\n.masonry-viewModalTmb .masonry-wrapper {\r\n  width: 100% !important;\r\n}\r\n\r\n.masonry-viewModalTmb .masonry-wrapper::after {\r\n  content: \"\";\r\n  display: block;\r\n  clear: both;\r\n}\r\n\r\n.masonry-viewModalTmb .masonry-wrapper>li {\r\n  width: 100%;\r\n  max-width: 90vw;\r\n  \/* padding: \u4e0a  \u6a2a  \u4e0b *\/\r\n  padding: 10px 10px 10px;\r\n}\r\n\r\n\/* \uff08PC\uff09 *\/\r\n@media print,\r\nscreen and (min-width: 768px) {\r\n  .masonry-viewModalTmb .masonry-wrapper>li {\r\n    width: 33.3%;\r\n  }\r\n}\r\n\r\n.masonry-viewModalTmb .masonry-ifield {\r\n  padding: 0;\r\n  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px,\r\n    rgba(0, 0, 0, 0.24) 0px 1px 2px;\r\n  overflow: hidden;\r\n}\r\n\r\n.masonry-viewModalTmb .masonry-href-thumbnail {\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  overflow: hidden;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.masonry-viewModalTmb .masonry-href-thumbnail>img {\r\n  width: 100%;\r\n  height: auto;\r\n  pointer-events: auto;\r\n}\r\n\r\n.masonry-viewModalTmb .masonry-caption {\r\n  display: none;\r\n}\r\n\r\n\r\n\r\n\r\n\/* swiper-viewModal\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a *\/\r\n\/* \u30e2\u30fc\u30c0\u30eb\u80cc\u666f\u306e\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u90e8\u5206 *\/\r\n.swiper-modalOuter:has(+.swiper-viewModal.is-active) {\r\n  position: fixed;\r\n  z-index: 100;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  margin: auto;\r\n  width: 100%;\r\n  height: 100vh;\r\n  background-color: rgba(120, 123, 131, 0.8);\r\n  cursor: pointer;\r\n}\r\n\r\n.swiper-container.swiper-viewModal {\r\n  position: fixed;\r\n  z-index: 110;\r\n  \/* \u30d8\u30c3\u30c0\u30fc\u5206\u8abf\u6574 *\/\r\n  top: 4.5rem;\r\n  bottom: 0px;\r\n  left: 0;\r\n  right: 0;\r\n  margin: auto;\r\n  background: #FFF;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 1050px;\r\n  max-width: 100%;\r\n  \/* \u30d8\u30c3\u30c0\u30fc\u5206\u8abf\u6574 *\/\r\n  height: calc(100% - 10.5rem);\r\n  \/* Pagenation\u5206\u8abf\u6574 *\/\r\n  padding: 0px 0px 30px;\r\n  transition: opacity 0.5s ease-in;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* \u30e2\u30fc\u30c0\u30eb\u304cactive\u306e\u6642 *\/\r\n.swiper-container.swiper-viewModal.is-active {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n\/* \u30e2\u30fc\u30c0\u30eb\u3092\u9589\u3058\u308b\u30dc\u30bf\u30f3 *\/\r\n.swiper-modalCloser {\r\n  cursor: pointer;\r\n  position: absolute;\r\n  z-index: 20;\r\n  right: 0;\r\n  top: 0;\r\n  width: 44px;\r\n  height: 44px;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding-bottom: 2px;\r\n  background: #fff;\r\n  border: 1px solid #ccc;\r\n}\r\n\r\n.swiper-viewModal .swiper-wrapper {\r\n  \/* navigation\u5206\u306e\u4f59\u767d\u8abf\u6574 *\/\r\n  left: 0px;\r\n}\r\n\r\n.swiper-viewModal .swiper-wrapper>li {\r\n  height: auto;\r\n  max-height: 80hvh;\r\n  max-height: 80vh;\r\n  text-align: center;\r\n  \/* padding: \u4e0a  \u6a2a  \u4e0b *\/\r\n  padding: 2rem 2rem 0px;\r\n}\r\n\r\n.swiper-viewModal .swiper-ifield {\r\n  max-height: 100%;\r\n  padding: 0;\r\n  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px,\r\n    rgba(0, 0, 0, 0.24) 0px 1px 2px;\r\n  overflow: hidden;\r\n}\r\n\r\n.swiper-viewModal .swiper-href-thumbnail {\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  overflow: hidden;\r\n  margin-bottom: 0;\r\n}\r\n\r\n.swiper-viewModal .swiper-href-thumbnail>img {\r\n  position: static;\r\n  top: 0;\r\n  height: calc(80vh - 30px);\r\n  height: calc(80dvh - 30px);\r\n  width: auto;\r\n  max-width: 100% !important;\r\n  margin-top: 0 !important;\r\n  margin-bottom: 0 !important;\r\n  border: none !important;\r\n  object-fit: cover;\r\n}\r\n\r\n.swiper-viewModal .swiper-caption {\r\n  position: absolute;\r\n  top: 11%;\r\n  left: 2rem;\r\n  right: auto;\r\n  margin: auto;\r\n  width: auto;\r\n  height: auto;\r\n  \/* \u6587\u5b57\u6570\u6b21\u7b2c\u3067\u8abf\u6574 *\/\r\n  padding: 0em 2.3em 0em 1.3em;\r\n  margin-bottom: 0 !important;\r\n  text-align: left;\r\n  \/* Flex *\/\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  \/* .cap-w-img *\/\r\n  text-shadow: none;\r\n  background: hsla(0, 0%, 96%, 0.5);\r\n  transform: rotateZ(-16deg);\r\n}\r\n\r\n.swiper-viewModal .swiper-caption * {\r\n  color: #666;\r\n}\r\n\r\n.swiper-viewModal .swiper-caption .swiper-title {\r\n  font-family: 'Josefin Sans', sans-serif;\r\n  font-size: 45px;\r\n  font-size: clamp(25.9px, calc(25.9px + ((1vw - 3.6px) * 2.98438)), 45px);\r\n  min-height: 0vw;\r\n  color: hsla(0, 0%, 44%, 1);\r\n  \/* Flex: order *\/\r\n  order: 1;\r\n}\r\n\r\n.swiper-viewModal .swiper-caption .swiper-title,\r\n.swiper-viewModal .swiper-caption .swiper-title a {\r\n  font-weight: 600;\r\n  border-bottom: none;\r\n  color: var(--c-magique_p) !important;\r\n}\r\n\r\n.swiper-viewModal .swiper-caption .swiper-meta-fields {\r\n  \/* Flex: order *\/\r\n  order: 2;\r\n  font-size: 13px;\r\n  color: var(--c-magique_p);\r\n  \/* \u533a\u5207\u308a\u306e\u30ab\u30f3\u30de\u30fb\u30b9\u30e9\u30c3\u30b7\u30e5\u3092\u975e\u8868\u793a\u306b\u3059\u308b *\/\r\n  font-size: 0px;\r\n  color: transparent;\r\n}\r\n\r\n\/* \u65e5\u4ed8 *\/\r\n.swiper-viewModal .swiper-meta-fields .entry-date {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n  font-size: 13px;\r\n  padding-bottom: 0.1em;\r\n  margin-right: 4px;\r\n}\r\n\r\n\/* \u30bf\u30b0 *\/\r\n.swiper-viewModal .swiper-meta-fields .terms a[class^=\"swiper-tax-\"] {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  padding: 0.2em 0.4em 0.3em;\r\n  border-radius: 2px;\r\n  line-height: 1;\r\n  font-size: 11px;\r\n  text-align: center;\r\n  background: hsla(0, 0%, 96%, 1);\r\n  pointer-events: none;\r\n  margin-right: 4px;\r\n}\r\n\r\n\/* \u30ab\u30c6\u30b4\u30ea\u30fc\uff08\u30ab\u30c6\u30b4\u30ea\u30fc\u540d\u3092\u300ccat-***\u300d\u306b\u3057\u3066\u304a\u304f\uff09 *\/\r\n.swiper-viewModal .swiper-meta-fields .terms a[class^=\"swiper-tax-cat-\"] {\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n  margin: auto;\r\n  display: inline-block;\r\n  width: auto;\r\n  height: auto;\r\n  padding: 0.6em 1em 0.6em;\r\n  line-height: 1;\r\n  font-size: 13px;\r\n  text-align: center;\r\n  font-weight: 600;\r\n  background: var(--bgc-magique_accent);\r\n  color: #FFF;\r\n  border-radius: 0px;\r\n  \/* \u30ab\u30c6\u30b4\u30ea\u3060\u3051\u30ea\u30f3\u30af\u306b\u3059\u308b *\/\r\n  pointer-events: auto;\r\n}\r\n\r\n.swiper-viewModal .swiper-caption .swiper-content {\r\n  \/* Flex: order *\/\r\n  order: 3;\r\n  margin-top: 0.4em;\r\n  width: 100%;\r\n  font-size: var(--va-saraciere-fz_smaller);\r\n  color: var(--c-magique_p);\r\n}\r\n\r\n.swiper-viewModal .swiper-content .btn {\r\n  margin-top: 15px;\r\n  display: block;\r\n  width: 250px;\r\n  max-width: 90%;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  padding: 6px 12px;\r\n  font-size: 14px;\r\n  line-height: 1.44;\r\n  font-weight: 400;\r\n  text-align: center;\r\n  white-space: nowrap;\r\n  border-radius: 4px;\r\n}\r\n\r\n.swiper-viewModal .swiper-readmore.btn {\r\n  background: var(--bgc-magique_base);\r\n  color: #428bca;\r\n  border-radius: 0px;\r\n  border: 1px solid var(--bgc-magique_accent);\r\n}\r\n\r\n.swiper-viewModal a:hover.swiper-readmore.btn {\r\n  background: #428bca;\r\n  color: #FFF;\r\n}\r\n\r\n\/* navigation *\/\r\n.swiper-viewModal .swiper-navigation {\r\n  position: absolute;\r\n  z-index: 10;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0px;\r\n  right: 15px;\r\n  margin: auto;\r\n  width: 100%;\r\n  max-width: 90vw;\r\n  height: auto;\r\n}\r\n\r\n.swiper-viewModal .swiper-button-prev,\r\n.swiper-viewModal .swiper-button-next {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  transform: translateZ(0);\r\n  transition: all 0.1s ease-out;\r\n  width: 74px;\r\n  height: 74px;\r\n  font-size: 74px;\r\n  text-align: center;\r\n  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);\r\n  border-radius: 999px;\r\n  opacity: 1;\r\n  background: transparent;\r\n  color: hsla(0, 0%, 44%, 1);\r\n}\r\n\r\n.swiper-viewModal .swiper-button-prev {\r\n  position: absolute;\r\n  top: 0px;\r\n  bottom: 0px;\r\n  left: -12px;\r\n  margin: auto;\r\n}\r\n\r\n.swiper-viewModal .swiper-button-next {\r\n  position: absolute;\r\n  top: 0px;\r\n  bottom: 0px;\r\n  right: -12px;\r\n  margin: auto;\r\n}\r\n\r\n.swiper-viewModal .swiper-button-prev::before,\r\n.swiper-viewModal .swiper-button-next::before {\r\n  font-family: 'Material Symbols Sharp';\r\n  font-variation-settings:\r\n    'FILL'0,\r\n    'wght'200;\r\n  margin: auto;\r\n  width: 1em;\r\n  height: 1em;\r\n  line-height: 1;\r\n  font-size: 1em;\r\n  text-align: center;\r\n  color: inherit;\r\n}\r\n\r\n.swiper-viewModal .swiper-button-prev::before {\r\n  content: \"\\e5cb\";\r\n}\r\n\r\n.swiper-viewModal .swiper-button-next::before {\r\n  content: \"\\e5cc\";\r\n}\r\n\r\n@media (any-hover: hover) {\r\n  .swiper-viewModal .swiper-button-prev:hover {\r\n    opacity: 1;\r\n    transform: translateX(-4px);\r\n  }\r\n\r\n  .swiper-viewModal .swiper-button-next:hover {\r\n    opacity: 1;\r\n    transform: translateX(4px);\r\n  }\r\n}\r\n\r\n\/* pagination *\/\r\n.swiper-viewModal .swiper-pagination {\r\n  position: static;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  \/* navigation\u5206\u306e\u4f59\u767d\u8abf\u6574 *\/\r\n  padding: 15px 0px 15px 0px;\r\n}\r\n\r\n.swiper-viewModal .swiper-pagination-bullet {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  width: 10px;\r\n  height: 10px;\r\n  border-radius: 999px;\r\n  background: #CECECE;\r\n  border: 1px solid #CECECE;\r\n  opacity: 1;\r\n}\r\n\r\n.swiper-viewModal .swiper-pagination-bullet-active {\r\n  width: 12px;\r\n  height: 12px;\r\n  background: #428bca;\r\n  opacity: 1;\r\n}\r\n<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<pre class=\"language-php\"><code>\r\n<?php \/\/\uff08shortcode.php\uff09\r\n\r\n\/* \u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\uff1a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a *\/\r\n\/\/shortcode [masonry id= view=\"\"]\uff5e[\/masonry]\r\nfunction shortcode_masonry($atts) {\r\n  extract(shortcode_atts(array(\r\n    'id' => '',\r\n    'view' => '',\r\n    'ids' => ''\r\n  ), $atts));\r\n\r\n  $gallery_items = '';\r\n  $ids_array = explode(',', $ids);\r\n\r\n  foreach ($ids_array as $id) {\r\n    $gallery_item = wp_get_attachment_image($id, 'full');\r\n    $gallery_items .= '<li class=\"masonry-slide\"><figure class=\"masonry-ifield\"><a class=\"masonry-href-thumbnail ev-none\">' . $gallery_item . '<\/a><\/figure><\/li>';\r\n  }\r\n\r\n  $output = '';\r\n  \/\/masonry-container\r\n  $output .= '<div id=\"' . esc_attr($atts['id']) . '\" class=\"masonry-container masonry-view' . esc_attr($atts['view']) . '\">';\r\n  $output .= '<ul class=\"masonry-wrapper\">';\r\n  $output .= $gallery_items;\r\n  $output .= '<\/ul><!-- \/.masonry-wrapper -->';\r\n  $output .= '<\/div><!-- \/.masonry-container -->';\r\n\r\n  return $output;\r\n}\r\nadd_shortcode('masonry', 'shortcode_masonry');\r\n\r\n\r\n<?php \/\/\uff08shortcode.php\uff09\r\n\r\n\/* \u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\uff1a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a *\/\r\n\/\/shortcode [masonry id= view=\"\"]\uff5e[\/masonry]\r\nfunction shortcode_masonry($atts) {\r\n  extract(shortcode_atts(array(\r\n    'id' => '',\r\n    'view' => '',\r\n    'ids' => ''\r\n  ), $atts));\r\n\r\n  $gallery_items = '';\r\n  $ids_array = explode(',', $ids);\r\n\r\n  foreach ($ids_array as $id) {\r\n    $gallery_item = wp_get_attachment_image($id, 'full');\r\n    $gallery_items .= '<li class=\"masonry-slide\"><figure class=\"masonry-ifield\"><a class=\"masonry-href-thumbnail ev-none\">' . $gallery_item . '<\/a><\/figure><\/li>';\r\n  }\r\n\r\n  $output = '';\r\n  \/\/masonry-container\r\n  $output .= '<div id=\"' . esc_attr($atts['id']) . '\" class=\"masonry-container masonry-view' . esc_attr($atts['view']) . '\">';\r\n  $output .= '<ul class=\"masonry-wrapper\">';\r\n  $output .= $gallery_items;\r\n  $output .= '<\/ul><!-- \/.masonry-wrapper -->';\r\n  $output .= '<\/div><!-- \/.masonry-container -->';\r\n\r\n  return $output;\r\n}\r\nadd_shortcode('masonry', 'shortcode_masonry');\r\n\r\n\r\n\/\/shortcode [swiper id=\"\" view=\"\"]\uff5e[\/swiper]\r\nfunction shortcode_swiper($atts) {\r\n  extract(shortcode_atts(array(\r\n    'id' => '',\r\n    'view' => '',\r\n    'ids' => ''\r\n  ), $atts));\r\n\r\n  $gallery_items = '';\r\n  $ids_array = explode(',', $ids);\r\n\r\n  foreach ($ids_array as $id) {\r\n    $caption = $attachment->post_content; \/\/\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u3092\u53d6\u5f97\r\n    $gallery_item = wp_get_attachment_image($id, 'full');\r\n    if ($caption) {\r\n      $gallery_caption .= '<figcaption class=\"swiper-caption\">' . $caption . '<\/figcaption>'; \/\/ \u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u304c\u3042\u308b\u5834\u5408\u306f\u30b9\u30e9\u30a4\u30c9\u306b\u8ffd\u52a0\r\n    }\r\n    $gallery_items .= '<li class=\"swiper-slide\"><figure class=\"swiper-ifield\"><a class=\"swiper-href-thumbnail\" href=\"' . wp_get_attachment_url($id) . '\">' . $gallery_item . '<\/a>' . $gallery_caption . '<\/figure><\/li>';\r\n  }\r\n\r\n  $output = '';\r\n  $output .= '<div class=\"swiper-modalOuter js-closeModal\"><\/div>';\r\n  \/\/swiper-container\r\n  $output .= '<div id=\"' . esc_attr($atts['id']) . '\" class=\"swiper-container swiper-view' . esc_attr($atts['view']) . '\">';\r\n  $output .= '<a class=\"swiper-modalClose js-closeModal\" aria-label=\"\u9589\u3058\u308b\">\u00d7<\/a>';\r\n  $output .= '<div class=\"swiper-wrapper\">';\r\n  $output .= $gallery_items;\r\n  $output .= '<\/div><!-- \/.swiper-wrapper -->';\r\n  \/\/Swiper Pagination, Navigation\r\n  $output .= '<div class=\"swiper-pagination\"><\/div>';\r\n  $output .= '<div class=\"swiper-button-prev\"><\/div><div class=\"swiper-button-next\"><\/div>';\r\n  $output .= '<\/div><!-- \/.swiper-container -->';\r\n  return $output;\r\n}\r\nadd_shortcode('swiper', 'shortcode_swiper');\r\n\r\n<\/code><\/pre>\r\n<p>&nbsp;<\/p>\r\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001WordPress\u306e\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u4f7f\u3063\u3066Masonry\u3068Swiper\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3057\u305f\u3002Masonry\u3068Swiper\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001\u7c21\u5358\u306b\u7f8e\u3057\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u3084\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u305c\u3072\u3001\u5b9f\u88c5\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>","protected":false},"excerpt":{"rendered":"WordPress\u306b\u306f\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3068\u547c\u3070\u308c\u308b\u77ed\u3044\u30b3\u30fc\u30c9\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u7c21\u5358\u306b\u7279\u5b9a\u306e\u6a5f\u80fd\u3092\u8ffd\u52a0\u3067\u304d\u308b\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001WordPress\u306e\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u4f7f\u3063\u3066\u3001Masonry\u3068Swiper\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u5b9f[...]","protected":false},"author":1,"featured_media":4047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[13],"tags":[],"group":[],"class_list":["post-4036","post","type-post","status-publish","format-standard","has-post-thumbnail","category-wordpress"],"acf":[],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/4036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=4036"}],"version-history":[{"count":2,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/4036\/revisions"}],"predecessor-version":[{"id":13372,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/4036\/revisions\/13372"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=4036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=4036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=4036"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=4036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}