{"id":1429,"date":"2025-05-13T09:48:07","date_gmt":"2025-05-13T00:48:07","guid":{"rendered":"https:\/\/tomato-made.com\/study\/?p=1429"},"modified":"2025-10-12T13:33:57","modified_gmt":"2025-10-12T04:33:57","slug":"t16","status":"publish","type":"post","link":"https:\/\/tomato-made.com\/study\/market-z\/t16","title":{"rendered":"\u540d\u5165\u308c\u753b\u50cf\u30c4\u30fc\u30eb\uff5c\u3007\u3007\u69d8\u5c02\u7528\u3092\u81ea\u52d5\u3067\u4f5c\u6210"},"content":{"rendered":"\n<p>\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u4fbf\u5229\u30c4\u30fc\u30eb\ud83e\udd70<\/p>\n\n\n\n<p>\u304a\u5ba2\u3055\u3093\u304b\u3089\u30aa\u30fc\u30c0\u30fc\u53d7\u3051\u305f\u3068\u304d\u306b<strong><span class=\"keiko_yellow_full\">\u3010\u300c\u3007\u3007\u69d8\u5c02\u7528\u300d\u306e\u753b\u50cf\u3011<\/span><\/strong>\u3092\u7c21\u5358\u306b\u4f5c\u308c\u308b\u3088\uff01<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"sango-name-tool\" style=\"max-width:100%; margin: 0 auto; padding: 10px; box-sizing: border-box; background: #f0f0f0;\">\n  <style>\n    .sango-name-tool * {\n      box-sizing: border-box;\n    }\n\n    .sango-name-tool label {\n      font-weight: bold;\n      color: #d94c72;\n      display: block;\n      margin-top: 10px;\n      font-size: 14px;\n    }\n\n    .sango-name-tool input,\n    .sango-name-tool select {\n      width: 100%;\n      padding: 10px;\n      margin-bottom: 12px;\n      font-size: 16px;\n      border: 2px solid #d94c72;\n      border-radius: 6px;\n    }\n\n    .sango-name-tool canvas {\n      display: block;\n      width: 100%;\n      height: auto;\n      border: 2px solid #ccc;\n      margin: 20px auto;\n      max-width: 100%;\n    }\n\n    .sango-name-tool .download-link {\n      display: block;\n      text-align: center;\n      margin-top: 10px;\n      color: #d94c72;\n      font-weight: bold;\n      text-decoration: underline;\n    }\n  <\/style>\n\n  <label for=\"signatureText\">\u540d\u524d\uff08\u4f8b\uff1a\u3068\u307e\u3081\u90e8\uff09<\/label>\n  <input type=\"text\" id=\"signatureText\" placeholder=\"\u4f8b\uff1a\u3068\u307e\u3081\u90e8\">\n\n  <label for=\"fontSelect\">\u30d5\u30a9\u30f3\u30c8<\/label>\n  <select id=\"fontSelect\">\n    <option value=\"sans-serif\">\u30c7\u30d5\u30a9\u30eb\u30c8<\/option>\n    <option value=\"'Noto Sans JP', sans-serif\">Noto Sans JP<\/option>\n    <option value=\"Josefin Slab\">Josefin Slab<\/option>\n    <option value=\"Playfair Display\">Playfair Display<\/option>\n    <option value=\"Questrial\">Questrial<\/option>\n    <option value=\"Smooch\">Smooch<\/option>\n  <\/select>\n\n  <label for=\"fontSizeSelect\">\u6587\u5b57\u30b5\u30a4\u30ba<\/label>\n  <select id=\"fontSizeSelect\">\n    <option value=\"0.06\">\u5c0f<\/option>\n    <option value=\"0.08\" selected>\u4e2d<\/option>\n    <option value=\"0.12\">\u5927<\/option>\n  <\/select>\n\n  <label for=\"positionSelect\">\u7f72\u540d\u306e\u4f4d\u7f6e<\/label>\n  <select id=\"positionSelect\">\n    <option value=\"top\">\u4e0a<\/option>\n    <option value=\"middle\">\u4e2d<\/option>\n    <option value=\"bottom\">\u4e0b<\/option>\n  <\/select>\n\n  <label for=\"fontColor\">\u6587\u5b57\u8272<\/label>\n  <input type=\"color\" id=\"fontColor\" value=\"#d94c72\">\n\n  <label for=\"radiusRange\">\u89d2\u4e38\uff080\uff5e100px\uff09<\/label>\n  <input type=\"range\" id=\"radiusRange\" min=\"0\" max=\"100\" value=\"0\">\n\n  <label for=\"imageInput\">\u753b\u50cf\u3092\u9078\u3076\uff081\u679a\uff09<\/label>\n  <input type=\"file\" id=\"imageInput\" accept=\"image\/*\">\n\n  <canvas id=\"canvas\"><\/canvas>\n  <a id=\"downloadLink\" class=\"download-link\" href=\"#\" download=\"signed-image.jpg\" style=\"display:none;\">\u753b\u50cf\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a>\n\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Josefin+Slab&amp;family=Playfair+Display&amp;family=Questrial&amp;family=Smooch&amp;family=Noto+Sans+JP&amp;display=swap\" rel=\"stylesheet\">\n\n  <script>\n    const imageInput = document.getElementById('imageInput');\n    const signatureText = document.getElementById('signatureText');\n    const fontSelect = document.getElementById('fontSelect');\n    const fontSizeSelect = document.getElementById('fontSizeSelect');\n    const fontColor = document.getElementById('fontColor');\n    const positionSelect = document.getElementById('positionSelect');\n    const radiusRange = document.getElementById('radiusRange');\n    const canvas = document.getElementById('canvas');\n    const ctx = canvas.getContext('2d');\n    const downloadLink = document.getElementById('downloadLink');\n\n    function drawRoundedImage(ctx, img, x, y, w, h, r) {\n      ctx.save();\n      ctx.beginPath();\n      ctx.moveTo(x + r, y);\n      ctx.arcTo(x + w, y, x + w, y + h, r);\n      ctx.arcTo(x + w, y + h, x, y + h, r);\n      ctx.arcTo(x, y + h, x, y, r);\n      ctx.arcTo(x, y, x + w, y, r);\n      ctx.closePath();\n      ctx.clip();\n      ctx.drawImage(img, x, y, w, h);\n      ctx.restore();\n    }\n\n    imageInput.addEventListener('change', () => {\n      const file = imageInput.files[0];\n      if (!file) return;\n\n      const reader = new FileReader();\n      reader.onload = e => {\n        const img = new Image();\n        img.onload = () => {\n          const canvasRatio = img.width \/ img.height;\n          const maxDisplayWidth = Math.min(window.innerWidth, 600); \/\/ \u6700\u5927\u8868\u793a\u5e45\u3092600px\u7a0b\u5ea6\u306b\u5236\u9650\n          const displayHeight = maxDisplayWidth \/ canvasRatio;\n\n          canvas.width = img.width;\n          canvas.height = img.height;\n\n          canvas.style.width = maxDisplayWidth + 'px';\n          canvas.style.height = displayHeight + 'px';\n\n          ctx.clearRect(0, 0, canvas.width, canvas.height);\n          const radius = parseInt(radiusRange.value, 10);\n          drawRoundedImage(ctx, img, 0, 0, img.width, img.height, radius);\n\n          const name = signatureText.value.trim();\n          if (!name) return;\n\n          const fontRatio = parseFloat(fontSizeSelect.value);\n          let fontSize = Math.floor(canvas.height * fontRatio);\n          const fontFamily = fontSelect.value;\n          ctx.textAlign = 'center';\n          ctx.textBaseline = 'middle';\n\n          let y;\n          switch (positionSelect.value) {\n            case 'top': y = canvas.height * 0.2; break;\n            case 'middle': y = canvas.height * 0.5; break;\n            case 'bottom': y = canvas.height * 0.8; break;\n          }\n\n          const fullText = `${name}\u69d8\u5c02\u7528`;\n          ctx.font = `900 ${fontSize}px ${fontFamily}`;\n          while (ctx.measureText(fullText).width > canvas.width * 0.9 && fontSize > 10) {\n            fontSize -= 2;\n            ctx.font = `900 ${fontSize}px ${fontFamily}`;\n          }\n\n          ctx.lineWidth = Math.floor(fontSize * 0.08);\n          ctx.strokeStyle = '#fff';\n          ctx.fillStyle = fontColor.value;\n\n          const textWidth = ctx.measureText(fullText).width;\n          if (textWidth <= canvas.width * 0.9) {\n            ctx.strokeText(fullText, canvas.width \/ 2, y);\n            ctx.fillText(fullText, canvas.width \/ 2, y);\n          } else {\n            ctx.strokeText(name, canvas.width \/ 2, y - fontSize \/ 1.5);\n            ctx.fillText(name, canvas.width \/ 2, y - fontSize \/ 1.5);\n            ctx.strokeText('\u69d8\u5c02\u7528', canvas.width \/ 2, y + fontSize \/ 1.5);\n            ctx.fillText('\u69d8\u5c02\u7528', canvas.width \/ 2, y + fontSize \/ 1.5);\n          }\n\n          const dataURL = canvas.toDataURL('image\/png');\n          downloadLink.href = dataURL;\n          downloadLink.style.display = 'block';\n        };\n        img.src = e.target.result;\n      };\n      reader.readAsDataURL(file);\n    });\n  <\/script>\n<\/div>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"778\" height=\"245\" src=\"https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/05\/\u540d\u5165\u308c\u753b\u50cf\u30c4\u30fc\u30eb\u3007\u3007\u69d8\u5c02\u7528\u3092\u81ea\u52d5\u3067\u4f5c\u6210-2.png\" alt=\"\" class=\"wp-image-1471\" style=\"width:500px\" srcset=\"https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/05\/\u540d\u5165\u308c\u753b\u50cf\u30c4\u30fc\u30eb\u3007\u3007\u69d8\u5c02\u7528\u3092\u81ea\u52d5\u3067\u4f5c\u6210-2.png 778w, https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/05\/\u540d\u5165\u308c\u753b\u50cf\u30c4\u30fc\u30eb\u3007\u3007\u69d8\u5c02\u7528\u3092\u81ea\u52d5\u3067\u4f5c\u6210-2-300x94.png 300w, https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/05\/\u540d\u5165\u308c\u753b\u50cf\u30c4\u30fc\u30eb\u3007\u3007\u69d8\u5c02\u7528\u3092\u81ea\u52d5\u3067\u4f5c\u6210-2-768x242.png 768w\" sizes=\"(max-width: 778px) 100vw, 778px\"><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"addToHomeBox\" style=\"margin: 30px 0;\">\n  <button onclick=\"showGuide()\" style=\"width: 100%; padding: 15px; font-weight: bold; background-color: #f781813d; color: #f28282; border: none; border-radius: 10px; font-size: 16px;\">\n    \u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\n  <\/button>\n  <p id=\"guideText\" style=\"margin-top: 15px; font-size: 15px; line-height: 1.8; display: none;\"><\/p>\n<\/div>\n\n<script>\n  function showGuide() {\n    const ua = window.navigator.userAgent.toLowerCase();\n    const guide = document.getElementById('guideText');\n    guide.style.display = 'block';\n\n    if (ua.includes('iphone') || ua.includes('ipad')) {\n      guide.innerHTML = `\n        Safari\u306e\u300c\u5171\u6709\u300d\u30dc\u30bf\u30f3\uff08\u25a1\u306b\u2191\uff09\u3092\u30bf\u30c3\u30d7\u3059\u308b\u3002<br>\n        \u3000\u3000\u21e9<br>\n        \u300c\u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\u300d\u3092\u9078\u3076\u3002\n      `;\n    } else if (ua.includes('android')) {\n      guide.innerHTML = `\n        \u53f3\u4e0a\u306e\u30e1\u30cb\u30e5\u30fc\uff08\ufe19\uff09\u3092\u30bf\u30c3\u30d7\u3059\u308b\u3002<br>\n        \u3000\u3000\u21e9<br>\n        \u300c\u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\u300d\u3092\u9078\u3076\u3002\n      `;\n    } else if (ua.includes('windows') || ua.includes('macintosh')) {\n      guide.innerHTML = `\n        Chrome\u3067\u8868\u793a\u3055\u308c\u308b\u53f3\u4e0a\u306e\u30e1\u30cb\u30e5\u30fc\uff08\ufe19\uff09\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3002<br>\n        \u3000\u3000\u21e9<br>\n        \u300c\u30ad\u30e3\u30b9\u30c8\u30fb\u5171\u6709\u30fb\u4fdd\u5b58\u300d\u27a1\u300c\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3092\u4f5c\u6210\u2026\u300d\n      `;\n    } else {\n      guide.innerHTML = `\n        \u30d6\u30e9\u30a6\u30b6\u306e\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u300c\u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\u300d\u307e\u305f\u306f\u300c\u3053\u306e\u30b5\u30a4\u30c8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u300d\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002\n      `;\n    }\n  }\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<p><div id=\"sgb-css-id-2\" >\n<\/p><p><\/p>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div id=\"sgb-css-id-1\" style=\"--sgb--custom--bg-color: var(--sgb-main-color);--sgb--custom--text-color: #ffffff;--sgb--custom--text-after: '\u7d9a\u304d\u3092\u8aad\u3080';--sgb--custom--text-after-radius: 4;\"><a class=\"linkto table\" href=\"https:\/\/tomato-made.com\/study\/market-z\/5\"> <span class=\"tbcell tbimg\"><img decoding=\"async\" width=\"160\" height=\"160\" src=\"https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/04\/\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u30c4\u30fc\u30eb\u307e\u3068\u3081-160x160.png\" class=\"attachment-thumb-160 size-thumb-160 wp-post-image\" alt=\"\" srcset=\"https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/04\/\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u30c4\u30fc\u30eb\u307e\u3068\u3081-160x160.png 160w, https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/04\/\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u30c4\u30fc\u30eb\u307e\u3068\u3081-150x150.png 150w\" sizes=\"(max-width: 160px) 100vw, 160px\"><\/span> <span class=\"tbcell tbtext\"> <time class=\"pubdate sng-link-time dfont\" itemprop=\"datePublished\" datetime=\"2025-01-20\">2025\u5e741\u670820\u65e5<\/time> \u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u30c4\u30fc\u30eb\u7d39\u4ecb <\/span> <\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u306b\u5f79\u7acb\u3064\u4fbf\u5229\u30c4\u30fc\u30eb\ud83e\udd70 \u304a\u5ba2\u3055\u3093\u304b\u3089\u30aa\u30fc\u30c0\u30fc\u53d7\u3051\u305f\u3068\u304d\u306b\u3010\u300c\u3007\u3007\u69d8\u5c02\u7528\u300d\u306e\u753b\u50cf\u3011\u3092\u7c21\u5358\u306b\u4f5c\u308c\u308b\u3088\uff01 \u540d\u524d\uff08\u4f8b\uff1a\u3068\u307e\u3081\u90e8\uff09 \u30d5\u30a9\u30f3\u30c8 \u30c7\u30d5\u30a9\u30eb\u30c8Noto Sans JPJosefin SlabPlayfair D &#8230; <\/p>\n","protected":false},"author":1,"featured_media":4026,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6,8],"tags":[],"class_list":{"0":"post-1429","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-market-z","8":"category-tool","9":"category-image","10":"entry"},"_links":{"self":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/1429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/comments?post=1429"}],"version-history":[{"count":0,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/1429\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media\/4026"}],"wp:attachment":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media?parent=1429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/categories?post=1429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/tags?post=1429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}