{"id":1388,"date":"2025-05-24T17:39:28","date_gmt":"2025-05-24T08:39:28","guid":{"rendered":"https:\/\/tomato-made.com\/study\/?p=1388"},"modified":"2025-10-11T14:03:34","modified_gmt":"2025-10-11T05:03:34","slug":"t12","status":"publish","type":"post","link":"https:\/\/tomato-made.com\/study\/market-z\/t12","title":{"rendered":"\u3010\u6b63\u65b9\u5f62\u306b\u5909\u63db + \u30b5\u30a4\u30ba\u5909\u66f4\u3011\u753b\u50cf\u3092\u4e00\u62ec\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9"},"content":{"rendered":"\n<p><strong><span class=\"keiko_yellow_full\">\u753b\u50cf\u3092\u4e00\u62ec<\/span><\/strong>\u3067<strong><span class=\"keiko_yellow_full\">\u300c\u6b63\u65b9\u5f62\u300d\u306b\u5909\u66f4<\/span> + <span class=\"keiko_yellow_full\">\u300c\u30b5\u30a4\u30ba\u300d\u5909\u66f4<\/span><\/strong>\u304c\u3067\u304d\u308b\u3088\uff01\ud83e\udd70<\/p>\n\n\n\n<p>\u30d5\u30ea\u30de\u30a2\u30d7\u30ea\u30fb\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u30b5\u30a4\u30c8\u30fbSNS\u306e\u6295\u7a3f\u7528\u306b\u4fbf\u5229\ud83d\ude06\ud83d\udc4d<\/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\">\n<div class=\"sango-image-tool\" style=\"max-width:100%; padding: initial; margin: initial;\">\n\n  <style>\n    .sango-image-tool * {\n      box-sizing: border-box;\n    }\n\n    .sango-image-tool .upload-btn,\n    .sango-image-tool .download-all {\n      background-color: #f88080;\n      border: 2px solid white;\n      border-radius: 10px;\n      font-size: 16px;\n      font-weight: bold;\n      color: white;\n      cursor: pointer;\n      width: 100%;\n      padding: 15px;\n      margin: 10px 0;\n    }\n\n    .sango-image-tool .download-all {\n      margin-top: 30px;\n    }\n\n    .sango-image-tool .image-container {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 20px;\n      margin-top: 20px;\n    }\n\n    .sango-image-tool .image-box {\n      text-align: center;\n      max-width: 100%;\n    }\n\n    .sango-image-tool .image-box img {\n      max-width: 100%;\n      height: auto;\n      display: block;\n      margin-bottom: 5px;\n    }\n\n    .sango-image-tool .download-link {\n      font-size: 14px;\n      color: #d94c72;\n      text-decoration: underline;\n      display: inline-block;\n      margin-top: 5px;\n    }\n\n    .sango-image-tool .size-input {\n      width: 100%;\n      padding: 15px;\n      font-size: 16px;\n      margin: 10px 0;\n      border: 2px solid #ddd;\n      border-radius: 10px;\n    }\n  <\/style>\n\n  <!-- \u753b\u50cf\u9078\u629e -->\n  <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" multiple style=\"display: none;\">\n  <label for=\"imageInput\" class=\"upload-btn\">\u753b\u50cf\u3092\u9078\u3076<\/label>\n\n  <!-- \u30b5\u30a4\u30ba\u6307\u5b9a\u5165\u529b -->\n  <input type=\"number\" id=\"resizeSize\" class=\"size-input\" placeholder=\"\u51fa\u529b\u30b5\u30a4\u30ba(px)\" value=\"500\" min=\"1\">\n\n  <!-- \u753b\u50cf\u8868\u793a\u30a8\u30ea\u30a2 -->\n  <div id=\"imageContainer\" class=\"image-container\"><\/div>\n\n  <!-- \u4e00\u62ec\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9 -->\n  <button id=\"downloadAll\" class=\"download-all\" style=\"display: none;\">\u4e00\u62ec\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/button>\n\n  <script>\n    const imagesData = [];\n\n    document.getElementById('imageInput').addEventListener('change', function(event) {\n      const files = event.target.files;\n      const container = document.getElementById('imageContainer');\n      const downloadAllBtn = document.getElementById('downloadAll');\n      const resizeInput = document.getElementById('resizeSize');\n      container.innerHTML = '';\n      imagesData.length = 0;\n\n      Array.from(files).forEach((file, index) => {\n        const img = new Image();\n        const reader = new FileReader();\n        const canvas = document.createElement('canvas');\n        const ctx = canvas.getContext('2d');\n\n        reader.onload = function(e) {\n          img.src = e.target.result;\n        };\n\n        img.onload = function() {\n          const size = Math.min(img.width, img.height);\n          const sx = (img.width - size) \/ 2;\n          const sy = (img.height - size) \/ 2;\n\n          const outputSize = parseInt(resizeInput.value, 10) || size;\n          canvas.width = outputSize;\n          canvas.height = outputSize;\n\n          ctx.drawImage(img, sx, sy, size, size, 0, 0, outputSize, outputSize);\n\n          const dataURL = canvas.toDataURL('image\/jpeg');\n          const fileName = `square-${index + 1}.jpg`;\n          imagesData.push({ name: fileName, data: dataURL });\n\n          const box = document.createElement('div');\n          box.className = 'image-box';\n\n          const squareImg = new Image();\n          squareImg.src = dataURL;\n          box.appendChild(squareImg);\n\n          const link = document.createElement('a');\n          link.href = dataURL;\n          link.download = fileName;\n          link.textContent = `\u753b\u50cf${index + 1}\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9`;\n          link.className = 'download-link';\n          box.appendChild(link);\n\n          container.appendChild(box);\n\n          if (imagesData.length === files.length) {\n            downloadAllBtn.style.display = 'block';\n          }\n        };\n\n        reader.readAsDataURL(file);\n      });\n    });\n\n    document.getElementById('downloadAll').addEventListener('click', function () {\n      imagesData.forEach(img => {\n        const a = document.createElement('a');\n        a.href = img.data;\n        a.download = img.name;\n        document.body.appendChild(a);\n        a.click();\n        document.body.removeChild(a);\n      });\n    });\n  <\/script>\n<\/div>\n<\/div>\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\" src=\"https:\/\/tomato-made.com\/study\/wp-content\/uploads\/2025\/05\/\u753b\u50cf\u30b5\u30a4\u30ba\u5909\u66f4\u30fb\u753b\u50cf\u6b63\u65b9\u5f62\u5909\u63db\u3001\u4e00\u62ec\u7de8\u96c6\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9-2.png\" alt=\"\" class=\"wp-image-1393\" style=\"width:400px\"><\/figure>\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-3\" >\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-2\" 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>\u753b\u50cf\u3092\u4e00\u62ec\u3067\u300c\u6b63\u65b9\u5f62\u300d\u306b\u5909\u66f4 + \u300c\u30b5\u30a4\u30ba\u300d\u5909\u66f4\u304c\u3067\u304d\u308b\u3088\uff01\ud83e\udd70 \u30d5\u30ea\u30de\u30a2\u30d7\u30ea\u30fb\u30cf\u30f3\u30c9\u30e1\u30a4\u30c9\u30b5\u30a4\u30c8\u30fbSNS\u306e\u6295\u7a3f\u7528\u306b\u4fbf\u5229\ud83d\ude06\ud83d\udc4d \u753b\u50cf\u3092\u9078\u3076 \u4e00\u62ec\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9 \u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0<\/p>\n","protected":false},"author":1,"featured_media":4019,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6,8],"tags":[],"class_list":{"0":"post-1388","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\/1388","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=1388"}],"version-history":[{"count":0,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/1388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media\/4019"}],"wp:attachment":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media?parent=1388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/categories?post=1388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/tags?post=1388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}