{"id":2352,"date":"2023-12-29T23:51:39","date_gmt":"2023-12-29T14:51:39","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=2352"},"modified":"2024-02-24T00:02:15","modified_gmt":"2024-02-23T15:02:15","slug":"blog149","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/blog149\/","title":{"rendered":"(149) \u975e\u77e9\u5f62\u9818\u57df\u3092\u30db\u30d0\u30fc\u6642\u306b\u53cd\u5fdc\u3055\u305b\u305f\u3044\u3002"},"content":{"rendered":"<h1 class=\"my_h\">1. \u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n<p>\u753b\u9762\u4e0a\u306e\u975e\u77e9\u5f62\u306a\u9818\u57df\u3092\u30de\u30a6\u30b9\u30db\u30d0\u30fc\u3057\u305f\u6642\u306b\u3001\u4f55\u3089\u304b\u306e\u53cd\u5fdc\u3092\u3055\u305b\u305f\u3044\u3002<\/p>\n<h1 class=\"my_h\">2. \u3084\u3063\u3066\u307f\u308b<\/h1>\n<h2 class=\"my_h\">\u65b9\u6cd51 : \u30d9\u30af\u30bf\u753b\u50cf\u30c7\u30fc\u30bf\u3092\u4f7f\u3046<\/h2>\n<p>\u4e0b\u8a18\u30b3\u30fc\u30c9\u306e\u5b9f\u88c5\u4f8b\u306f\u3053\u3061\u3089\u3002<br \/>\n<a href=\"https:\/\/www.dogrow.net\/hp\/sample\/00149\/01\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.dogrow.net\/hp\/sample\/00149\/01\/<br \/>\n<img decoding=\"async\" src=\"https:\/\/www.dogrow.net\/hp\/wp-content\/uploads\/2023\/12\/Image1-1.jpg\" alt=\"\"  \/><\/a><\/p>\n<h3 class=\"my_h\">(1) index.html<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;title&gt;Blog No.148-1&lt;\/title&gt;\r\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; \/&gt;\r\n  &lt;script src=&quot;script.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div class=&quot;imgArea&quot;&gt;\r\n    &lt;img id=&quot;imgBg&quot; src=&quot;.\/bg_snow_jutaku.jpg&quot; alt=&quot;&quot; \/&gt;\r\n    &lt;object id=&quot;item1&quot; class=&quot;fimg&quot; type=&quot;image\/svg+xml&quot; data=&quot;.\/myimg_1.svg&quot; data-pup=&quot;pup1&quot;&gt;&lt;\/object&gt;\r\n    &lt;div id=&quot;pup1&quot; class=&quot;pup&quot;&gt;\u30d1\u30c3\u30af\u30de\u30f3\uff1f&lt;\/div&gt;\r\n    &lt;object id=&quot;item2&quot; class=&quot;fimg&quot; type=&quot;image\/svg+xml&quot; data=&quot;.\/myimg_2.svg&quot; data-pup=&quot;pup2&quot;&gt;&lt;\/object&gt;\r\n    &lt;div id=&quot;pup2&quot; class=&quot;pup&quot;&gt;\u30bb\u30ad\u30bb\u30a4\u30a4\u30f3\u30b3\u305f\u3061&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h3 class=\"my_h\">(2) script.js<\/h3>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\ndocument.addEventListener(&quot;DOMContentLoaded&quot;, function() {\r\n  var elem_fimgs = document.querySelectorAll('object.fimg');\r\n\r\n  elem_fimgs.forEach(function(elem) {\r\n\r\n    elem.addEventListener('load', function() {\r\n      const svgDoc  = this.contentDocument;\r\n      const svgElem = svgDoc.querySelector('polygon');\r\n      const pup_id  = elem.getAttribute('data-pup');\r\n      const pupElem = document.getElementById(pup_id);\r\n      if(svgElem &amp;&amp; pupElem){\r\n\r\n        svgElem.addEventListener('mouseover', function(ev) {\r\n          svgElem.style.cursor = 'pointer';\r\n          elem.classList.add('anim_blink');\r\n        });\r\n\r\n        svgElem.addEventListener('mouseout', function(ev) {\r\n          svgElem.style.cursor = '';\r\n          elem.classList.remove('anim_blink');\r\n          pupElem.style.display = 'none';\r\n        });\r\n\r\n        svgElem.addEventListener('click', function(ev) {\r\n          pupElem.style.display = 'inline-block';\r\n        });\r\n      }\r\n    });\r\n  });\r\n});\r\n<\/pre>\n<h3 class=\"my_h\">(3) SVG\u753b\u50cf<\/h3>\n<p>Adobe Illustrator\u3067\u7de8\u96c6\u3001\u51fa\u529b\u3057\u305f SVG\u753b\u50cf\u3092\u305d\u306e\u307e\u307e\u4f7f\u3063\u305f\u3002<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;\r\n&lt;svg id=&quot;_\u30ec\u30a4\u30e4\u30fc_2&quot; data-name=&quot;\u30ec\u30a4\u30e4\u30fc 2&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; xmlns:xlink=&quot;http:\/\/www.w3.org\/1999\/xlink&quot; viewBox=&quot;0 0 167.23 201.14&quot;&gt;\r\n  &lt;defs&gt;\r\n    &lt;style&gt;\r\n      .cls-1 {\r\n        fill: #3072b9;\r\n        stroke-width: 0px;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/defs&gt;\r\n  &lt;g id=&quot;_\u30ec\u30a4\u30e4\u30fc_1-2&quot; data-name=&quot;\u30ec\u30a4\u30e4\u30fc 1&quot;&gt;\r\n    &lt;image width=&quot;720&quot; height=&quot;866&quot; transform=&quot;scale(.23)&quot; xlink:href=&quot;myimg_1.png&quot;\/&gt;\r\n    &lt;polygon class=&quot;cls-1&quot; style=&quot;opacity:0&quot; points=&quot;48.7 0 0 63.24 0 149.4 67.57 201.14 167.23 147.48 76.48 106.41 158.27 42.97 48.7 0&quot;\/&gt;\r\n  &lt;\/g&gt;\r\n&lt;\/svg&gt;\r\n<\/pre>\n<h3 class=\"my_h\">(4) style.css<\/h3>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n*{\r\n  margin:  0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\ndiv.imgArea{\r\n  position: relative;\r\n  margin: 1rem;\r\n  border: 3px #000 solid;\r\n  line-height: 0;\r\n}\r\nimg#imgBg{\r\n  width: 100%;\r\n}\r\n.anim_blink {\r\n  animation: kf_blink 1s infinite;\r\n}\r\n@keyframes kf_blink {\r\n  0%  { opacity: 1;   }\r\n  50% { opacity: 0.1; }\r\n  100%{ opacity: 1;   }\r\n}\r\ndiv.pup{\r\n  position: absolute;\r\n  background-color: #fffff8;\r\n  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);\r\n  border-radius: 0.5rem;\r\n  padding: 1rem;\r\n  display: none;\r\n}\r\n#item1{\r\n  position: absolute;\r\n  top: 10%;\r\n  left: 20%;\r\n  width: 10%;\r\n}\r\n#pup1{\r\n  top:  12%;\r\n  left: 30%;\r\n}\r\n#item2{\r\n  position: absolute;\r\n  top: 70%;\r\n  left: 60%;\r\n  width: 15%;\r\n}\r\n#pup2{\r\n  top:   72%;\r\n  left:  75%;\r\n}\r\n<\/pre>\n<h2 class=\"my_h\">\u65b9\u6cd52 : \u30e9\u30b9\u30bf\u753b\u50cf\u30c7\u30fc\u30bf\u3092\u4f7f\u3046<\/h2>\n<p>\u80cc\u666f\u900f\u904e\u306e PNG\u753b\u50cf\u3092\u4f7f\u7528\u3059\u308b\u3002<br \/>\n\u30dd\u30a4\u30f3\u30c8\u3057\u305f\u5ea7\u6a19\u306e\u753b\u7d20\u5024\u3092\u53c2\u7167\u3057\u3001\u03b1\u30c1\u30e3\u30cd\u30eb\u306e\u5024\u304c0\u3067\u3042\u308c\u3070\u80cc\u666f\u3067\u3042\u308b\u3068\u5224\u65ad\u3059\u308b\u3002<br \/>\n\u30dd\u30a4\u30f3\u30c8\u3057\u305f\u5ea7\u6a19\u306e\u753b\u7d20\u5024\u3092\u53c2\u7167\u3057\u3001\u03b1\u30c1\u30e3\u30cd\u30eb\u306e\u5024\u304c\u975e0\u3067\u3042\u308c\u3070\u753b\u50cf\u4e0a\u3068\u5224\u65ad\u3059\u308b\u3002\u2192 \u53cd\u5fdc\u3055\u305b\u308b\u3002<\/p>\n<p>\u3000\u2193\u2193\u2193<br \/>\n\u5b9f\u969b\u306b\u5b9f\u88c5\u3057\u3066\u52d5\u304b\u3057\u3066\u307f\u305f\u304c&#8230;<br \/>\n\u30fb\u30b3\u30fc\u30c9\u91cf\u304c\u591a\u304f\u8907\u96d1\u306b\u306a\u308b\u3002<br \/>\n\u30fb\u753b\u7d20\u5024\u53c2\u7167\u306b\u3088\u308b\u51e6\u7406\u8ca0\u8377\u304c\u5927\u304d\u3044\u3002<\/p>\n<p>\u3088\u3063\u3066&#8230;<br \/>\n\u4eca\u56de\u306f\u4e0a\u8ff0\u306e\u300c\u30d9\u30af\u30bf\u753b\u50cf\u30c7\u30fc\u30bf\u3092\u4f7f\u3046\u300d\u3092\u63a1\u7528\u3059\u308b\u3053\u3068\u306b\u3057\u305f\u3002<\/p>\n<hr class=\"my_hr_bottom\">\n","protected":false},"excerpt":{"rendered":"<p>1. \u3084\u308a\u305f\u3044\u3053\u3068 \u753b\u9762\u4e0a\u306e\u975e\u77e9\u5f62\u306a\u9818\u57df\u3092\u30de\u30a6\u30b9\u30db\u30d0\u30fc\u3057\u305f\u6642\u306b\u3001\u4f55\u3089\u304b\u306e\u53cd\u5fdc\u3092\u3055\u305b\u305f\u3044\u3002 2. \u3084\u3063\u3066\u307f\u308b \u65b9\u6cd51 : \u30d9\u30af\u30bf\u753b\u50cf\u30c7\u30fc\u30bf\u3092\u4f7f\u3046 \u4e0b\u8a18\u30b3\u30fc\u30c9\u306e\u5b9f\u88c5\u4f8b\u306f\u3053\u3061\u3089\u3002 https:\/\/www.dogrow.net\/\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.dogrow.net\/hp\/blog149\/\">\u7d9a\u304d\u3092\u8aad\u3080 &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,4],"tags":[],"class_list":["post-2352","post","type-post","status-publish","format-standard","hentry","category-css","category-javascriptjquery"],"views":709,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/comments?post=2352"}],"version-history":[{"count":8,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2352\/revisions"}],"predecessor-version":[{"id":2363,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2352\/revisions\/2363"}],"wp:attachment":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/media?parent=2352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/categories?post=2352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/tags?post=2352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}