{"id":14471,"date":"2026-06-04T15:35:32","date_gmt":"2026-06-04T06:35:32","guid":{"rendered":"https:\/\/rakkokeyword.com\/techo\/?p=14471"},"modified":"2026-06-04T15:35:33","modified_gmt":"2026-06-04T06:35:33","slug":"tool-symmetry-image","status":"publish","type":"post","link":"https:\/\/rakkokeyword.com\/techo\/tool-symmetry-image\/","title":{"rendered":"\u30b7\u30f3\u30e1\u30c8\u30ea\u30fc\u753b\u50cf\u751f\u6210\u30c4\u30fc\u30eb"},"content":{"rendered":"\n<div>\n    <style>\n    \/* \u30c4\u30fc\u30eb\u5168\u4f53\uff08WP\u306e\u9818\u57df\u306b\u5408\u308f\u305b\u308b\u305f\u3081\u5916\u67a0\u30fb\u4f59\u767d\u306f\u8a2d\u5b9a\u3057\u306a\u3044\uff09 *\/\n    .sym_img_container {\n        width: 100%;\n        font-family: sans-serif;\n        color: #333;\n        background-color: transparent;\n        box-sizing: border-box;\n        padding-bottom: 40px;\n    }\n\n    .sym_img_container * {\n        box-sizing: border-box;\n    }\n\n    .sym_img_title {\n        font-size: 1.5em;\n        font-weight: bold;\n        text-align: center;\n        margin: 0 0 20px 0;\n        color: #000;\n    }\n\n    \/* \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u30a8\u30ea\u30a2 *\/\n    .sym_img_upload_area {\n        border: 2px dashed #999;\n        background-color: #f9f9f9;\n        padding: 40px 20px;\n        text-align: center;\n        cursor: pointer;\n        transition: background-color 0.2s;\n        margin-bottom: 10px;\n    }\n    .sym_img_upload_area:hover, .sym_img_dragover {\n        background-color: #eee;\n    }\n\n    \/* \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8 *\/\n    .sym_img_error {\n        color: #d32f2f;\n        font-weight: bold;\n        text-align: center;\n        margin: 0 0 15px 0;\n        min-height: 1.5em;\n    }\n\n    \/* \u64cd\u4f5c\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u30a8\u30ea\u30a2 *\/\n    .sym_img_controls {\n        background-color: #f5f5f5;\n        padding: 15px;\n        margin-bottom: 20px;\n    }\n    .sym_img_control_group {\n        margin-bottom: 15px;\n    }\n    .sym_img_control_group:last-child {\n        margin-bottom: 0;\n    }\n    .sym_img_control_label {\n        font-weight: bold;\n        margin: 0 0 8px 0;\n    }\n    .sym_img_radio_label {\n        margin-right: 15px;\n        cursor: pointer;\n    }\n    .sym_img_slider {\n        width: 100%;\n        cursor: pointer;\n    }\n\n    \/* \u5404\u30bb\u30af\u30b7\u30e7\u30f3\u898b\u51fa\u3057 *\/\n    .sym_img_section_title {\n        font-weight: bold;\n        font-size: 1.2em;\n        border-bottom: 1px solid #ccc;\n        padding-bottom: 5px;\n        margin: 0 0 10px 0;\n    }\n    .sym_img_result_desc {\n        font-size: 0.9em;\n        color: #555;\n        margin: 0 0 10px 0;\n    }\n\n    \/* \u30d7\u30ec\u30d3\u30e5\u30fc\u3068\u7d50\u679c\u30a8\u30ea\u30a2 *\/\n    .sym_img_preview_wrapper {\n        margin-bottom: 30px;\n        text-align: center;\n    }\n    .sym_img_results_container {\n        display: flex;\n        gap: 20px;\n        margin-bottom: 20px;\n    }\n    .sym_img_result_box {\n        flex: 1;\n        min-width: 0;\n        text-align: center;\n    }\n\n    \/* \u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc *\/\n    .sym_img_canvas {\n        max-width: 100%;\n        height: auto;\n        display: block;\n        margin: 0 auto;\n        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), \n                          linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);\n        background-size: 20px 20px;\n        background-position: 0 0, 10px 10px;\n    }\n\n    #sym_img_preview_canvas {\n        max-width: 100%;\n        max-height: 450px;\n        width: auto;\n    }\n\n    \/* \u4fdd\u5b58\u30dc\u30bf\u30f3 *\/\n    .sym_img_btn {\n        background-color: #13284B;\n        color: #fff;\n        height: 44px;\n        border: none;\n        padding: 0 20px;\n        cursor: pointer;\n        width: 100%;\n        margin-top: 15px;\n        font-weight: bold;\n        font-size: 1em;\n        transition: opacity 0.2s;\n    }\n    .sym_img_btn:hover {\n        opacity: 0.8;\n    }\n\n    \/* \u30b9\u30de\u30db\u5411\u3051\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 *\/\n    @media (max-width: 600px) {\n        .sym_img_results_container {\n            flex-direction: column;\n        }\n    }\n    <\/style>\n\n    <div class=\"sym_img_container\" id=\"sym_img_app\">\n\n        <!-- \u5165\u529b\u30a8\u30ea\u30a2 -->\n        <div id=\"sym_img_drop_zone\" class=\"sym_img_upload_area\">\n            <p style=\"font-weight: bold; margin-bottom: 15px;\">\u753b\u50cf\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n            <button type=\"button\" id=\"sym_img_select_btn\" class=\"sym_img_btn\" style=\"width:auto; min-width:180px; margin-bottom:15px; margin-top:0;\">\u753b\u50cf\u3092\u9078\u629e<\/button>\n            <p style=\"font-size: 12px; color: #666; margin: 0 0 5px 0;\">\u203b\u3053\u3053\u306b\u753b\u50cf\u3092\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u304b\u3001\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u9078\u629e<\/p>\n            <p style=\"font-size: 12px; color: #666; margin: 0;\">\u203bJPEG\u30fbPNG\u30fbWebP\uff08\u6700\u592710MB\u307e\u3067\uff09<\/p>\n            <input type=\"file\" id=\"sym_img_file_input\" accept=\"image\/jpeg, image\/png, image\/webp\" style=\"display:none;\">\n        <\/div>\n        <p id=\"sym_img_error_msg\" class=\"sym_img_error\"><\/p>\n\n        <!-- \u30ef\u30fc\u30af\u30a8\u30ea\u30a2 (\u521d\u671f\u975e\u8868\u793a) -->\n        <div id=\"sym_img_work_area\" style=\"display:none;\">\n            \n            <div class=\"sym_img_controls\">\n                <div class=\"sym_img_control_group\">\n                    <p class=\"sym_img_control_label\">\u5bfe\u79f0\u30e2\u30fc\u30c9<\/p>\n                    <label class=\"sym_img_radio_label\">\n                        <input type=\"radio\" name=\"sym_img_mode\" value=\"horizontal\" checked> \u5de6\u53f3\u5bfe\u79f0\n                    <\/label>\n                    <label class=\"sym_img_radio_label\">\n                        <input type=\"radio\" name=\"sym_img_mode\" value=\"vertical\"> \u4e0a\u4e0b\u5bfe\u79f0\uff08\u6c34\u93e1\uff09\n                    <\/label>\n                <\/div>\n                \n                <div class=\"sym_img_control_group\">\n                    <p class=\"sym_img_control_label\">\u5206\u5272\u7dda\uff08\u5bfe\u79f0\u8ef8\uff09\u306e\u8abf\u6574<\/p>\n                    <input type=\"range\" id=\"sym_img_slider\" min=\"0\" max=\"100\" value=\"50\" class=\"sym_img_slider\">\n                <\/div>\n            <\/div>\n\n            <p class=\"sym_img_section_title\">\u5143\u753b\u50cf\u30d7\u30ec\u30d3\u30e5\u30fc<\/p>\n            <p class=\"sym_img_result_desc\">\u5206\u5272\u7dda\u3092\u52d5\u304b\u3057\u3066\u5bfe\u79f0\u8ef8\u306e\u4f4d\u7f6e\u3092\u8abf\u6574\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n            <div class=\"sym_img_preview_wrapper\">\n                <canvas id=\"sym_img_preview_canvas\" class=\"sym_img_canvas\"><\/canvas>\n            <\/div>\n\n            <div class=\"sym_img_results_container\">\n                <div class=\"sym_img_result_box\">\n                    <p class=\"sym_img_section_title\">\u751f\u6210\u7d50\u679cA<\/p>\n                    <p class=\"sym_img_result_desc\" id=\"sym_img_label_a_desc\">\u5de6\u5074\u3092\u57fa\u6e96\u306b\u53cd\u8ee2<\/p>\n                    <canvas id=\"sym_img_result_a_canvas\" class=\"sym_img_canvas\"><\/canvas>\n                    <button class=\"sym_img_btn\" id=\"sym_img_download_a\">\u7d50\u679cA\u3092\u4fdd\u5b58<\/button>\n                <\/div>\n                <div class=\"sym_img_result_box\">\n                    <p class=\"sym_img_section_title\">\u751f\u6210\u7d50\u679cB<\/p>\n                    <p class=\"sym_img_result_desc\" id=\"sym_img_label_b_desc\">\u53f3\u5074\u3092\u57fa\u6e96\u306b\u53cd\u8ee2<\/p>\n                    <canvas id=\"sym_img_result_b_canvas\" class=\"sym_img_canvas\"><\/canvas>\n                    <button class=\"sym_img_btn\" id=\"sym_img_download_b\">\u7d50\u679cB\u3092\u4fdd\u5b58<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    (function(){\n        \/\/ XSS\u5bfe\u7b56\u7528\u30a8\u30b9\u30b1\u30fc\u30d7\u95a2\u6570\n        function sym_img_escapeHTML(str) {\n            return String(str).replace(\/[&<>\"']\/g, function(match) {\n                const map = {\n                    '&': '&' + 'amp;',\n                    '<': '&#038;' + 'lt;',\n                    '>': '&' + 'gt;',\n                    '\"': '&' + 'quot;',\n                    \"'\": '&' + '#39;'\n                };\n                return map[match];\n            });\n        }\n\n        \/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\n        let sym_img_originalImg = null;\n        let sym_img_baseFileName = \"symmetry\";\n\n        \/\/ DOM\u8981\u7d20\n        const fileInput = document.getElementById('sym_img_file_input');\n        const dropZone = document.getElementById('sym_img_drop_zone');\n        const selectBtn = document.getElementById('sym_img_select_btn');\n        const errorMsg = document.getElementById('sym_img_error_msg');\n        const workArea = document.getElementById('sym_img_work_area');\n        const modeRadios = document.getElementsByName('sym_img_mode');\n        const slider = document.getElementById('sym_img_slider');\n        \n        const previewCanvas = document.getElementById('sym_img_preview_canvas');\n        const resultACanvas = document.getElementById('sym_img_result_a_canvas');\n        const resultBCanvas = document.getElementById('sym_img_result_b_canvas');\n        const ctxPreview = previewCanvas.getContext('2d', { willReadFrequently: true });\n        const ctxA = resultACanvas.getContext('2d');\n        const ctxB = resultBCanvas.getContext('2d');\n\n        const labelADesc = document.getElementById('sym_img_label_a_desc');\n        const labelBDesc = document.getElementById('sym_img_label_b_desc');\n        const btnDownloadA = document.getElementById('sym_img_download_a');\n        const btnDownloadB = document.getElementById('sym_img_download_b');\n\n        \/\/ \u521d\u671f\u5316\n        document.addEventListener('DOMContentLoaded', () => {\n            \/\/ \u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u95a2\u9023\u30a4\u30d9\u30f3\u30c8\n            dropZone.addEventListener('click', () => fileInput.click());\n            \n            \/\/ \u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\uff08\u89aa\u3078\u306e\u4f1d\u64ad\u3092\u9632\u304e\u3064\u3064\u3001\u30c0\u30a4\u30a2\u30ed\u30b0\u3092\u958b\u304f\uff09\n            selectBtn.addEventListener('click', (e) => {\n                e.stopPropagation(); \/\/ \u91cd\u8907\u767a\u706b\u3092\u9632\u6b62\n                fileInput.click();\n            });\n            \n            dropZone.addEventListener('dragover', (e) => {\n                e.preventDefault();\n                dropZone.classList.add('sym_img_dragover');\n            });\n            dropZone.addEventListener('dragleave', () => {\n                dropZone.classList.remove('sym_img_dragover');\n            });\n            dropZone.addEventListener('drop', (e) => {\n                e.preventDefault();\n                dropZone.classList.remove('sym_img_dragover');\n                if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n                    sym_img_handleFile(e.dataTransfer.files[0]);\n                }\n            });\n            \n            fileInput.addEventListener('change', (e) => {\n                if (e.target.files && e.target.files.length > 0) {\n                    sym_img_handleFile(e.target.files[0]);\n                }\n                fileInput.value = ''; \/\/ \u30ea\u30bb\u30c3\u30c8\n            });\n\n            \/\/ UI\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u30a4\u30d9\u30f3\u30c8\n            Array.from(modeRadios).forEach(radio => {\n                radio.addEventListener('change', () => {\n                    sym_img_updateLabels();\n                    sym_img_processImages();\n                });\n            });\n            \n            slider.addEventListener('input', () => {\n                sym_img_processImages();\n            });\n\n            \/\/ \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u30dc\u30bf\u30f3\u30a4\u30d9\u30f3\u30c8\n            btnDownloadA.addEventListener('click', () => sym_img_downloadFile(resultACanvas, 'A'));\n            btnDownloadB.addEventListener('click', () => sym_img_downloadFile(resultBCanvas, 'B'));\n        });\n\n        \/\/ \u30d5\u30a1\u30a4\u30eb\u691c\u8a3c\u3068\u8aad\u307f\u8fbc\u307f\n        function sym_img_handleFile(file) {\n            errorMsg.textContent = '';\n            \n            const validTypes = ['image\/jpeg', 'image\/png', 'image\/webp'];\n            if (!validTypes.includes(file.type)) {\n                errorMsg.textContent = sym_img_escapeHTML('10MB\u4ee5\u4e0b\u306eJPEG\u3001PNG\u3001WebP\u753b\u50cf\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044');\n                return;\n            }\n\n            const maxSize = 10 * 1024 * 1024; \/\/ 10MB\n            if (file.size > maxSize) {\n                errorMsg.textContent = sym_img_escapeHTML('10MB\u4ee5\u4e0b\u306eJPEG\u3001PNG\u3001WebP\u753b\u50cf\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044');\n                return;\n            }\n\n            const dotIndex = file.name.lastIndexOf('.');\n            sym_img_baseFileName = dotIndex !== -1 ? file.name.substring(0, dotIndex) : file.name;\n            if (!sym_img_baseFileName) sym_img_baseFileName = 'image';\n\n            const reader = new FileReader();\n            reader.onload = (e) => {\n                const img = new Image();\n                img.onload = () => {\n                    sym_img_originalImg = img;\n                    workArea.style.display = 'block';\n                    slider.value = 50; \/\/ \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6642\u306f\u4e2d\u592e\u30ea\u30bb\u30c3\u30c8\n                    sym_img_updateLabels();\n                    sym_img_processImages();\n                };\n                img.onerror = () => {\n                    errorMsg.textContent = sym_img_escapeHTML('\u753b\u50cf\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002');\n                };\n                img.src = e.target.result;\n            };\n            reader.readAsDataURL(file);\n        }\n\n        \/\/ \u30e9\u30d9\u30eb\u306e\u52d5\u7684\u66f4\u65b0\n        function sym_img_updateLabels() {\n            const mode = document.querySelector('input[name=\"sym_img_mode\"]:checked').value;\n            if (mode === 'horizontal') {\n                labelADesc.textContent = sym_img_escapeHTML('\u5de6\u5074\u3092\u57fa\u6e96\u306b\u53cd\u8ee2');\n                labelBDesc.textContent = sym_img_escapeHTML('\u53f3\u5074\u3092\u57fa\u6e96\u306b\u53cd\u8ee2');\n            } else {\n                labelADesc.textContent = sym_img_escapeHTML('\u4e0a\u5074\u3092\u57fa\u6e96\u306b\u53cd\u8ee2');\n                labelBDesc.textContent = sym_img_escapeHTML('\u4e0b\u5074\u3092\u57fa\u6e96\u306b\u53cd\u8ee2');\n            }\n        }\n\n        \/\/ \u63cf\u753b\u51e6\u7406\u306e\u7d71\u5408\n        function sym_img_processImages() {\n            if (!sym_img_originalImg) return;\n            sym_img_drawPreview();\n            sym_img_generateSymmetry();\n        }\n\n        \/\/ \u30d7\u30ec\u30d3\u30e5\u30fc\u753b\u9762\u306e\u63cf\u753b\n        function sym_img_drawPreview() {\n            const img = sym_img_originalImg;\n            const w = img.width;\n            const h = img.height;\n            const mode = document.querySelector('input[name=\"sym_img_mode\"]:checked').value;\n            const ratio = parseFloat(slider.value) \/ 100;\n\n            previewCanvas.width = w;\n            previewCanvas.height = h;\n            \n            \/\/ \u5143\u753b\u50cf\u63cf\u753b\n            ctxPreview.clearRect(0, 0, w, h);\n            ctxPreview.drawImage(img, 0, 0);\n\n            \/\/ \u5206\u5272\u7dda\u306e\u63cf\u753b\n            ctxPreview.beginPath();\n            if (mode === 'horizontal') {\n                const cx = Math.floor(w * ratio);\n                ctxPreview.moveTo(cx, 0);\n                ctxPreview.lineTo(cx, h);\n            } else {\n                const cy = Math.floor(h * ratio);\n                ctxPreview.moveTo(0, cy);\n                ctxPreview.lineTo(w, cy);\n            }\n            \n            \/\/ \u753b\u50cf\u30b5\u30a4\u30ba\u306b\u5fdc\u3058\u305f\u898b\u3084\u3059\u3044\u592a\u3055\u3092\u8a08\u7b97\n            ctxPreview.lineWidth = Math.max(2, Math.floor(Math.max(w, h) \/ 250));\n            ctxPreview.strokeStyle = 'rgba(255, 0, 0, 0.8)';\n            ctxPreview.setLineDash([ctxPreview.lineWidth * 3, ctxPreview.lineWidth * 3]);\n            ctxPreview.stroke();\n            ctxPreview.setLineDash([]);\n        }\n\n        \/\/ \u30b7\u30f3\u30e1\u30c8\u30ea\u30fc\u753b\u50cf\u306e\u751f\u6210\n        function sym_img_generateSymmetry() {\n            const img = sym_img_originalImg;\n            const w = img.width;\n            const h = img.height;\n            const mode = document.querySelector('input[name=\"sym_img_mode\"]:checked').value;\n            const ratio = parseFloat(slider.value) \/ 100;\n\n            if (mode === 'horizontal') {\n                \/\/ \u30a8\u30e9\u30fc\u9632\u6b62\u306e\u30ac\u30fc\u30c9\u51e6\u7406\uff08\u6700\u5c0f1px\u78ba\u4fdd\uff09\n                let cx = Math.floor(w * ratio);\n                if (cx < 1) cx = 1;\n                if (cx >= w) cx = w - 1;\n\n                \/\/ \u7d50\u679cA\uff08\u5de6\u5074\u57fa\u6e96\uff09\n                const wA = cx * 2;\n                resultACanvas.width = wA;\n                resultACanvas.height = h;\n                ctxA.clearRect(0, 0, wA, h);\n                ctxA.drawImage(img, 0, 0, cx, h, 0, 0, cx, h); \/\/ \u5de6\u5074\n                ctxA.save();\n                ctxA.translate(wA, 0);\n                ctxA.scale(-1, 1);\n                ctxA.drawImage(img, 0, 0, cx, h, 0, 0, cx, h); \/\/ \u53cd\u8ee2\u5408\u6210\n                ctxA.restore();\n\n                \/\/ \u7d50\u679cB\uff08\u53f3\u5074\u57fa\u6e96\uff09\n                let rightW = w - cx;\n                if (rightW < 1) rightW = 1;\n                const wB = rightW * 2;\n                resultBCanvas.width = wB;\n                resultBCanvas.height = h;\n                ctxB.clearRect(0, 0, wB, h);\n                ctxB.drawImage(img, cx, 0, rightW, h, rightW, 0, rightW, h); \/\/ \u53f3\u5074\n                ctxB.save();\n                ctxB.translate(rightW, 0);\n                ctxB.scale(-1, 1);\n                ctxB.drawImage(img, cx, 0, rightW, h, 0, 0, rightW, h); \/\/ \u53cd\u8ee2\u5408\u6210\n                ctxB.restore();\n\n            } else {\n                \/\/ \u4e0a\u4e0b\u5bfe\u79f0\u30e2\u30fc\u30c9\n                let cy = Math.floor(h * ratio);\n                if (cy < 1) cy = 1;\n                if (cy >= h) cy = h - 1;\n\n                \/\/ \u7d50\u679cA\uff08\u4e0a\u5074\u57fa\u6e96\uff09\n                const hA = cy * 2;\n                resultACanvas.width = w;\n                resultACanvas.height = hA;\n                ctxA.clearRect(0, 0, w, hA);\n                ctxA.drawImage(img, 0, 0, w, cy, 0, 0, w, cy); \/\/ \u4e0a\u5074\n                ctxA.save();\n                ctxA.translate(0, hA);\n                ctxA.scale(1, -1);\n                ctxA.drawImage(img, 0, 0, w, cy, 0, 0, w, cy); \/\/ \u53cd\u8ee2\u5408\u6210\n                ctxA.restore();\n\n                \/\/ \u7d50\u679cB\uff08\u4e0b\u5074\u57fa\u6e96\uff09\n                let bottomH = h - cy;\n                if (bottomH < 1) bottomH = 1;\n                const hB = bottomH * 2;\n                resultBCanvas.width = w;\n                resultBCanvas.height = hB;\n                ctxB.clearRect(0, 0, w, hB);\n                ctxB.drawImage(img, 0, cy, w, bottomH, 0, bottomH, w, bottomH); \/\/ \u4e0b\u5074\n                ctxB.save();\n                ctxB.translate(0, bottomH);\n                ctxB.scale(1, -1);\n                ctxB.drawImage(img, 0, cy, w, bottomH, 0, 0, w, bottomH); \/\/ \u53cd\u8ee2\u5408\u6210\n                ctxB.restore();\n            }\n        }\n\n        \/\/ Blob\u3092\u7528\u3044\u305f\u5b89\u5168\u306a\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u51e6\u7406\n        function sym_img_downloadFile(canvas, typeSuffix) {\n            canvas.toBlob(function(blob) {\n                if (!blob) return;\n                const url = URL.createObjectURL(blob);\n                const a = document.createElement('a');\n                a.href = url;\n                \/\/ \u4f8b: image_sym_A.png\n                a.download = sym_img_baseFileName + '_sym_' + typeSuffix + '.png';\n                document.body.appendChild(a);\n                a.click();\n                document.body.removeChild(a);\n                URL.revokeObjectURL(url);\n            }, 'image\/png');\n        }\n    })();\n    <\/script>\n<\/div>\n\n\n\n<p>\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u3060\u3051\u3067\u3001\u7c21\u5358\u306b\u5de6\u53f3\u5bfe\u79f0\uff08\u30b7\u30f3\u30e1\u30c8\u30ea\u30fc\uff09\u3084\u4e0a\u4e0b\u5bfe\u79f0\uff08\u6c34\u93e1\uff09\u306e\u753b\u50cf\u3092\u751f\u6210\u3067\u304d\u308b\u7121\u6599\u306e\u30d6\u30e9\u30a6\u30b6\u30c4\u30fc\u30eb\u3067\u3059\u3002\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u4e0d\u8981\u3067\u3001\u30b9\u30de\u30db\u3084PC\u304b\u3089\u3059\u3050\u306b\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-0\">\u3053\u306e\u30c4\u30fc\u30eb\u3067\u3067\u304d\u308b\u3053\u3068<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5de6\u53f3\u5bfe\u79f0\u30fb\u4e0a\u4e0b\u5bfe\u79f0\u306e\u753b\u50cf\u4f5c\u6210:<\/strong> \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u753b\u50cf\u3092\u5143\u306b\u3001\u5de6\u53f3\u3084\u4e0a\u4e0b\u304c\u53cd\u8ee2\u3057\u305f\u30b7\u30f3\u30e1\u30c8\u30ea\u30fc\u753b\u50cf\u3092\u81ea\u52d5\u3067\u751f\u6210\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u76f4\u611f\u7684\u306a\u5bfe\u79f0\u8ef8\u306e\u8abf\u6574:<\/strong> \u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u52d5\u304b\u3059\u3060\u3051\u3067\u3001\u753b\u50cf\u3092\u53cd\u8ee2\u3055\u305b\u308b\u57fa\u6e96\u3068\u306a\u308b\u7dda\uff08\u5206\u5272\u7dda\uff09\u306e\u4f4d\u7f6e\u3092\u81ea\u7531\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>2\u30d1\u30bf\u30fc\u30f3\u306e\u540c\u6642\u751f\u6210:<\/strong> \u6307\u5b9a\u3057\u305f\u5206\u5272\u7dda\u3092\u57fa\u6e96\u306b\u3001\u300c\u5de6\uff08\u4e0a\uff09\u3092\u53cd\u8ee2\u3055\u305b\u305f\u753b\u50cf\u300d\u3068\u300c\u53f3\uff08\u4e0b\uff09\u3092\u53cd\u8ee2\u3055\u305b\u305f\u753b\u50cf\u300d\u306e2\u30d1\u30bf\u30fc\u30f3\u3092\u540c\u6642\u306b\u30d7\u30ec\u30d3\u30e5\u30fc\u3057\u3001\u597d\u304d\u306a\u65b9\u3092\u4fdd\u5b58\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-1\">\u30c4\u30fc\u30eb\u306e\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>\u753b\u50cf\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9:<\/strong> \u300c\u753b\u50cf\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u300d\u306e\u30a8\u30ea\u30a2\u306b\u753b\u50cf\u3092\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u304b\u3001\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u52a0\u5de5\u3057\u305f\u3044\u753b\u50cf\uff08JPEG\u30fbPNG\u30fbWebP\uff09\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5bfe\u79f0\u30e2\u30fc\u30c9\u306e\u9078\u629e:<\/strong> \u300c\u5de6\u53f3\u5bfe\u79f0\u300d\u307e\u305f\u306f\u300c\u4e0a\u4e0b\u5bfe\u79f0\uff08\u6c34\u93e1\uff09\u300d\u304b\u3089\u3001\u4f5c\u6210\u3057\u305f\u3044\u753b\u50cf\u306e\u65b9\u5411\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5206\u5272\u7dda\uff08\u5bfe\u79f0\u8ef8\uff09\u306e\u8abf\u6574:<\/strong> \u300c\u5143\u753b\u50cf\u30d7\u30ec\u30d3\u30e5\u30fc\u300d\u306b\u8d64\u3044\u70b9\u7dda\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u5de6\u53f3\u306b\u52d5\u304b\u3057\u3001\u53cd\u8ee2\u306e\u57fa\u6e96\u306b\u3057\u305f\u3044\u4f4d\u7f6e\u306b\u7dda\u3092\u5408\u308f\u305b\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u753b\u50cf\u306e\u4fdd\u5b58:<\/strong> \u300c\u751f\u6210\u7d50\u679cA\u300d\u300c\u751f\u6210\u7d50\u679cB\u300d\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u78ba\u8a8d\u3057\u3001\u6c17\u306b\u5165\u3063\u305f\u753b\u50cf\u306e\u4e0b\u306b\u3042\u308b\u300c\u4fdd\u5b58\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-2\">\u30b7\u30f3\u30e1\u30c8\u30ea\u30fc\uff08\u5bfe\u79f0\uff09\u753b\u50cf\u306e\u57fa\u790e\u77e5\u8b58<\/h2>\n\n\n\n<p>\u30c4\u30fc\u30eb\u3092\u5229\u7528\u3059\u308b\u4e0a\u3067\u77e5\u3063\u3066\u304a\u304f\u3068\u4fbf\u5229\u306a\u3001\u753b\u50cf\u52a0\u5de5\u306b\u304a\u3051\u308b\u300c\u5bfe\u79f0\u300d\u306e\u57fa\u790e\u77e5\u8b58\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5de6\u53f3\u5bfe\u79f0\uff08\u7dda\u5bfe\u79f0\uff09<\/strong> \u753b\u50cf\u306e\u4e2d\u5fc3\u306a\u3069\u3001\u5782\u76f4\u306a\u76f4\u7dda\u3092\u57fa\u6e96\u306b\u3057\u3066\u5de6\u53f3\u3092\u53cd\u8ee2\u3055\u305b\u305f\u72b6\u614b\u3067\u3059\u3002\u5efa\u7bc9\u7269\u3084\u6b63\u9762\u3092\u5411\u3044\u305f\u52d5\u7269\u30fb\u4eba\u306e\u9854\u306a\u3069\u306b\u898b\u3089\u308c\u308b\u69cb\u6210\u3067\u3001\u5b89\u5b9a\u611f\u3084\u7f8e\u3057\u3055\u3092\u611f\u3058\u3055\u305b\u308b\u52b9\u679c\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u4e0a\u4e0b\u5bfe\u79f0\uff08\u6c34\u93e1\u30fb\u30ea\u30d5\u30ec\u30af\u30b7\u30e7\u30f3\uff09<\/strong> \u6c34\u5e73\u306a\u76f4\u7dda\u3092\u57fa\u6e96\u306b\u3057\u3066\u4e0a\u4e0b\u3092\u53cd\u8ee2\u3055\u305b\u305f\u72b6\u614b\u3067\u3059\u3002\u6e56\u9762\u306b\u98a8\u666f\u304c\u53cd\u5c04\u3057\u3066\u6620\u308a\u8fbc\u3093\u3067\u3044\u308b\u3088\u3046\u306a\u3001\u3044\u308f\u3086\u308b\u300c\u30a6\u30e6\u30cb\u5869\u6e56\u98a8\u300d\u306e\u5e7b\u60f3\u7684\u306a\u5199\u771f\u3092\u4f5c\u308b\u969b\u306b\u3088\u304f\u7528\u3044\u3089\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5bfe\u79f0\u8ef8\uff08\u5206\u5272\u7dda\uff09<\/strong> \u753b\u50cf\u3092\u53cd\u8ee2\u3055\u305b\u308b\u969b\u306e\u300c\u6298\u308a\u76ee\u300d\u3068\u306a\u308b\u7dda\u306e\u3053\u3068\u3067\u3059\u3002\u5f53\u30c4\u30fc\u30eb\u3067\u306f\u3053\u306e\u5bfe\u79f0\u8ef8\u3092\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u81ea\u7531\u306b\u52d5\u304b\u305b\u308b\u305f\u3081\u3001\u88ab\u5199\u4f53\u306e\u4e2d\u5fc3\u304b\u3089\u305a\u3089\u3057\u3066\u4e0d\u601d\u8b70\u306a\u69cb\u56f3\u3092\u4f5c\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">\u3053\u306e\u30c4\u30fc\u30eb\u304c\u5f79\u7acb\u3064\u3068\u304d\u306f\u3069\u3093\u306a\u3068\u304d\uff1f\u3000\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u306f\uff1f<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u98a8\u666f\u5199\u771f\u3092\u5e7b\u60f3\u7684\u306b\u52a0\u5de5\u3057\u305f\u3044\u3068\u304d:<\/strong> \u6c34\u8fba\u3067\u64ae\u5f71\u3057\u305f\u5199\u771f\u306e\u4e0a\u4e0b\u3092\u53cd\u8ee2\u3055\u305b\u3001\u7f8e\u3057\u3044\u6c34\u93e1\uff08\u30ea\u30d5\u30ec\u30af\u30b7\u30e7\u30f3\uff09\u5199\u771f\u3092\u4f5c\u308a\u305f\u3044\u5834\u5408\u306b\u6700\u9069\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u9762\u767d\u3044SNS\u7528\u753b\u50cf\u3092\u4f5c\u308a\u305f\u3044\u3068\u304d:<\/strong> \u53cb\u4eba\u306e\u9854\u5199\u771f\u3084\u30da\u30c3\u30c8\u306e\u5199\u771f\u3092\u5de6\u53f3\u5bfe\u79f0\u306b\u3059\u308b\u3053\u3068\u3067\u3001\u666e\u6bb5\u3068\u306f\u9055\u3046\u30b3\u30df\u30ab\u30eb\u3067\u4e0d\u601d\u8b70\u306a\u753b\u50cf\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30c7\u30b6\u30a4\u30f3\u7d20\u6750\u3084\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u4f5c\u308a\u305f\u3044\u3068\u304d:<\/strong> \u4f55\u6c17\u306a\u3044\u6a21\u69d8\u3084\u98a8\u666f\u3092\u30b7\u30f3\u30e1\u30c8\u30ea\u30fc\u5316\u3059\u308b\u3053\u3068\u3067\u3001\u5e7e\u4f55\u5b66\u7684\u3067\u7f8e\u3057\u3044\u80cc\u666f\u7d20\u6750\u3084\u30d1\u30bf\u30fc\u30f3\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30a4\u30e9\u30b9\u30c8\u306e\u30d0\u30e9\u30f3\u30b9\u3092\u78ba\u8a8d\u3057\u305f\u3044\u3068\u304d:<\/strong> \u63cf\u3044\u305f\u30a4\u30e9\u30b9\u30c8\u306e\u5de6\u53f3\u306e\u30d0\u30e9\u30f3\u30b9\uff08\u30c7\u30c3\u30b5\u30f3\u72c2\u3044\uff09\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u305f\u3081\u306e\u53cd\u8ee2\u30c4\u30fc\u30eb\u3068\u3057\u3066\u3082\u6d3b\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-4\">\u3088\u304f\u3042\u308b\u8cea\u554f\u30fb\u6ce8\u610f\u70b9<\/h2>\n\n\n\n<p><strong>\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u30d5\u30a1\u30a4\u30eb\u5f62\u5f0f\u3068\u5bb9\u91cf\u306f\uff1f<\/strong> JPEG\u3001PNG\u3001WebP\u5f62\u5f0f\u306b\u5bfe\u5fdc\u3057\u3066\u304a\u308a\u3001\u6700\u592710MB\u307e\u3067\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u753b\u50cf\u306f\u5916\u90e8\u306b\u6d41\u51fa\u3057\u307e\u305b\u3093\u304b\uff1f<\/strong> \u5f53\u30c4\u30fc\u30eb\u306f\u3001\u3059\u3079\u3066\u3054\u5229\u7528\u306e\u7aef\u672b\uff08\u30d6\u30e9\u30a6\u30b6\uff09\u306e\u5185\u90e8\u3067\u51e6\u7406\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002\u753b\u50cf\u30c7\u30fc\u30bf\u304c\u5916\u90e8\u306e\u30b5\u30fc\u30d0\u30fc\u306b\u9001\u4fe1\u30fb\u4fdd\u5b58\u3055\u308c\u308b\u3053\u3068\u306f\u4e00\u5207\u3042\u308a\u307e\u305b\u3093\u306e\u3067\u3001\u5b89\u5fc3\u3057\u3066\u3054\u5229\u7528\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u753b\u50cf\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044 \u753b\u50cf\u3092\u9078\u629e \u203b\u3053\u3053\u306b\u753b\u50cf\u3092\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u304b\u3001\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u9078\u629e \u203bJPEG\u30fbPNG\u30fbWebP\uff08\u6700\u592710MB\u307e\u3067\uff09 \u5bfe\u79f0\u30e2\u30fc\u30c9 \u5de6\u53f3\u5bfe\u79f0 \u4e0a\u4e0b\u5bfe\u79f0\uff08\u6c34\u93e1\uff09 \u5206\u5272\u7dda\uff08\u5bfe\u79f0\u8ef8\uff09\u306e\u8abf\u6574 \u5143\u753b\u50cf\u30d7\u30ec &#8230; <\/p>\n","protected":false},"author":4,"featured_media":14480,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,60,58],"tags":[],"class_list":{"0":"post-14471","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tool","8":"category-design","9":"category-generation","10":"entry"},"_links":{"self":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/14471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/comments?post=14471"}],"version-history":[{"count":7,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/14471\/revisions"}],"predecessor-version":[{"id":14482,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/14471\/revisions\/14482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/media\/14480"}],"wp:attachment":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/media?parent=14471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/categories?post=14471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/tags?post=14471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}