{"id":6766,"date":"2024-10-30T10:34:53","date_gmt":"2024-10-30T01:34:53","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?page_id=6766"},"modified":"2026-06-09T14:42:48","modified_gmt":"2026-06-09T05:42:48","slug":"imagemap-converter","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/tools\/imagemap-converter\/","title":{"rendered":"SVG\u304b\u3089ImageMap\uff08\u30a4\u30e1\u30fc\u30b8\u30de\u30c3\u30d7\uff09\u306b\u5909\u63db\u30c4\u30fc\u30eb"},"content":{"rendered":"<!-- \u0f3b\u273f\ud835\udc0f\ud835\udc00\ud835\udc06\ud835\udc04\u0f3a -->\r\n<!-- \u0f3b.mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09\u0f3a -->\r\n<hr class=\"spacer-mediano\" \/>\r\n\r\n\r\n\r\n\r\n<hr id=\"ch-TextConverter\" anchor \/>\r\n<div class=\"pg-saracnvtvkaa bg-hackingGate\">\r\n\r\n  <header class=\"page-header mx-auto\">\r\n    <!-- \u2756\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8 --><div><!-- breadcrumb.php -->\n<style>\n\/* \u2756breadcrumb.leckermaul\uff08\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\uff09\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a *\/\n.zaratan .breadcrumb.leckermaul {\n\twidth: 100%;\n\tmax-width: 92.5vw;\n\tmargin-inline: auto;\n}\n\n.zaratan .breadcrumb.leckermaul :is(ul, ol) {\n\tmin-height: 3rem;\n\tline-height: initial;\n\tfont-size: 0;\n\tletter-spacing: 0;\n\toverflow: hidden;\n}\n\n.zaratan .breadcrumb.leckermaul li {\n\tdisplay: inline;\n\tline-height: 1.6;\n\tfont-size: clamp(0.775rem, calc(0.775rem + ((1vw - 0.225rem) * 0.1563)), 0.8750rem);\n}\n\n.zaratan .breadcrumb.leckermaul li>*,\n.zaratan .breadcrumb.leckermaul li::before {\n\tposition: relative;\n\ttop: 0.125em;\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n.zaratan .breadcrumb.leckermaul a {\n\tdisplay: inline;\n\tcolor: var(--c-base-300, hsl(233, 6%, 74%));\n\tmargin-right: .5em;\n}\n\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2) a {\n\tmargin-left: .5em;\n}\n\n.zaratan .breadcrumb.leckermaul .current_page_item a {\n\tpointer-events: none;\n\tcolor: var(--c-base-300, hsl(233, 6%, 74%));\n}\n\n@media (any-hover:hover) {\n\t.zaratan .breadcrumb.leckermaul a:hover {\n\t\tcolor: var(--c-base-300, hsl(233, 6%, 74%));\n\t}\n}\n\n\/* .separator *\/\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2)::before,\n.zaratan .breadcrumb.leckermaul.chevron-right li:nth-of-type(n+2)::before {\n\tcontent: \">\";\n\tcolor: var(--c-base-300, hsl(233, 6%, 74%))\n}\n\n.zaratan .breadcrumb.leckermaul.slash li:nth-of-type(n+2)::before {\n\tcontent: \"\/\";\n}\n\n.zaratan .breadcrumb.leckermaul.trigon-bullet li:nth-of-type(n+2)::before {\n\tcontent: \"\u2023\";\n}\n<\/style>\n\n\n<nav class=\"breadcrumb leckermaul py-0.5r mx-auto py-0.5r\">\n  <ul class=\"breadcrumb-wrapper\">\n    <!-- \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u8868\u793a -->\n    <li><a href=\"https:\/\/code-plus.jp\/gp\/\"><i><\/i>\u30c8\u30c3\u30d7<\/a><\/li>\n\n          <!-- \u56fa\u5b9a\u30da\u30fc\u30b8\uff08\u305d\u308c\u4ee5\u5916\uff09\uff1a \u5148\u7956\u30da\u30fc\u30b8\u540d\u3068\u3001\u73fe\u5728\u306e\u30da\u30fc\u30b8\u540d\u3092\u8868\u793a -->\n      <li><a href=\"https:\/\/code-plus.jp\/gp\/tools\/\">TOOLS\uff08\u30c4\u30fc\u30eb\u4e00\u89a7\uff09<\/a><\/li><li class=\"current_page_item\"><a>HTML\/CSS<\/a><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\r\n  <\/header><!-- \/\/\/.inheader -->\r\n\r\n\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <section class=\"sect-cnvtVkaA-Intro contv-auto\" style=\"contain-intrinsic-size:1000px;\">\r\n    <header class=\"section__inheader innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper d-iblock mb-0.5r\">\r\n        <h1 class=\"fz-xxl hdg-page mb-0.25pc\"><span>SVG\u304b\u3089ImageMap\uff08\u30a4\u30e1\u30fc\u30b8\u30de\u30c3\u30d7\uff09\u306b\u5909\u63db\u30c4\u30fc\u30eb<\/span><\/h1>\r\n        <p class=\"page-foreword fz-ss\">illustrator\u3067\u4f5c\u6210\u3057\u305fImageMap\u7528\u306eSVG\u30d5\u30a1\u30a4\u30eb\u3092 \u2192 HTML\u30b3\u30fc\u30c9\u306b\u5909\u63db\u3057\u307e\u3059\u3002<\/p>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <a class=\"fl-right badge is-outlined is-gray fz-xs bdrs-0.25r\" href=\"#ch-Explanation\">\r\n        <i class=\"icon mas ma-help\"><\/i>&nbsp;<span>\u4f7f\u3044\u65b9<\/span>\r\n      <\/a>\r\n    <\/header><!-- \/\/\/.inheader -->\r\n  <\/section>\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <hr id=\"ch-Converter\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Converter contv-auto\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior innerA fxd-row mx-auto\">\r\n      <figure class=\"section__leftlane\">\r\n        <div class=\"hgroup-wrapper\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bcSVG\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7\u3057\u3066\u304f\u3060\u3055\u3044<\/span><\/h3>\r\n        <\/div><!-- \/\/\/.hgroup -->\r\n\r\n        <div class=\"chest-wrapper relatived\">\r\n          <div id=\"endropArea\" class=\"endrop-area\" style=\"height:17.5pc;\">\r\n            <div class=\"endrop-inner\">\r\n              <i class=\"endrop-icon\"><\/i>\r\n              <p class=\"endrop-text\">SVG\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7<\/p>\r\n              <small class=\"endrop-smock\">\u307e\u305f\u306f \u30af\u30ea\u30c3\u30af\u3057\u3066\u9078\u629e<\/small>\r\n            <\/div>\r\n            <input type=\"file\" id=\"fileInput\" class=\"file-input\" accept=\".svg,image\/svg+xml\">\r\n          <\/div>\r\n          <ins id=\"decodedMessage\"><\/ins>\r\n        <\/div><!-- \/\/\/.chest -->\r\n      <\/figure><!-- \/\/\/.leftlane -->\r\n\r\n      <figure class=\"section__centerlane\">\r\n        <aside class=\"sticky-sidebar fxd-column pc-center\" style=\"height:22rem;\">\r\n        <\/aside>\r\n      <\/figure><!-- \/\/\/.centerlane -->\r\n\r\n\r\n      <figure class=\"section__rightlane\">\r\n        <div class=\"chest-wrapper pos-relative ov-hidden\">\r\n          <h3 class=\"fz-lg titolo-section mb-0.5pc\"><span>\u25bc\u5909\u63db\u5f8c\u306e\u30b3\u30fc\u30c9<\/span><\/h3>\r\n          <textarea class=\"textarea\" id=\"decodeArea\" style=\"height:17.5pc;\" placeholder=\"\u3053\u3053\u306b\u5909\u63db\u5f8c\u306e\u30b3\u30fc\u30c9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\"><\/textarea>\r\n          <ins id=\"encodedMessage\"><\/ins>\r\n        <\/div><!-- \/\/\/.chest -->\r\n      <\/figure><!-- \/\/\/.rightlane -->\r\n    <\/div><!-- \/\/\/.interior.fxd-row -->\r\n  <\/section>\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <hr id=\"ch-Explanation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Explanation pt-3r contv-auto\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"box is-broad is-solided c-base-900\">\r\n        <h4 class=\"hdg-explanation fz-md mb-0.25pc\">\u4f7f\u3044\u65b9<\/h4>\r\n        <p class=\"fz-ss mb-1r\">\r\n          Illustrator\u3067\u4f5c\u6210\u3057\u305fImageMap\u7528\u306eSVG\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001HTML\u30b3\u30fc\u30c9\uff08&lt;map&gt; \/ &lt;area&gt;\uff09\u3068CSS\u304c\u81ea\u52d5\u751f\u6210\u3055\u308c\u307e\u3059\u3002\u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306f\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u81ea\u52d5\u30b3\u30d4\u30fc\u3055\u308c\u307e\u3059\u3002\r\n        <\/p>\r\n\r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83d\udca1 Illustrator\u3067\u306e\u6e96\u5099<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b>\u4e0b\u7d75\u30ec\u30a4\u30e4\u30fc\uff1a<\/b> \u30d9\u30fc\u30b9\u753b\u50cf\u306e\u30ec\u30a4\u30e4\u30fc\u540d\u3092\u300cimgmap-basis\u300d\u306b\u8a2d\u5b9a<\/li>\r\n          <li><b>\u30af\u30ea\u30c3\u30af\u9818\u57df\uff1a<\/b> \u5404\u9818\u57df\u306e\u30ec\u30a4\u30e4\u30fc\u540d\u3092\u300cimgmap-area1\u300d\u300cimgmap-area2\u300d\u2026\u3068\u9023\u756a\u3067\u547d\u540d<\/li>\r\n          <li><b>\u5f62\u72b6\uff1a<\/b> \u30dd\u30ea\u30b4\u30f3\uff08\u591a\u89d2\u5f62\uff09\u3067\u4f5c\u6210\u3092\u63a8\u5968\u3002\u77e9\u5f62\u30c4\u30fc\u30eb\u306e\u5834\u5408\u306f\u30da\u30f3\u30c4\u30fc\u30eb\u30674\u70b9\u4ee5\u4e0a\u306e\u9589\u3058\u305f\u30d1\u30b9\u3068\u3057\u3066\u63cf\u753b<\/li>\r\n          <li><b>SVG\u66f8\u304d\u51fa\u3057\u8a2d\u5b9a\uff1a<\/b> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8ID\u2192\u30ec\u30a4\u30e4\u30fc\u540d\u3001\u30b9\u30bf\u30a4\u30eb\u2192\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u5c5e\u6027\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306e\u30c1\u30a7\u30c3\u30af\u2192\u5916\u3059<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83c\udfaf \u751f\u6210\u3055\u308c\u308b\u30b3\u30fc\u30c9<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b>CSS\uff1a<\/b> \u30db\u30d0\u30fc\u30a8\u30d5\u30a7\u30af\u30c8\u4ed8\u304d\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u81ea\u52d5\u751f\u6210\uff08&lt;script&gt;\u30bf\u30b0\u3067head\u5185\u306b\u633f\u5165\uff09<\/li>\r\n          <li><b>HTML\uff1a<\/b> &lt;map&gt; \/ &lt;area&gt;\u30bf\u30b0\u306b\u3088\u308b\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30de\u30c3\u30d7\u69cb\u9020<\/li>\r\n          <li><b>\u753b\u50cf\u30d1\u30b9\uff1a<\/b> images\/{\u30ec\u30a4\u30e4\u30fc\u540d}.png\u3001images\/imgmap-area1.svg \u301c \u306e\u5f62\u5f0f\u3067\u51fa\u529b\uff08\u30ec\u30a4\u30e4\u30fc\u540d\u304c\u305d\u306e\u307e\u307e\u30d5\u30a1\u30a4\u30eb\u540d\u306b\uff09<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\u26a0\ufe0f \u3046\u307e\u304f\u3044\u304b\u306a\u3044\u5834\u5408<\/h5>\r\n        <ul class=\"fz-ss\">\r\n          <li><b>\u30a8\u30ea\u30a2\u304c\u51fa\u529b\u3055\u308c\u306a\u3044\uff1a<\/b> \u30ec\u30a4\u30e4\u30fc\u540d\u304c\u300cimgmap-area\u300d\u3067\u59cb\u307e\u3063\u3066\u3044\u308b\u304b\u78ba\u8a8d<\/li>\r\n          <li><b>\u5ea7\u6a19\u304c\u304a\u304b\u3057\u3044\uff1a<\/b> \u3059\u3079\u3066\u306e\u5f62\u72b6\u3092\u30dd\u30ea\u30b4\u30f3\uff08\u9589\u3058\u305f\u30d1\u30b9\uff09\u3068\u3057\u3066\u4f5c\u6210\u3057\u76f4\u3059<\/li>\r\n          <li><b>\u5ea7\u6a19\u3068\u30db\u30d0\u30fc\u4f4d\u7f6e\u304c\u305a\u308c\u308b\uff1a<\/b> \u30a2\u30fc\u30c8\u30dc\u30fc\u30c9\u3092800px\u524d\u5f8c\u306e\u4e2d\u7a0b\u5ea6\u306e\u30b5\u30a4\u30ba\u306b\u8a2d\u5b9a\u3057\u76f4\u3059<\/li>\r\n        <\/ul>\r\n      <\/div><!-- \/\/\/.box -->\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc03\ud835\udc04\ud835\udc0f\ud835\udc00\ud835\udc11\ud835\udc13\ud835\udc0c\ud835\udc04\ud835\udc0d\ud835\udc13\u0f3a -->\r\n  <hr id=\"ch-Relation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Relation pt-3r contv-auto\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper hgroupA mb-0.5pc\">\r\n        <h5 class=\"hdg-relation fz-rg\"><span>\u95a2\u9023\u8a18\u4e8b\u30fb\u95a2\u9023\u30c4\u30fc\u30eb<\/span><\/h5>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <ul class=\"shelf-wrapper_pc shelfA\" data-cols_pc=\"2\">\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/imagemap-6831\/\" class=\"linkbox\">\r\n            <picture class=\"linkbox-thumbnail\">\r\n              <img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/Illustra_2410301645.jpg?ver=20260609144248\" alt=\"Illustrator\u3067ImageMap\uff08\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30de\u30c3\u30d7\uff09\u306e\u30af\u30ea\u30c3\u30af\u9818\u57df\u3092\u4f5c\u6210\u3059\u308b\" loading=\"lazy\" \/>\r\n            <\/picture>\r\n            <h4 class=\"linkbox-title fz-md\">Illustrator\u3067ImageMap\uff08\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30de\u30c3\u30d7\uff09\u306e\u30af\u30ea\u30c3\u30af\u9818\u57df\u3092\u4f5c\u6210\u3059\u308b<\/h4>\r\n            <span class=\"linkbox-excerpt\">\u4eca\u56de\u306fIllustrator\u3092\u4f7f\u3063\u3066\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30de\u30c3\u30d7\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\r\n              &emsp;<u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/updatetags-converter\/\" class=\"linkbox\">\r\n            <picture class=\"linkbox-thumbnail\">\r\n              <img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/70f9700c6f6883a60f60277286884e28.png?ver=20260609144248\" alt=\"HTML\u30bf\u30b0\u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb\" loading=\"lazy\" \/>\r\n            <\/picture>\r\n            <h4 class=\"linkbox-title\">HTML\u30bf\u30b0\u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb<\/h4>\r\n            <span class=\"linkbox-excerpt\">\r\n              \u6307\u5b9a\u306eHTML\u30bf\u30b0\u3092\u4efb\u610f\u306e\u30bf\u30b0\u306b\u4e00\u62ec\u5909\u63db\u3002div\u2192section\u3001span\u2192em\u306a\u3069\u3002\r\n              <u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n      <\/ul><!-- \/\/\/.shelf -->\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc03\ud835\udc04\ud835\udc0f\ud835\udc00\ud835\udc11\ud835\udc13\ud835\udc0c\ud835\udc04\ud835\udc0d\ud835\udc13\u0f3a -->\r\n\r\n  <section class=\"sect-cnvtVkaA-Relation2 pt-3r contv-auto\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper hgroupA mb-0.5pc\">\r\n\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n\r\n\r\n  <!-- \u0f3b.mediano\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0b\uff09\u0f3a -->\r\n  <hr class=\"spacer-mezzala\" \/>\r\n\r\n<\/div><!-- \/\/\/\u25b2.page  -->\r\n\r\n\r\n\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function () {\r\n    const endropArea = document.getElementById('endropArea');\r\n    const fileInput = document.getElementById('fileInput');\r\n    const decodeArea = document.getElementById('decodeArea');\r\n    const encodedMessage = document.getElementById('encodedMessage');\r\n\r\n    if (!endropArea || !decodeArea) {\r\n      console.error('\u5fc5\u8981\u306a\u8981\u7d20\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093');\r\n      return;\r\n    }\r\n\r\n    \/\/ fileInput\u3092\u975e\u8868\u793a\u306b\u3057\u3066\u30af\u30ea\u30c3\u30af\u3067\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\r\n    fileInput.style.display = 'none';\r\n    endropArea.style.cursor = 'pointer';\r\n\r\n    \/\/ \u30af\u30ea\u30c3\u30af\u3067\u30d5\u30a1\u30a4\u30eb\u9078\u629e\r\n    endropArea.addEventListener('click', function () {\r\n      fileInput.click();\r\n    });\r\n\r\n    \/\/ \u30d5\u30a1\u30a4\u30eb\u9078\u629e\u6642\r\n    fileInput.addEventListener('change', function (e) {\r\n      const file = e.target.files[0];\r\n      if (file) handleSVGFile(file);\r\n      fileInput.value = '';\r\n    });\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ \u30c9\u30e9\u30c3\u30b0&\u30c9\u30ed\u30c3\u30d7\r\n    \/\/ ====================================\r\n\r\n    endropArea.addEventListener('dragover', function (e) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      this.style.backgroundColor = '#f0f0f0';\r\n      this.style.borderColor = '#999';\r\n    });\r\n\r\n    endropArea.addEventListener('dragleave', function (e) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      this.style.backgroundColor = '';\r\n      this.style.borderColor = '';\r\n    });\r\n\r\n    endropArea.addEventListener('dragenter', function (e) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n    });\r\n\r\n    endropArea.addEventListener('drop', async function (e) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      this.style.backgroundColor = '';\r\n      this.style.borderColor = '';\r\n\r\n      const file = e.dataTransfer.files[0];\r\n      if (!file) return;\r\n\r\n      if (!isSVGFile(file)) {\r\n        alert('SVG\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30ed\u30c3\u30d7\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\r\n        return;\r\n      }\r\n\r\n      handleSVGFile(file);\r\n    });\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ SVG\u30d5\u30a1\u30a4\u30eb\u51e6\u7406\uff08\u30c9\u30ed\u30c3\u30d7\/\u9078\u629e \u2192 \u5909\u63db \u2192 \u30b3\u30d4\u30fc\uff09\r\n    \/\/ ====================================\r\n\r\n    async function handleSVGFile(file) {\r\n      const dropInner = endropArea.querySelector('.endrop-inner');\r\n      const originalContent = dropInner.innerHTML;\r\n      dropInner.innerHTML = '<p style=\"padding: 20px;\">SVG\u3092\u5909\u63db\u4e2d...<\/p>';\r\n\r\n      try {\r\n        const svgContent = await file.text();\r\n\r\n        if (!isValidSVGContent(svgContent)) {\r\n          alert('\u6709\u52b9\u306aSVG\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002');\r\n          dropInner.innerHTML = originalContent;\r\n          return;\r\n        }\r\n\r\n        const result = convertSVGToImageMap(svgContent);\r\n        if (!result) {\r\n          dropInner.innerHTML = originalContent;\r\n          return;\r\n        }\r\n\r\n        \/\/ \u5909\u63db\u7d50\u679c\u3092\u51fa\u529b\r\n        decodeArea.value = result;\r\n\r\n        \/\/ \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\r\n        copyToClipboard(result);\r\n\r\n        \/\/ \u30a8\u30ea\u30a2\u6570\u3092\u30ab\u30a6\u30f3\u30c8\r\n        const areaCount = (result.match(\/imgmap-area\/g) || []).length \/ 2; \/\/ class + img \u30672\u56de\u305a\u3064\r\n\r\n        dropInner.innerHTML = `\r\n        <div style=\"padding: 20px;\">\r\n          <p style=\"color: #4CAF50; font-weight: bold;\">ImageMap\u30b3\u30fc\u30c9\u3092\u751f\u6210\u3057\u307e\u3057\u305f\uff01<\/p>\r\n          <small style=\"color: #666;\">${areaCount}\u500b\u306e\u30a8\u30ea\u30a2\u3092\u5909\u63db<\/small>\r\n        <\/div>\r\n      `;\r\n\r\n        setTimeout(function () {\r\n          dropInner.innerHTML = originalContent;\r\n        }, 3000);\r\n\r\n      } catch (error) {\r\n        alert('\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002');\r\n        console.error('Error:', error);\r\n        dropInner.innerHTML = originalContent;\r\n      }\r\n    }\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ SVG\u691c\u8a3c\u30fb\u5909\u63db\u95a2\u6570\r\n    \/\/ ====================================\r\n\r\n    \/\/\u30d5\u30a1\u30a4\u30eb\u304cSVG\u304b\u3069\u3046\u304b\u3092\u30c1\u30a7\u30c3\u30af\r\n    function isSVGFile(file) {\r\n      return file.type === 'image\/svg+xml' || file.name.toLowerCase().endsWith('.svg');\r\n    }\r\n\r\n    \/\/SVG\u306e\u5185\u5bb9\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\r\n    function isValidSVGContent(content) {\r\n      try {\r\n        const parser = new DOMParser();\r\n        const doc = parser.parseFromString(content, 'image\/svg+xml');\r\n        const parserError = doc.getElementsByTagName('parsererror');\r\n        return parserError.length === 0 && doc.documentElement.nodeName === 'svg';\r\n      } catch (e) {\r\n        return false;\r\n      }\r\n    }\r\n\r\n    \/\/SVG\u306e\u30d1\u30b9\u3092ImageMap\u306e\u30dd\u30ea\u30b4\u30f3\u5ea7\u6a19\u306b\u5909\u63db\r\n    function parsePathToCoords(path) {\r\n      const points = path.getAttribute('points');\r\n      if (!points) return '';\r\n\r\n      const coordinates = points.trim()\r\n        .split(' ')\r\n        .map(point => {\r\n          const [x, y] = point.split(',');\r\n          return `${Math.round(x)}`;\r\n        })\r\n        .join(',');\r\n\r\n      return coordinates;\r\n    }\r\n\r\n    \/\/SVG\u3092ImageMap\u306b\u5909\u63db\r\n    function convertSVGToImageMap(svgContent) {\r\n      const parser = new DOMParser();\r\n      const svgDoc = parser.parseFromString(svgContent, 'image\/svg+xml');\r\n\r\n      \/\/imgmap-area\u3092\u542b\u3080SVG\u304b\u30c1\u30a7\u30c3\u30af\r\n      const areas = svgDoc.querySelectorAll('[id^=\"imgmap-area\"]');\r\n      if (areas.length === 0) {\r\n        alert('ImageMap\u7528\u306e\u30a8\u30ea\u30a2\u5b9a\u7fa9\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002\\n\u30a4\u30e9\u30b9\u30c8\u30ec\u30fc\u30bf\u30fc\u3067\u4f5c\u6210\u3057\u305fImageMap\u7528\u306eSVG\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30ed\u30c3\u30d7\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\r\n        return '';\r\n      }\r\n\r\n      \/\/ imgmap-basis \u30ec\u30a4\u30e4\u30fc\u306eID\u3092\u53d6\u5f97\uff08\u898b\u3064\u304b\u3089\u306a\u3044\u5834\u5408\u306f 'imgmap-basis' \u3092\u4f7f\u7528\uff09\r\n      const basisEl = svgDoc.querySelector('[id^=\"imgmap-basis\"]');\r\n      const basisId = basisEl ? basisEl.id : 'imgmap-basis';\r\n\r\n      \/\/\u57fa\u672c\u69cb\u9020\u306e\u4f5c\u6210\r\n      let text = '<style>\\n';\r\n      text += '\/* ImageMap\uff1aCSS\\n';\r\n      text += '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a *\/\\n';\r\n      text += '[name*=\"ImageMap\"] { position:relative; display:block; width:100%; }\\n';\r\n      text += '[name*=\"ImageMap\"] .imgmap-basis { width:100%; }\\n';\r\n      text += '[name*=\"ImageMap\"] [class*=\"imgmap-area\"] { position:absolute; inset:0; margin:auto; width:100%; pointer-events:none; }\\n';\r\n      text += '[name*=\"ImageMap\"] [class*=\"imgmap-area\"] { transition: all 0.7s ease; opacity:1; \\nfilter:hue-rotate(0deg) saturate(100%) saturate(100%) contrast(100%) contrast(100%); scale:100%; }\\n';\r\n      text += '[name*=\"ImageMap\"] [class*=\"imgmap-area\"]:hover { filter:hue-rotate(180deg) saturate(200%) saturate(200%) contrast(200%) contrast(200%); scale:101%; }\\n';\r\n      text += '<\\\/style>\\n\\n';\r\n\r\n      text += '<!-- #ImageMap -->\\n';\r\n      text += '<map name=\"ImageMap\" class=\"imgmap-container mx-auto\" style=\"width:min(100%,92.5vw);\">\\n';\r\n      text += '  <dl class=\"imgmap-wrapper\">\\n';\r\n      text += '    <dt class=\"imgmap-basis\">\\n';\r\n      text += `      <img decoding=\"async\" src=\"<?php echo get_theme_file_uri(); ?>\/parts\/imageMap\/images\/${basisId}.png\" usemap=\"#ImageMap\" alt=\"\" \/>\\n`;\r\n      text += '    <\/dt>\\n';\r\n\r\n      \/\/\u5404\u30a8\u30ea\u30a2\u306e\u51e6\u7406\r\n      areas.forEach(area => {\r\n        const areaNum = area.id.replace('imgmap-area', '');\r\n        const polygon = area.querySelector('polygon, polyline');\r\n\r\n        if (polygon) {\r\n          const coords = parsePathToCoords(polygon);\r\n          text += `  <dd class=\"imgmap-area${areaNum}\">\\n`;\r\n          text += `    <area shape=\"poly\" coords=\"${coords}\" href=\"#\" alt=\"\" \/>\\n`;\r\n          text += `    <img decoding=\"async\" src=\"<?php echo get_theme_file_uri(); ?>\/parts\/imageMap\/images\/imgmap-area${areaNum}.svg\" alt=\"\" \/>\\n`;\r\n          text += '  <\/dd>\\n';\r\n        }\r\n      });\r\n\r\n      text += '<\/dl><\/map>';\r\n\r\n      return text;\r\n    }\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u30fb\u30e1\u30c3\u30bb\u30fc\u30b8\r\n    \/\/ ====================================\r\n\r\n    function copyToClipboard(text) {\r\n      if (!text) return;\r\n\r\n      if (navigator.clipboard && navigator.clipboard.writeText) {\r\n        navigator.clipboard.writeText(text).then(function () {\r\n          showMessage('ImageMap\u30b3\u30fc\u30c9\u304c\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3055\u308c\u307e\u3057\u305f\uff01', true);\r\n        }).catch(function () {\r\n          fallbackCopyToClipboard(text);\r\n        });\r\n      } else {\r\n        fallbackCopyToClipboard(text);\r\n      }\r\n    }\r\n\r\n    function fallbackCopyToClipboard(text) {\r\n      const textarea = document.createElement('textarea');\r\n      textarea.value = text;\r\n      textarea.style.position = 'fixed';\r\n      textarea.style.left = '-999999px';\r\n      document.body.appendChild(textarea);\r\n      textarea.select();\r\n\r\n      try {\r\n        document.execCommand('copy');\r\n        showMessage('ImageMap\u30b3\u30fc\u30c9\u304c\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3055\u308c\u307e\u3057\u305f\uff01', true);\r\n      } catch (err) {\r\n        showMessage('\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u3078\u306e\u30b3\u30d4\u30fc\u306b\u5931\u6557\u3057\u307e\u3057\u305f: ' + err, false);\r\n      }\r\n\r\n      document.body.removeChild(textarea);\r\n    }\r\n\r\n    function showMessage(msg, isSuccess) {\r\n      if (!encodedMessage) return;\r\n\r\n      const cls = isSuccess ? 'is-primary' : 'is-error';\r\n      const icon = isSuccess ? 'ma-check_circle' : 'ma-error';\r\n      const color = isSuccess ? 'primary' : 'error';\r\n\r\n      encodedMessage.innerHTML = `\r\n      <p class=\"alert is-ghosted ${cls} mt-0.5r\">\r\n        <i class=\"icon mas ${icon} c-${color} mr-0.5r\"><\/i>\r\n        <span>${msg}<\/span>\r\n      <\/p>\r\n    `;\r\n\r\n      setTimeout(function () {\r\n        encodedMessage.innerHTML = '';\r\n      }, 3000);\r\n    }\r\n\r\n    \/\/ decodeArea\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u5168\u9078\u629e\r\n    decodeArea.addEventListener('click', function () {\r\n      if (this.value) {\r\n        this.select();\r\n      }\r\n    });\r\n  });\r\n<\/script>","protected":false},"excerpt":{"rendered":"Illustrator\u3067\u4f5c\u6210\u3057\u305fImageMap\u7528\u306eSVG\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&#038;\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001HTML\u30b3\u30fc\u30c9\uff08<map> \/ <area>\uff09\u3068CSS\u304c\u81ea\u52d5\u751f\u6210\u3055\u308c\u307e\u3059\u3002\u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306f\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u81ea\u52d5\u30b3\u30d4\u30fc\u3055\u308c\u307e\u3059\u3002","protected":false},"author":1,"featured_media":6821,"parent":173,"menu_order":28,"comment_status":"closed","ping_status":"closed","template":"templates\/page-converter.php","meta":{"_acf_changed":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","_exclude_from_list_pages":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[11,21],"tags":[],"group":[],"pg":[],"class_list":["post-6766","page","type-page","status-publish","has-post-thumbnail","category-html-css","category-tool"],"acf":[],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/6766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/page"}],"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=6766"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/6766\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/6821"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=6766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=6766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=6766"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=6766"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=6766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}