\u6b63\u65b9\u5f62\u753b\u50cf\u30e1\u30fc\u30ab\u30fc<\/title>\n <style>\n :root { font-size: 16px; }\n body {\n background-color:#fff7f8;\n font-family:\"Hiragino Maru Gothic Pro\",\"Meiryo\",sans-serif;\n margin:0;\n padding:0;\n color:#444;\n }\n .container {\n max-width:95%;\n margin:0 auto;\n background:#ffeef2;\n border-radius:1.25rem;\n padding:2rem 1.5rem; \/* \u2190 \u4e0a\u4e0b2rem\u3001\u5de6\u53f31.5rem \u306b\u7d71\u4e00 *\/\n box-shadow:0 0.375rem 1rem rgba(0,0,0,0.05);\n }\n h2 {\n margin-top: 0 !important;\n margin-bottom: 1.2rem;\n padding-top: 0;\n text-align:center;\n font-size:1.6rem;\n color:#e85f86;\n }\n .preview {\n position:relative;\n background:#fce8ed;\n border:0.125rem dashed #f6c2cc;\n border-radius:0.75rem;\n padding:1rem;\n text-align:center;\n min-height:300px;\n }\n canvas {\n width:100%;\n height:auto;\n border-radius:0.5rem;\n display:block;\n margin:0 auto;\n cursor: pointer;\n }\n .file-label.inside {\n position:absolute;\n top:50%;\n left:50%;\n transform:translate(-50%,-50%);\n padding:0.75rem 1.5rem;\n background:#f4a1b5;\n color:#fff;\n border-radius:0.5rem;\n cursor:pointer;\n font-size:1rem;\n z-index:2;\n }\n input[type=\"file\"] { display:none; }\n\n .adjust-bar {\n margin-top:1rem;\n margin-bottom:1.5rem;\n }\n .adjust-bar label {\n font-size:1rem;\n margin-bottom:0.5rem;\n display:block;\n }\n .adjust-bar input[type=\"range\"] {\n width:100%;\n height:2rem;\n }\n\n .color-toggle,\n .color-picker,\n .options {\n text-align:center;\n margin-top:1rem;\n }\n .color-toggle button {\n padding:0.75rem 1.5rem;\n font-size:1rem;\n background:#f4a1b5;\n color:#fff;\n border:none;\n border-radius:0.5rem;\n cursor:pointer;\n }\n .color-picker input[type=\"color\"] {\n width:3rem;\n height:3rem;\n border:none;\n border-radius:50%;\n margin-top:0.5rem;\n cursor:pointer;\n }\n\n .options label {\n display:block;\n background:#fff1f4;\n border:1px solid #f6c2cc;\n border-radius:0.75rem;\n padding:0.75rem;\n font-size:1rem;\n margin-bottom:0.5rem;\n cursor:pointer;\n }\n .options input[type=\"radio\"] {\n margin-right:0.5rem;\n accent-color:#e85f86;\n }\n\n .btn-download {\n width:100%;\n padding:1rem;\n background:#e85f86;\n color:#fff;\n border:none;\n border-radius:0.75rem;\n font-size:1.1rem;\n font-weight:bold;\n margin-top:2rem;\n cursor:pointer;\n transition:background 0.3s;\n }\n .btn-download:hover {\n background:#d14f78;\n }\n\n @media (min-width:768px) {\n .container { max-width:600px; }\n h2 { font-size:2rem; }\n .file-label.inside,\n .color-toggle button,\n .btn-download {\n font-size:1.1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"toc\"><br \/>\n<b>Warning<\/b>: Undefined array key \"is_admin\" in <b>\/home\/tomatosearch\/tomato-made.com\/public_html\/study\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>113<\/b><br \/>\n<br \/>\n<b>Warning<\/b>: Undefined array key \"is_category_top\" in <b>\/home\/tomatosearch\/tomato-made.com\/public_html\/study\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>118<\/b><br \/>\n<br \/>\n<b>Warning<\/b>: Undefined array key \"is_top\" in <b>\/home\/tomatosearch\/tomato-made.com\/public_html\/study\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>124<\/b><br \/>\n<\/div><h2 id=\"i-0\">\u6b63\u65b9\u5f62\u306b\u30ab\u30b9\u30bf\u30e0\uff01<\/h2>\n\n <div class=\"preview\">\n <label for=\"upload\" class=\"file-label inside\">\u753b\u50cf\u3092\u9078\u629e<\/label>\n <input type=\"file\" id=\"upload\" accept=\"image\/*\">\n <canvas id=\"canvas\" width=\"400\" height=\"400\" title=\"\u753b\u50cf\u3092\u5909\u66f4\u3059\u308b\u306b\u306f\u30af\u30ea\u30c3\u30af\" style=\"cursor: pointer;\"><\/canvas>\n <\/div>\n\n <div class=\"adjust-bar\" id=\"cropAdjust\">\n <label>\u30c8\u30ea\u30df\u30f3\u30b0\u4f4d\u7f6e: <span id=\"cropVal\">50<\/span>%<\/label>\n <input type=\"range\" id=\"cropRange\" min=\"0\" max=\"100\" value=\"50\" step=\"1\">\n <\/div>\n <div class=\"adjust-bar\" id=\"resizeAdjust\">\n <label>\u30ea\u30b5\u30a4\u30ba\u7e2e\u5c0f\u7387: <span id=\"resizeVal\">1.0<\/span><\/label>\n <input type=\"range\" id=\"resizeRange\" min=\"0.2\" max=\"1\" value=\"1\" step=\"0.1\">\n <\/div>\n <div class=\"adjust-bar\" id=\"blurAdjust\">\n <label>\u307c\u304b\u3057\u5f37\u3055\uff08\u753b\u50cf\u306e\u307c\u3051\u5177\u5408\uff09: <span id=\"blurVal\">0.5<\/span><\/label>\n <input type=\"range\" id=\"blurRange\" min=\"0.1\" max=\"2.5\" value=\"0.5\" step=\"0.1\">\n <\/div>\n\n <div class=\"color-toggle\">\n <button id=\"toggleColorPicker\">\u80cc\u666f\u8272\u3092\u5909\u66f4<\/button>\n <\/div>\n <div class=\"color-picker\" id=\"colorPickerWrap\" style=\"display:none;\">\n <input type=\"color\" id=\"bgColor\" value=\"#f4a1b5\">\n <\/div>\n\n <div class=\"options\">\n <label><input type=\"radio\" name=\"mode\" value=\"color\" checked> \u30ab\u30e9\u30fc\u80cc\u666f<\/label>\n <label><input type=\"radio\" name=\"mode\" value=\"blur\"> \u307c\u304b\u3057\u80cc\u666f<\/label>\n <label><input type=\"radio\" name=\"mode\" value=\"resize\"> \u30ea\u30b5\u30a4\u30ba<\/label>\n <label><input type=\"radio\" name=\"mode\" value=\"crop\"> \u30c8\u30ea\u30df\u30f3\u30b0<\/label>\n <\/div>\n\n <button class=\"btn-download\" id=\"downloadBtn\">\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/button>\n <\/div>\n\n <script>\n const canvas = document.getElementById(\"canvas\"),\n ctx = canvas.getContext(\"2d\"),\n upload = document.getElementById(\"upload\"),\n bgColor = document.getElementById(\"bgColor\"),\n toggleColorPicker = document.getElementById(\"toggleColorPicker\"),\n colorPickerWrap = document.getElementById(\"colorPickerWrap\"),\n downloadBtn = document.getElementById(\"downloadBtn\"),\n modeRadios = document.querySelectorAll('input[name=\"mode\"]'),\n cropRange = document.getElementById(\"cropRange\"),\n cropVal = document.getElementById(\"cropVal\"),\n resizeRange = document.getElementById(\"resizeRange\"),\n resizeVal = document.getElementById(\"resizeVal\"),\n blurRange = document.getElementById(\"blurRange\"),\n blurVal = document.getElementById(\"blurVal\"),\n cropAdjust = document.getElementById(\"cropAdjust\"),\n resizeAdjust = document.getElementById(\"resizeAdjust\"),\n blurAdjust = document.getElementById(\"blurAdjust\");\n\n let img = new Image(),\n drawRequested = false;\n\n function requestDraw() {\n if (!drawRequested) {\n drawRequested = true;\n requestAnimationFrame(() => {\n draw();\n drawRequested = false;\n });\n }\n }\n\n function updateAdjustBars(mode) {\n cropAdjust.style.display = (mode === 'crop') ? 'block' : 'none';\n resizeAdjust.style.display = (mode === 'resize') ? 'block' : 'none';\n blurAdjust.style.display = (mode === 'blur') ? 'block' : 'none';\n colorPickerWrap.style.display = (mode === 'color') ? 'block' : 'none';\n }\n\n function draw() {\n if (!img.src) return;\n const mode = document.querySelector('input[name=\"mode\"]:checked').value;\n updateAdjustBars(mode);\n\n const w = img.width,\n h = img.height,\n squareSize = Math.max(w, h);\n\n canvas.width = canvas.height = squareSize;\n ctx.clearRect(0, 0, squareSize, squareSize);\n\n if (mode === \"color\") {\n ctx.fillStyle = bgColor.value;\n ctx.fillRect(0, 0, squareSize, squareSize);\n ctx.drawImage(img, (squareSize - w) \/ 2, (squareSize - h) \/ 2);\n } else if (mode === \"blur\") {\n const blurValNum = parseFloat(blurRange.value),\n blurPx = Math.round(blurValNum * 10),\n bgScale = 0.05;\n\n const tempCanvas = document.createElement(\"canvas\"),\n tempCtx = tempCanvas.getContext(\"2d\");\n\n tempCanvas.width = w * bgScale;\n tempCanvas.height = h * bgScale;\n tempCtx.drawImage(img, 0, 0, tempCanvas.width, tempCanvas.height);\n\n ctx.save();\n ctx.filter = `blur(${blurPx}px)`;\n ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, squareSize, squareSize);\n ctx.restore();\n\n ctx.drawImage(img, (squareSize - w) \/ 2, (squareSize - h) \/ 2);\n } else if (mode === \"resize\") {\n const scale = parseFloat(resizeRange.value),\n nw = w * scale,\n nh = h * scale;\n ctx.fillStyle = \"#fff\";\n ctx.fillRect(0, 0, squareSize, squareSize);\n ctx.drawImage(img, (squareSize - nw) \/ 2, (squareSize - nh) \/ 2, nw, nh);\n } else if (mode === \"crop\") {\n const side = Math.min(w, h),\n offset = parseInt(cropRange.value) \/ 100,\n sx = (w - side) * offset,\n sy = (h - side) * offset;\n canvas.width = canvas.height = side;\n ctx.drawImage(img, sx, sy, side, side, 0, 0, side, side);\n }\n }\n\n upload.addEventListener(\"change\", (e) => {\n const file = e.target.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = ev => {\n img = new Image();\n img.onload = () => {\n const isMobile = window.innerWidth < 768;\n canvas.width = canvas.height = isMobile ? 300 : Math.max(img.width, img.height);\n document.querySelector(\".file-label.inside\").style.display = \"none\";\n draw();\n };\n img.src = ev.target.result;\n };\n reader.readAsDataURL(file);\n });\n\n [cropRange, resizeRange, blurRange].forEach(input => {\n input.addEventListener(\"input\", () => {\n if (input === cropRange) cropVal.textContent = input.value;\n else if (input === resizeRange) resizeVal.textContent = input.value;\n else blurVal.textContent = input.value;\n requestDraw();\n });\n });\n\n bgColor.addEventListener(\"input\", requestDraw);\n modeRadios.forEach(r => r.addEventListener(\"change\", requestDraw));\n toggleColorPicker.addEventListener(\"click\", () => {\n colorPickerWrap.style.display = (colorPickerWrap.style.display === \"block\") ? \"none\" : \"block\";\n });\n downloadBtn.addEventListener(\"click\", () => {\n const a = document.createElement(\"a\");\n a.href = canvas.toDataURL(\"image\/png\");\n a.download = \"square-image.png\";\n a.click();\n });\n\n canvas.addEventListener(\"click\", () => upload.click());\n <\/script>\n<\/body>\n\n\n\n\n<div style=\"height:60px\" 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<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-1\">\u4e00\u62ec\u51e6\u7406\u3067\u304d\u308b\u300c\u6b63\u65b9\u5f62\u30c4\u30fc\u30eb\u300d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u30fb<a href=\"https:\/\/tomato-made.com\/study\/market-z\/2-2\">\u4e2d\u592e\u304b\u3089\u30c8\u30ea\u30df\u30f3\u30b0\u3067\u6b63\u65b9\u5f62<\/a><\/strong><br><strong>\u30fb<a href=\"https:\/\/tomato-made.com\/study\/market-z\/t14\">\u81ea\u7136\u80cc\u666f\u3067\u6b63\u65b9\u5f62<\/a><\/strong><br><strong>\u30fb<a href=\"https:\/\/tomato-made.com\/study\/market-z\/t12\">\u6b63\u65b9\u5f62\u306b\u5909\u63db + \u753b\u50cf\u30b5\u30a4\u30ba\u5909\u66f4<\/a><\/strong><br><strong>\u30fb<a href=\"https:\/\/tomato-made.com\/study\/market-z\/13\">\u6b63\u65b9\u5f62\u5909\u63db + \u7f72\u540d\u8ffd\u52a0<\/a><\/strong><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<p><div id=\"sgb-css-id-2\" >\n<\/p><p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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><\/html><\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066\u3001\u6b63\u65b9\u5f62\u306b\u6574\u3048\u308b\u30c4\u30fc\u30eb\u3067\u3059\u3002 \u30ab\u30e9\u30fc\u80cc\u666f\u30fb\u307c\u304b\u3057\u80cc\u666f\u30fb\u30ea\u30b5\u30a4\u30ba\u30fb\u30c8\u30ea\u30df\u30f3\u30b0\u304b\u3089\u9078\u3093\u3067\u8abf\u6574\u3067\u304d\u3001\u6700\u5f8c\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002 \u30b9\u30de\u30db\u3067\u3082PC\u3067\u3082\u3001\u30b5\u30af\u30c3\u3068\u4f7f\u3048\u308b\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002 \u6b63\u65b9\u5f62\u753b\u50cf\u30e1\u30fc\u30ab\u30fc Wa … <\/p>\n","protected":false},"author":1,"featured_media":4013,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6,8],"tags":[],"class_list":["post-2691","post","type-post","status-publish","format-standard","has-post-thumbnail","category-market-z","category-tool","category-image","entry"],"_links":{"self":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/2691","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=2691"}],"version-history":[{"count":1,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/2691\/revisions"}],"predecessor-version":[{"id":8070,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/2691\/revisions\/8070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media\/4013"}],"wp:attachment":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media?parent=2691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/categories?post=2691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/tags?post=2691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066\u3001\u6b63\u65b9\u5f62\u306b\u6574\u3048\u308b\u30c4\u30fc\u30eb<\/span><\/strong>\u3067\u3059\u3002<\/p>\n\n\n\n

\u30ab\u30e9\u30fc\u80cc\u666f\u30fb\u307c\u304b\u3057\u80cc\u666f\u30fb\u30ea\u30b5\u30a4\u30ba\u30fb\u30c8\u30ea\u30df\u30f3\u30b0<\/span><\/strong>\u304b\u3089\u9078\u3093\u3067\u8abf\u6574\u3067\u304d\u3001\u6700\u5f8c\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

\u30b9\u30de\u30db\u3067\u3082PC\u3067\u3082\u3001\u30b5\u30af\u30c3\u3068\u4f7f\u3048\u308b\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002<\/p>\n\n\n\n

<\/div>\n\n\n\n\n\n \n \n \u6b63\u65b9\u5f62\u753b\u50cf\u30e1\u30fc\u30ab\u30fc<\/title>\n <style>\n :root { font-size: 16px; }\n body {\n background-color:#fff7f8;\n font-family:\"Hiragino Maru Gothic Pro\",\"Meiryo\",sans-serif;\n margin:0;\n padding:0;\n color:#444;\n }\n .container {\n max-width:95%;\n margin:0 auto;\n background:#ffeef2;\n border-radius:1.25rem;\n padding:2rem 1.5rem; \/* \u2190 \u4e0a\u4e0b2rem\u3001\u5de6\u53f31.5rem \u306b\u7d71\u4e00 *\/\n box-shadow:0 0.375rem 1rem rgba(0,0,0,0.05);\n }\n h2 {\n margin-top: 0 !important;\n margin-bottom: 1.2rem;\n padding-top: 0;\n text-align:center;\n font-size:1.6rem;\n color:#e85f86;\n }\n .preview {\n position:relative;\n background:#fce8ed;\n border:0.125rem dashed #f6c2cc;\n border-radius:0.75rem;\n padding:1rem;\n text-align:center;\n min-height:300px;\n }\n canvas {\n width:100%;\n height:auto;\n border-radius:0.5rem;\n display:block;\n margin:0 auto;\n cursor: pointer;\n }\n .file-label.inside {\n position:absolute;\n top:50%;\n left:50%;\n transform:translate(-50%,-50%);\n padding:0.75rem 1.5rem;\n background:#f4a1b5;\n color:#fff;\n border-radius:0.5rem;\n cursor:pointer;\n font-size:1rem;\n z-index:2;\n }\n input[type=\"file\"] { display:none; }\n\n .adjust-bar {\n margin-top:1rem;\n margin-bottom:1.5rem;\n }\n .adjust-bar label {\n font-size:1rem;\n margin-bottom:0.5rem;\n display:block;\n }\n .adjust-bar input[type=\"range\"] {\n width:100%;\n height:2rem;\n }\n\n .color-toggle,\n .color-picker,\n .options {\n text-align:center;\n margin-top:1rem;\n }\n .color-toggle button {\n padding:0.75rem 1.5rem;\n font-size:1rem;\n background:#f4a1b5;\n color:#fff;\n border:none;\n border-radius:0.5rem;\n cursor:pointer;\n }\n .color-picker input[type=\"color\"] {\n width:3rem;\n height:3rem;\n border:none;\n border-radius:50%;\n margin-top:0.5rem;\n cursor:pointer;\n }\n\n .options label {\n display:block;\n background:#fff1f4;\n border:1px solid #f6c2cc;\n border-radius:0.75rem;\n padding:0.75rem;\n font-size:1rem;\n margin-bottom:0.5rem;\n cursor:pointer;\n }\n .options input[type=\"radio\"] {\n margin-right:0.5rem;\n accent-color:#e85f86;\n }\n\n .btn-download {\n width:100%;\n padding:1rem;\n background:#e85f86;\n color:#fff;\n border:none;\n border-radius:0.75rem;\n font-size:1.1rem;\n font-weight:bold;\n margin-top:2rem;\n cursor:pointer;\n transition:background 0.3s;\n }\n .btn-download:hover {\n background:#d14f78;\n }\n\n @media (min-width:768px) {\n .container { max-width:600px; }\n h2 { font-size:2rem; }\n .file-label.inside,\n .color-toggle button,\n .btn-download {\n font-size:1.1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"toc\"><br \/>\n<b>Warning<\/b>: Undefined array key \"is_admin\" in <b>\/home\/tomatosearch\/tomato-made.com\/public_html\/study\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>113<\/b><br \/>\n<br \/>\n<b>Warning<\/b>: Undefined array key \"is_category_top\" in <b>\/home\/tomatosearch\/tomato-made.com\/public_html\/study\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>118<\/b><br \/>\n<br \/>\n<b>Warning<\/b>: Undefined array key \"is_top\" in <b>\/home\/tomatosearch\/tomato-made.com\/public_html\/study\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>124<\/b><br \/>\n<\/div><h2 id=\"i-0\">\u6b63\u65b9\u5f62\u306b\u30ab\u30b9\u30bf\u30e0\uff01<\/h2>\n\n <div class=\"preview\">\n <label for=\"upload\" class=\"file-label inside\">\u753b\u50cf\u3092\u9078\u629e<\/label>\n <input type=\"file\" id=\"upload\" accept=\"image\/*\">\n <canvas id=\"canvas\" width=\"400\" height=\"400\" title=\"\u753b\u50cf\u3092\u5909\u66f4\u3059\u308b\u306b\u306f\u30af\u30ea\u30c3\u30af\" style=\"cursor: pointer;\"><\/canvas>\n <\/div>\n\n <div class=\"adjust-bar\" id=\"cropAdjust\">\n <label>\u30c8\u30ea\u30df\u30f3\u30b0\u4f4d\u7f6e: <span id=\"cropVal\">50<\/span>%<\/label>\n <input type=\"range\" id=\"cropRange\" min=\"0\" max=\"100\" value=\"50\" step=\"1\">\n <\/div>\n <div class=\"adjust-bar\" id=\"resizeAdjust\">\n <label>\u30ea\u30b5\u30a4\u30ba\u7e2e\u5c0f\u7387: <span id=\"resizeVal\">1.0<\/span><\/label>\n <input type=\"range\" id=\"resizeRange\" min=\"0.2\" max=\"1\" value=\"1\" step=\"0.1\">\n <\/div>\n <div class=\"adjust-bar\" id=\"blurAdjust\">\n <label>\u307c\u304b\u3057\u5f37\u3055\uff08\u753b\u50cf\u306e\u307c\u3051\u5177\u5408\uff09: <span id=\"blurVal\">0.5<\/span><\/label>\n <input type=\"range\" id=\"blurRange\" min=\"0.1\" max=\"2.5\" value=\"0.5\" step=\"0.1\">\n <\/div>\n\n <div class=\"color-toggle\">\n <button id=\"toggleColorPicker\">\u80cc\u666f\u8272\u3092\u5909\u66f4<\/button>\n <\/div>\n <div class=\"color-picker\" id=\"colorPickerWrap\" style=\"display:none;\">\n <input type=\"color\" id=\"bgColor\" value=\"#f4a1b5\">\n <\/div>\n\n <div class=\"options\">\n <label><input type=\"radio\" name=\"mode\" value=\"color\" checked> \u30ab\u30e9\u30fc\u80cc\u666f<\/label>\n <label><input type=\"radio\" name=\"mode\" value=\"blur\"> \u307c\u304b\u3057\u80cc\u666f<\/label>\n <label><input type=\"radio\" name=\"mode\" value=\"resize\"> \u30ea\u30b5\u30a4\u30ba<\/label>\n <label><input type=\"radio\" name=\"mode\" value=\"crop\"> \u30c8\u30ea\u30df\u30f3\u30b0<\/label>\n <\/div>\n\n <button class=\"btn-download\" id=\"downloadBtn\">\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/button>\n <\/div>\n\n <script>\n const canvas = document.getElementById(\"canvas\"),\n ctx = canvas.getContext(\"2d\"),\n upload = document.getElementById(\"upload\"),\n bgColor = document.getElementById(\"bgColor\"),\n toggleColorPicker = document.getElementById(\"toggleColorPicker\"),\n colorPickerWrap = document.getElementById(\"colorPickerWrap\"),\n downloadBtn = document.getElementById(\"downloadBtn\"),\n modeRadios = document.querySelectorAll('input[name=\"mode\"]'),\n cropRange = document.getElementById(\"cropRange\"),\n cropVal = document.getElementById(\"cropVal\"),\n resizeRange = document.getElementById(\"resizeRange\"),\n resizeVal = document.getElementById(\"resizeVal\"),\n blurRange = document.getElementById(\"blurRange\"),\n blurVal = document.getElementById(\"blurVal\"),\n cropAdjust = document.getElementById(\"cropAdjust\"),\n resizeAdjust = document.getElementById(\"resizeAdjust\"),\n blurAdjust = document.getElementById(\"blurAdjust\");\n\n let img = new Image(),\n drawRequested = false;\n\n function requestDraw() {\n if (!drawRequested) {\n drawRequested = true;\n requestAnimationFrame(() => {\n draw();\n drawRequested = false;\n });\n }\n }\n\n function updateAdjustBars(mode) {\n cropAdjust.style.display = (mode === 'crop') ? 'block' : 'none';\n resizeAdjust.style.display = (mode === 'resize') ? 'block' : 'none';\n blurAdjust.style.display = (mode === 'blur') ? 'block' : 'none';\n colorPickerWrap.style.display = (mode === 'color') ? 'block' : 'none';\n }\n\n function draw() {\n if (!img.src) return;\n const mode = document.querySelector('input[name=\"mode\"]:checked').value;\n updateAdjustBars(mode);\n\n const w = img.width,\n h = img.height,\n squareSize = Math.max(w, h);\n\n canvas.width = canvas.height = squareSize;\n ctx.clearRect(0, 0, squareSize, squareSize);\n\n if (mode === \"color\") {\n ctx.fillStyle = bgColor.value;\n ctx.fillRect(0, 0, squareSize, squareSize);\n ctx.drawImage(img, (squareSize - w) \/ 2, (squareSize - h) \/ 2);\n } else if (mode === \"blur\") {\n const blurValNum = parseFloat(blurRange.value),\n blurPx = Math.round(blurValNum * 10),\n bgScale = 0.05;\n\n const tempCanvas = document.createElement(\"canvas\"),\n tempCtx = tempCanvas.getContext(\"2d\");\n\n tempCanvas.width = w * bgScale;\n tempCanvas.height = h * bgScale;\n tempCtx.drawImage(img, 0, 0, tempCanvas.width, tempCanvas.height);\n\n ctx.save();\n ctx.filter = `blur(${blurPx}px)`;\n ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, squareSize, squareSize);\n ctx.restore();\n\n ctx.drawImage(img, (squareSize - w) \/ 2, (squareSize - h) \/ 2);\n } else if (mode === \"resize\") {\n const scale = parseFloat(resizeRange.value),\n nw = w * scale,\n nh = h * scale;\n ctx.fillStyle = \"#fff\";\n ctx.fillRect(0, 0, squareSize, squareSize);\n ctx.drawImage(img, (squareSize - nw) \/ 2, (squareSize - nh) \/ 2, nw, nh);\n } else if (mode === \"crop\") {\n const side = Math.min(w, h),\n offset = parseInt(cropRange.value) \/ 100,\n sx = (w - side) * offset,\n sy = (h - side) * offset;\n canvas.width = canvas.height = side;\n ctx.drawImage(img, sx, sy, side, side, 0, 0, side, side);\n }\n }\n\n upload.addEventListener(\"change\", (e) => {\n const file = e.target.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = ev => {\n img = new Image();\n img.onload = () => {\n const isMobile = window.innerWidth < 768;\n canvas.width = canvas.height = isMobile ? 300 : Math.max(img.width, img.height);\n document.querySelector(\".file-label.inside\").style.display = \"none\";\n draw();\n };\n img.src = ev.target.result;\n };\n reader.readAsDataURL(file);\n });\n\n [cropRange, resizeRange, blurRange].forEach(input => {\n input.addEventListener(\"input\", () => {\n if (input === cropRange) cropVal.textContent = input.value;\n else if (input === resizeRange) resizeVal.textContent = input.value;\n else blurVal.textContent = input.value;\n requestDraw();\n });\n });\n\n bgColor.addEventListener(\"input\", requestDraw);\n modeRadios.forEach(r => r.addEventListener(\"change\", requestDraw));\n toggleColorPicker.addEventListener(\"click\", () => {\n colorPickerWrap.style.display = (colorPickerWrap.style.display === \"block\") ? \"none\" : \"block\";\n });\n downloadBtn.addEventListener(\"click\", () => {\n const a = document.createElement(\"a\");\n a.href = canvas.toDataURL(\"image\/png\");\n a.download = \"square-image.png\";\n a.click();\n });\n\n canvas.addEventListener(\"click\", () => upload.click());\n <\/script>\n<\/body>\n\n\n\n\n<div style=\"height:60px\" 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<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-1\">\u4e00\u62ec\u51e6\u7406\u3067\u304d\u308b\u300c\u6b63\u65b9\u5f62\u30c4\u30fc\u30eb\u300d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u30fb<a href=\"https:\/\/tomato-made.com\/study\/market-z\/2-2\">\u4e2d\u592e\u304b\u3089\u30c8\u30ea\u30df\u30f3\u30b0\u3067\u6b63\u65b9\u5f62<\/a><\/strong><br><strong>\u30fb<a href=\"https:\/\/tomato-made.com\/study\/market-z\/t14\">\u81ea\u7136\u80cc\u666f\u3067\u6b63\u65b9\u5f62<\/a><\/strong><br><strong>\u30fb<a href=\"https:\/\/tomato-made.com\/study\/market-z\/t12\">\u6b63\u65b9\u5f62\u306b\u5909\u63db + \u753b\u50cf\u30b5\u30a4\u30ba\u5909\u66f4<\/a><\/strong><br><strong>\u30fb<a href=\"https:\/\/tomato-made.com\/study\/market-z\/13\">\u6b63\u65b9\u5f62\u5909\u63db + \u7f72\u540d\u8ffd\u52a0<\/a><\/strong><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<p><div id=\"sgb-css-id-2\" >\n<\/p><p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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><\/html><\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066\u3001\u6b63\u65b9\u5f62\u306b\u6574\u3048\u308b\u30c4\u30fc\u30eb\u3067\u3059\u3002 \u30ab\u30e9\u30fc\u80cc\u666f\u30fb\u307c\u304b\u3057\u80cc\u666f\u30fb\u30ea\u30b5\u30a4\u30ba\u30fb\u30c8\u30ea\u30df\u30f3\u30b0\u304b\u3089\u9078\u3093\u3067\u8abf\u6574\u3067\u304d\u3001\u6700\u5f8c\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002 \u30b9\u30de\u30db\u3067\u3082PC\u3067\u3082\u3001\u30b5\u30af\u30c3\u3068\u4f7f\u3048\u308b\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002 \u6b63\u65b9\u5f62\u753b\u50cf\u30e1\u30fc\u30ab\u30fc Wa … <\/p>\n","protected":false},"author":1,"featured_media":4013,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6,8],"tags":[],"class_list":["post-2691","post","type-post","status-publish","format-standard","has-post-thumbnail","category-market-z","category-tool","category-image","entry"],"_links":{"self":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/2691","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=2691"}],"version-history":[{"count":1,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/2691\/revisions"}],"predecessor-version":[{"id":8070,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/posts\/2691\/revisions\/8070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media\/4013"}],"wp:attachment":[{"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/media?parent=2691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/categories?post=2691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomato-made.com\/study\/wp-json\/wp\/v2\/tags?post=2691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}