{"id":15717,"date":"2026-07-10T12:29:53","date_gmt":"2026-07-10T03:29:53","guid":{"rendered":"https:\/\/rakkokeyword.com\/techo\/?p=15717"},"modified":"2026-07-10T12:29:54","modified_gmt":"2026-07-10T03:29:54","slug":"tool-image-color","status":"publish","type":"post","link":"https:\/\/rakkokeyword.com\/techo\/tool-image-color\/","title":{"rendered":"\u753b\u50cf\u304b\u3089\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u62bd\u51fa\u30c4\u30fc\u30eb"},"content":{"rendered":"\n<div id=\"icce_app\" style=\"width: 100%;\">\n    <style>\n        .icce_container {\n            width: 100%;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            color: #333;\n            box-sizing: border-box;\n            margin-bottom: 40px;\n        }\n        .icce_container p {\n            margin: 0;\n            padding: 0;\n        }\n        .icce_btn {\n            background-color: #13284B;\n            color: #fff;\n            border: none;\n            height: 48px;\n            padding: 0 24px;\n            cursor: pointer;\n            border-radius: 4px;\n            font-size: 16px;\n            font-weight: bold;\n            transition: background-color 0.2s;\n        }\n        .icce_btn:hover {\n            background-color: #0d1e38;\n        }\n        .icce_btn_secondary {\n            background-color: #666;\n            color: #fff;\n            border: none;\n            height: 40px;\n            padding: 0 16px;\n            cursor: pointer;\n            border-radius: 4px;\n            font-size: 14px;\n        }\n        .icce_btn_secondary:hover {\n            background-color: #555;\n        }\n        .icce_drop_zone {\n            border: 2px dashed #999;\n            background-color: #fafafa;\n            text-align: center;\n            padding: 40px 20px;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: background-color 0.2s, border-color 0.2s;\n        }\n        .icce_drop_zone:hover, .icce_dragover {\n            background-color: #eee;\n            border-color: #666;\n        }\n        .icce_drop_title {\n            font-size: 16px;\n            font-weight: bold;\n            margin-bottom: 12px !important;\n            color: #333;\n        }\n        .icce_supported_formats {\n            font-size: 12px;\n            color: #666;\n            margin-bottom: 16px !important;\n        }\n        .icce_error_msg {\n            color: #d32f2f;\n            font-size: 14px;\n            margin-top: 8px;\n            text-align: center;\n            display: none;\n        }\n        .icce_workspace {\n            display: none;\n        }\n        .icce_instruction {\n            font-size: 14px;\n            color: #666;\n            margin-bottom: 12px !important;\n            text-align: center;\n        }\n        .icce_result_area {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 20px;\n            background: #f5f5f5;\n            padding: 20px;\n            border-radius: 4px;\n            margin-bottom: 20px;\n        }\n        .icce_primary_result {\n            display: flex;\n            gap: 16px;\n            align-items: center;\n            flex: 1;\n            min-width: 250px;\n        }\n        .icce_preview_box {\n            width: 72px;\n            height: 72px;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            background-color: #ffffff;\n            flex-shrink: 0;\n        }\n        .icce_hex_container {\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n        }\n        .icce_secondary_result {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n            flex: 1;\n            min-width: 200px;\n            justify-content: center;\n        }\n        .icce_val_row {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n        .icce_label {\n            font-size: 12px;\n            color: #666;\n            font-weight: bold;\n        }\n        .icce_hex_display {\n            font-size: 32px;\n            font-weight: bold;\n            font-family: monospace;\n            letter-spacing: 1px;\n            color: #000;\n        }\n        .icce_text_value {\n            font-size: 18px;\n            font-family: monospace;\n            color: #333;\n        }\n        .icce_name_value {\n            font-size: 16px;\n            font-weight: bold;\n            color: #333;\n        }\n        .icce_copy_icon {\n            cursor: pointer;\n            background: #e0e0e0;\n            color: #333;\n            border: none;\n            padding: 6px 12px;\n            border-radius: 4px;\n            font-size: 12px;\n            font-weight: bold;\n        }\n        .icce_copy_icon:hover {\n            background: #d0d0d0;\n        }\n        .icce_canvas_wrapper {\n            position: relative;\n            width: 100%;\n            overflow: hidden;\n            background: #f5f5f5;\n            border-radius: 4px;\n            margin-bottom: 16px;\n            display: flex;\n            justify-content: center;\n        }\n        .icce_canvas {\n            display: block;\n            max-width: 100%;\n            height: auto;\n            cursor: crosshair;\n            touch-action: none;\n        }\n        .icce_marker {\n            position: absolute;\n            width: 18px;\n            height: 18px;\n            border: 2px solid #fff;\n            box-shadow: 0 0 4px rgba(0,0,0,0.8), inset 0 0 2px rgba(0,0,0,0.5);\n            border-radius: 50%;\n            transform: translate(-50%, -50%);\n            pointer-events: none;\n            display: none;\n        }\n        .icce_overlay {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background: rgba(0, 0, 0, 0.8);\n            color: #fff;\n            padding: 16px 24px;\n            border-radius: 8px;\n            text-align: center;\n            font-size: 14px;\n            pointer-events: none; \/* \u4e0b\u306ecanvas\u3078\u306e\u30af\u30ea\u30c3\u30af\u3092\u900f\u904e *\/\n            display: none;\n            z-index: 10;\n            line-height: 1.5;\n        }\n        .icce_overlay_icon {\n            font-size: 24px;\n            display: block;\n            margin-bottom: 8px;\n        }\n        \/* Palette Styles *\/\n        .icce_palette_area {\n            margin-bottom: 20px;\n            background: #f5f5f5;\n            padding: 20px;\n            border-radius: 4px;\n        }\n        .icce_palette_title {\n            font-size: 14px;\n            font-weight: bold;\n            color: #666;\n            margin-bottom: 4px !important;\n        }\n        .icce_palette_desc {\n            font-size: 12px;\n            color: #888;\n            margin-bottom: 12px !important;\n        }\n        .icce_palette_list {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 10px;\n        }\n        .icce_palette_item {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            background: #fff;\n            padding: 8px 10px;\n            border-radius: 4px;\n            border: 1px solid #ddd;\n            box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n        }\n        .icce_palette_color {\n            width: 36px;\n            height: 36px;\n            border-radius: 4px;\n            border: 1px solid #ccc;\n            cursor: pointer;\n            flex-shrink: 0;\n            transition: transform 0.1s;\n        }\n        .icce_palette_color:hover {\n            transform: scale(1.05);\n            box-shadow: 0 0 4px rgba(0,0,0,0.2);\n        }\n        .icce_palette_info {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            gap: 2px;\n        }\n        .icce_palette_hex {\n            font-size: 14px;\n            font-weight: bold;\n            font-family: monospace;\n            color: #333;\n        }\n        .icce_palette_name {\n            font-size: 12px;\n            color: #444;\n            font-weight: bold;\n        }\n        .icce_palette_rgb {\n            font-size: 11px;\n            color: #666;\n            font-family: monospace;\n        }\n        .icce_palette_copy {\n            cursor: pointer;\n            background: #e0e0e0;\n            color: #333;\n            border: none;\n            padding: 6px 10px;\n            border-radius: 4px;\n            font-size: 12px;\n            font-weight: bold;\n            flex-shrink: 0;\n        }\n        .icce_palette_copy:hover {\n            background: #d0d0d0;\n        }\n        @media (max-width: 480px) {\n            .icce_result_area { flex-direction: column; gap: 16px; }\n            .icce_primary_result { min-width: 100%; }\n            .icce_secondary_result { min-width: 100%; border-top: 1px solid #ddd; padding-top: 16px; }\n            .icce_hex_display { font-size: 26px; }\n            .icce_palette_list { grid-template-columns: 1fr; }\n        }\n    <\/style>\n\n    <div class=\"icce_container\" id=\"icce_main_container\">\n        \n        <!-- \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u30a8\u30ea\u30a2 -->\n        <div id=\"icce_drop_zone\" class=\"icce_drop_zone\">\n            <p class=\"icce_drop_title\">\u753b\u50cf\u3092\u9078\u629e\u307e\u305f\u306f\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7<\/p>\n            <p class=\"icce_supported_formats\">\u5bfe\u5fdc\u5f62\u5f0f\uff1aJPEG\uff08.jpg\/.jpeg\uff09\u3001PNG\u3001GIF\u3001WebP<\/p>\n            <input type=\"file\" id=\"icce_file_input\" accept=\"image\/*\" style=\"display:none;\">\n            <button id=\"icce_select_btn\" class=\"icce_btn\">\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e<\/button>\n        <\/div>\n        <p id=\"icce_error_msg\" class=\"icce_error_msg\"><\/p>\n        \n        <!-- \u4f5c\u696d\u30a8\u30ea\u30a2 -->\n        <div id=\"icce_workspace\" class=\"icce_workspace\">\n            <p class=\"icce_instruction\">\u753b\u50cf\u4e0a\u306e\u8272\u3092\u77e5\u308a\u305f\u3044\u5834\u6240\u3092\u30af\u30ea\u30c3\u30af\uff08\u30b9\u30de\u30db\u306f\u30bf\u30c3\u30d7\uff09\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n            \n            <div class=\"icce_result_area\">\n                <div class=\"icce_primary_result\">\n                    <div id=\"icce_color_preview\" class=\"icce_preview_box\"><\/div>\n                    <div class=\"icce_hex_container\">\n                        <p class=\"icce_label\">HEX (\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9)<\/p>\n                        <div class=\"icce_val_row\">\n                            <p id=\"icce_hex_value\" class=\"icce_hex_display\">#\u2014\u2014<\/p>\n                            <button class=\"icce_copy_icon\" data-copy=\"icce_hex_value\">\u30b3\u30d4\u30fc<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"icce_secondary_result\">\n                    <div class=\"icce_info_group\">\n                        <p class=\"icce_label\">RGB<\/p>\n                        <div class=\"icce_val_row\">\n                            <p id=\"icce_rgb_value\" class=\"icce_text_value\">\u2014, \u2014, \u2014<\/p>\n                            <button class=\"icce_copy_icon\" data-copy=\"icce_rgb_value\">\u30b3\u30d4\u30fc<\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"icce_info_group\">\n                        <p class=\"icce_label\">\u8fd1\u4f3c\u8272\u540d<\/p>\n                        <p id=\"icce_name_value\" class=\"icce_name_value\">\u2014<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"icce_canvas_wrapper\" id=\"icce_canvas_wrapper\">\n                <canvas id=\"icce_canvas\" class=\"icce_canvas\"><\/canvas>\n                <div id=\"icce_overlay\" class=\"icce_overlay\">\n                    <span class=\"icce_overlay_icon\">\ud83c\udfa8<\/span>\n                    \u30af\u30ea\u30c3\u30af\uff08\u30bf\u30c3\u30d7\uff09\u3057\u3066\u8272\u3092\u53d6\u5f97\n                <\/div>\n                <div id=\"icce_marker\" class=\"icce_marker\"><\/div>\n            <\/div>\n            \n            <div class=\"icce_palette_area\" id=\"icce_palette_area\" style=\"display:none;\">\n                <p class=\"icce_palette_title\">\u4e3b\u8981\u30ab\u30e9\u30fc (\u81ea\u52d5\u62bd\u51fa)<\/p>\n                <p class=\"icce_palette_desc\">\u8272\u898b\u672c\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30e1\u30a4\u30f3\u9818\u57df\u306b\u53cd\u6620\u3055\u308c\u307e\u3059\u3002<\/p>\n                <div class=\"icce_palette_list\" id=\"icce_palette_list\"><\/div>\n            <\/div>\n            \n            <div style=\"text-align: center;\">\n                <button id=\"icce_reset_btn\" class=\"icce_btn_secondary\">\u5225\u306e\u753b\u50cf\u3092\u9078\u629e<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    (function(){\n        function init_icce() {\n            const dropZone = document.getElementById('icce_drop_zone');\n            const fileInput = document.getElementById('icce_file_input');\n            const selectBtn = document.getElementById('icce_select_btn');\n            const errorMsg = document.getElementById('icce_error_msg');\n            const workspace = document.getElementById('icce_workspace');\n            const canvasWrapper = document.getElementById('icce_canvas_wrapper');\n            const canvas = document.getElementById('icce_canvas');\n            const ctx = canvas.getContext('2d', { willReadFrequently: true });\n            const marker = document.getElementById('icce_marker');\n            const overlay = document.getElementById('icce_overlay');\n            const resetBtn = document.getElementById('icce_reset_btn');\n            \n            \/\/ \u51fa\u529b\u5148\u8981\u7d20\n            const colorPreview = document.getElementById('icce_color_preview');\n            const hexValue = document.getElementById('icce_hex_value');\n            const rgbValue = document.getElementById('icce_rgb_value');\n            const nameValue = document.getElementById('icce_name_value');\n            \n            const paletteArea = document.getElementById('icce_palette_area');\n            const paletteList = document.getElementById('icce_palette_list');\n\n            \/\/ XSS\u5bfe\u7b56\u30a8\u30b9\u30b1\u30fc\u30d7\u95a2\u6570\n            function icce_escapeHtml(str) {\n                if (typeof str !== 'string') return str;\n                return str.replace(\/[&'`\"<>]\/g, function(match) {\n                    switch(match) {\n                        case '&': return '&' + 'amp;';\n                        case \"'\": return '&' + '#x27;';\n                        case '`': return '&' + '#x60;';\n                        case '\"': return '&' + 'quot;';\n                        case '<': return '&#038;' + 'lt;';\n                        case '>': return '&' + 'gt;';\n                        default: return match;\n                    }\n                });\n            }\n\n            \/\/ \u4ee3\u8868\u7684\u306a\u8272\u540d\u8f9e\u66f8\uff08RGB\uff09\n            const colorDict = [\n                { n: \"\u30d6\u30e9\u30c3\u30af\", r: 0, g: 0, b: 0 },\n                { n: \"\u30db\u30ef\u30a4\u30c8\", r: 255, g: 255, b: 255 },\n                { n: \"\u30ec\u30c3\u30c9\", r: 255, g: 0, b: 0 },\n                { n: \"\u30b0\u30ea\u30fc\u30f3\", r: 0, g: 128, b: 0 },\n                { n: \"\u30d6\u30eb\u30fc\", r: 0, g: 0, b: 255 },\n                { n: \"\u30a4\u30a8\u30ed\u30fc\", r: 255, g: 255, b: 0 },\n                { n: \"\u30b7\u30a2\u30f3\", r: 0, g: 255, b: 255 },\n                { n: \"\u30de\u30bc\u30f3\u30bf\", r: 255, g: 0, b: 255 },\n                { n: \"\u30b0\u30ec\u30fc\", r: 128, g: 128, b: 128 },\n                { n: \"\u30b7\u30eb\u30d0\u30fc\", r: 192, g: 192, b: 192 },\n                { n: \"\u30de\u30eb\u30fc\u30f3\", r: 128, g: 0, b: 0 },\n                { n: \"\u30aa\u30ea\u30fc\u30d6\", r: 128, g: 128, b: 0 },\n                { n: \"\u30cd\u30a4\u30d3\u30fc\", r: 0, g: 0, b: 128 },\n                { n: \"\u30d1\u30fc\u30d7\u30eb\", r: 128, g: 0, b: 128 },\n                { n: \"\u30c6\u30a3\u30fc\u30eb\", r: 0, g: 128, b: 128 },\n                { n: \"\u30aa\u30ec\u30f3\u30b8\", r: 255, g: 165, b: 0 },\n                { n: \"\u30d4\u30f3\u30af\", r: 255, g: 192, b: 203 },\n                { n: \"\u30d6\u30e9\u30a6\u30f3\", r: 165, g: 42, b: 42 },\n                { n: \"\u30e9\u30a4\u30c8\u30d6\u30eb\u30fc\", r: 173, g: 216, b: 230 },\n                { n: \"\u30a4\u30a8\u30ed\u30fc\u30b0\u30ea\u30fc\u30f3\", r: 154, g: 205, b: 50 },\n                { n: \"\u30b4\u30fc\u30eb\u30c9\", r: 255, g: 215, b: 0 },\n                { n: \"\u30d9\u30fc\u30b8\u30e5\", r: 245, g: 245, b: 220 },\n                { n: \"\u30a2\u30a4\u30dc\u30ea\u30fc\", r: 255, g: 255, b: 240 },\n                { n: \"\u30b5\u30fc\u30e2\u30f3\u30d4\u30f3\u30af\", r: 250, g: 128, b: 114 },\n                { n: \"\u30ab\u30fc\u30ad\", r: 240, g: 230, b: 140 },\n                { n: \"\u30bf\u30fc\u30b3\u30a4\u30ba\", r: 64, g: 224, b: 208 },\n                { n: \"\u30b9\u30ab\u30a4\u30d6\u30eb\u30fc\", r: 135, g: 206, b: 235 }\n            ];\n\n            function getNearestColorName(r, g, b) {\n                let minDist = Infinity;\n                let nearestName = \"\u4e0d\u660e\";\n                for (let i = 0; i < colorDict.length; i++) {\n                    const c = colorDict[i];\n                    const dist = Math.sqrt(Math.pow(r - c.r, 2) + Math.pow(g - c.g, 2) + Math.pow(b - c.b, 2));\n                    if (dist < minDist) {\n                        minDist = dist;\n                        nearestName = c.n;\n                    }\n                }\n                return nearestName;\n            }\n\n            function rgbToHex(r, g, b) {\n                return \"#\" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase();\n            }\n\n            function copyToClipboard(textToCopy, buttonElement) {\n                if(textToCopy === '#------' || textToCopy.includes('---')) return;\n                \n                const changeButtonText = () => {\n                    if (buttonElement) {\n                        const originalText = buttonElement.textContent;\n                        buttonElement.textContent = '\u30b3\u30d4\u30fc\u6e08\u307f\uff01';\n                        setTimeout(() => {\n                            buttonElement.textContent = originalText;\n                        }, 2000);\n                    }\n                };\n\n                const textarea = document.createElement('textarea');\n                textarea.value = textToCopy;\n                textarea.style.position = 'fixed';\n                textarea.style.opacity = '0';\n                document.body.appendChild(textarea);\n                textarea.select();\n                try {\n                    document.execCommand('copy');\n                    changeButtonText();\n                } catch (err) {}\n                document.body.removeChild(textarea);\n            }\n\n            \/\/ UI\u53cd\u6620\u95a2\u6570\n            function updateMainResult(r, g, b, showMarker = false, markerX = 0, markerY = 0) {\n                const hex = rgbToHex(r, g, b);\n                const rgbStr = `${r}, ${g}, ${b}`;\n                const colorName = getNearestColorName(r, g, b);\n\n                colorPreview.style.backgroundColor = hex;\n                hexValue.textContent = hex;\n                rgbValue.textContent = rgbStr;\n                nameValue.textContent = colorName;\n\n                if (showMarker) {\n                    marker.style.left = markerX + 'px';\n                    marker.style.top = markerY + 'px';\n                    marker.style.display = 'block';\n                } else {\n                    marker.style.display = 'none';\n                }\n            }\n\n            \/\/ \u4e3b\u8981\u30ab\u30e9\u30fc\u62bd\u51fa\u51e6\u7406\n            function extractPalette(canvasCtx, width, height) {\n                const step = Math.max(1, Math.floor((width * height) \/ 10000));\n                const data = canvasCtx.getImageData(0, 0, width, height).data;\n                const colors = [];\n                \n                for (let i = 0; i < data.length; i += step * 4) {\n                    if (data[i+3] < 128) continue; \/\/ \u900f\u660e\u306b\u8fd1\u3044\u8272\u306f\u7121\u8996\n                    colors.push({r: data[i], g: data[i+1], b: data[i+2]});\n                }\n\n                const buckets = {};\n                const Q = 32;\n                colors.forEach(c => {\n                    const rq = Math.floor(c.r \/ Q) * Q;\n                    const gq = Math.floor(c.g \/ Q) * Q;\n                    const bq = Math.floor(c.b \/ Q) * Q;\n                    const key = `${rq},${gq},${bq}`;\n                    if (!buckets[key]) buckets[key] = {r:0, g:0, b:0, count:0};\n                    buckets[key].r += c.r;\n                    buckets[key].g += c.g;\n                    buckets[key].b += c.b;\n                    buckets[key].count++;\n                });\n\n                const sorted = Object.values(buckets).map(b => ({\n                    r: Math.round(b.r \/ b.count),\n                    g: Math.round(b.g \/ b.count),\n                    b: Math.round(b.b \/ b.count),\n                    count: b.count\n                })).sort((a, b) => b.count - a.count);\n\n                const THRESHOLD = 60;\n                const palette = [];\n                for (const c of sorted) {\n                    let similar = false;\n                    for (const p of palette) {\n                        const dist = Math.sqrt(Math.pow(c.r - p.r, 2) + Math.pow(c.g - p.g, 2) + Math.pow(c.b - p.b, 2));\n                        if (dist < THRESHOLD) {\n                            similar = true;\n                            break;\n                        }\n                    }\n                    if (!similar) {\n                        palette.push(c);\n                        if (palette.length >= 8) break; \/\/ \u6700\u59278\u8272\n                    }\n                }\n                return palette;\n            }\n\n            function renderPalette(palette) {\n                paletteList.innerHTML = '';\n                if (palette.length === 0) {\n                    paletteArea.style.display = 'none';\n                    return;\n                }\n                paletteArea.style.display = 'block';\n                \n                palette.forEach((c, index) => {\n                    const hex = rgbToHex(c.r, c.g, c.b);\n                    const rgbStr = `${c.r}, ${c.g}, ${c.b}`;\n                    const colorName = getNearestColorName(c.r, c.g, c.b);\n                    \n                    const item = document.createElement('div');\n                    item.className = 'icce_palette_item';\n                    \n                    const colorBox = document.createElement('div');\n                    colorBox.className = 'icce_palette_color';\n                    colorBox.style.backgroundColor = hex;\n                    colorBox.title = '\u30e1\u30a4\u30f3\u306b\u53cd\u6620';\n                    colorBox.addEventListener('click', () => {\n                        updateMainResult(c.r, c.g, c.b, false);\n                    });\n                    \n                    const info = document.createElement('div');\n                    info.className = 'icce_palette_info';\n                    \n                    const hexEl = document.createElement('div');\n                    hexEl.className = 'icce_palette_hex';\n                    hexEl.textContent = hex;\n                    hexEl.id = `icce_palette_hex_${index}`;\n                    \n                    const nameEl = document.createElement('div');\n                    nameEl.className = 'icce_palette_name';\n                    nameEl.textContent = colorName;\n                    \n                    const rgbEl = document.createElement('div');\n                    rgbEl.className = 'icce_palette_rgb';\n                    rgbEl.textContent = `RGB: ${rgbStr}`;\n                    \n                    const copyBtn = document.createElement('button');\n                    copyBtn.className = 'icce_palette_copy';\n                    copyBtn.textContent = '\u30b3\u30d4\u30fc';\n                    copyBtn.setAttribute('data-copy', `icce_palette_hex_${index}`);\n                    \n                    info.appendChild(hexEl);\n                    info.appendChild(nameEl);\n                    info.appendChild(rgbEl);\n                    \n                    item.appendChild(colorBox);\n                    item.appendChild(info);\n                    item.appendChild(copyBtn);\n                    \n                    paletteList.appendChild(item);\n                });\n                \n                paletteList.querySelectorAll('.icce_palette_copy').forEach(btn => {\n                    btn.addEventListener('click', function() {\n                        const targetId = this.getAttribute('data-copy');\n                        const textToCopy = document.getElementById(targetId).textContent;\n                        copyToClipboard(textToCopy, this);\n                    });\n                });\n            }\n\n            \/\/ \u753b\u50cf\u51e6\u7406\n            function processFile(file) {\n                if (!file) return;\n\n                if (!file.type.match('image.*')) {\n                    errorMsg.textContent = '\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\uff08JPEG\u3001PNG\u3001GIF\u3001WebP\u306a\u3069\uff09\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002';\n                    errorMsg.style.display = 'block';\n                    return;\n                }\n                \n                errorMsg.style.display = 'none';\n\n                const reader = new FileReader();\n                reader.onload = function(e) {\n                    const img = new Image();\n                    img.onload = function() {\n                        \/\/ \u30e1\u30e2\u30ea\u30af\u30e9\u30c3\u30b7\u30e5\u5bfe\u7b56\uff1a\u6700\u5927\u5bf8\u6cd5\u30922000px\u306b\u5236\u9650\n                        const MAX_DIM = 2000;\n                        let w = img.width;\n                        let h = img.height;\n                        if (w > MAX_DIM || h > MAX_DIM) {\n                            const ratio = Math.min(MAX_DIM \/ w, MAX_DIM \/ h);\n                            w = Math.round(w * ratio);\n                            h = Math.round(h * ratio);\n                        }\n                        \n                        canvas.width = w;\n                        canvas.height = h;\n                        ctx.drawImage(img, 0, 0, w, h);\n                        \n                        dropZone.style.display = 'none';\n                        workspace.style.display = 'block';\n                        marker.style.display = 'none';\n                        overlay.style.display = 'block'; \/\/ \u753b\u50cf\u8aad\u307f\u8fbc\u307f\u6642\u306b\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3092\u8868\u793a\n                        \n                        \/\/ \u521d\u671f\u5316\n                        colorPreview.style.backgroundColor = 'transparent';\n                        hexValue.textContent = '#------';\n                        rgbValue.textContent = '---, ---, ---';\n                        nameValue.textContent = '---';\n                        \n                        \/\/ \u4e3b\u8981\u30ab\u30e9\u30fc\u62bd\u51fa\n                        const palette = extractPalette(ctx, w, h);\n                        renderPalette(palette);\n                    };\n                    img.onerror = function() {\n                        errorMsg.textContent = '\u753b\u50cf\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u753b\u50cf\u5f62\u5f0f\u304b\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002';\n                        errorMsg.style.display = 'block';\n                    };\n                    img.src = e.target.result;\n                };\n                reader.readAsDataURL(file);\n            }\n\n            \/\/ \u30a4\u30d9\u30f3\u30c8\uff1a\u30d5\u30a1\u30a4\u30eb\u9078\u629e\u30fbD&D\n            selectBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                fileInput.click();\n            });\n            dropZone.addEventListener('click', () => {\n                fileInput.click();\n            });\n            fileInput.addEventListener('change', (e) => {\n                if(e.target.files.length > 0) processFile(e.target.files[0]);\n            });\n\n            dropZone.addEventListener('dragover', (e) => {\n                e.preventDefault();\n                dropZone.classList.add('icce_dragover');\n            });\n            dropZone.addEventListener('dragleave', () => {\n                dropZone.classList.remove('icce_dragover');\n            });\n            dropZone.addEventListener('drop', (e) => {\n                e.preventDefault();\n                dropZone.classList.remove('icce_dragover');\n                if(e.dataTransfer.files.length > 0) processFile(e.dataTransfer.files[0]);\n            });\n\n            \/\/ \u30a4\u30d9\u30f3\u30c8\uff1a\u8272\u62bd\u51fa\n            function extractColor(e) {\n                e.preventDefault();\n\n                \/\/ \u521d\u56de\u30af\u30ea\u30c3\u30af\u6642\u306b\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3092\u975e\u8868\u793a\u306b\u3059\u308b\n                if (overlay.style.display !== 'none') {\n                    overlay.style.display = 'none';\n                }\n\n                const rect = canvas.getBoundingClientRect();\n                let clientX, clientY;\n\n                if (e.type === 'touchstart' || e.type === 'touchmove') {\n                    clientX = e.touches[0].clientX;\n                    clientY = e.touches[0].clientY;\n                } else {\n                    clientX = e.clientX;\n                    clientY = e.clientY;\n                }\n\n                \/\/ \u7bc4\u56f2\u5916\u306e\u30bf\u30c3\u30c1\u3092\u7121\u8996\n                if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) {\n                    return;\n                }\n\n                \/\/ \u8868\u793a\u30b9\u30b1\u30fc\u30eb\u3092\u8003\u616e\u3057\u305f\u5185\u90e8\u5ea7\u6a19\u306e\u8a08\u7b97\n                const scaleX = canvas.width \/ rect.width;\n                const scaleY = canvas.height \/ rect.height;\n                const x = Math.floor((clientX - rect.left) * scaleX);\n                const y = Math.floor((clientY - rect.top) * scaleY);\n\n                \/\/ \u30d4\u30af\u30bb\u30eb\u30c7\u30fc\u30bf\u53d6\u5f97\n                const pixel = ctx.getImageData(x, y, 1, 1).data;\n                const r = pixel[0];\n                const g = pixel[1];\n                const b = pixel[2];\n                \/\/ \u900f\u904e\u306e\u5834\u5408\u306f\u767d\u3068\u3057\u3066\u6271\u3046\u304b\u3001\u305d\u306e\u307e\u307e\u8a08\u7b97\u3002\u4eca\u56de\u306f\u7121\u8996\u305b\u305a\u8a08\u7b97\u3002\n\n                \/\/ \u30de\u30fc\u30ab\u30fc\u306e\u8868\u793a\u4f4d\u7f6e\u306f wrapper \u57fa\u6e96\u3067\u8a08\u7b97\n                const wrapperRect = canvasWrapper.getBoundingClientRect();\n                updateMainResult(r, g, b, true, clientX - wrapperRect.left, clientY - wrapperRect.top);\n            }\n\n            \/\/ PC\u3068\u30b9\u30de\u30db\u306e\u30af\u30ea\u30c3\u30af\/\u30bf\u30c3\u30d7\u4e21\u5bfe\u5fdc\n            canvas.addEventListener('click', extractColor);\n            canvas.addEventListener('touchstart', extractColor, {passive: false});\n\n            \/\/ \u30a4\u30d9\u30f3\u30c8\uff1a\u30b3\u30d4\u30fc\u6a5f\u80fd\n            document.querySelectorAll('.icce_copy_icon').forEach(btn => {\n                btn.addEventListener('click', function() {\n                    const targetId = this.getAttribute('data-copy');\n                    const textToCopy = document.getElementById(targetId).textContent;\n                    copyToClipboard(textToCopy, this);\n                });\n            });\n\n            \/\/ \u30a4\u30d9\u30f3\u30c8\uff1a\u30ea\u30bb\u30c3\u30c8\n            resetBtn.addEventListener('click', () => {\n                fileInput.value = '';\n                workspace.style.display = 'none';\n                dropZone.style.display = 'block';\n                paletteArea.style.display = 'none';\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                \n                \/\/ \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u30a8\u30ea\u30a2\u3078\u30b9\u30e0\u30fc\u30ba\u30b9\u30af\u30ed\u30fc\u30eb\n                dropZone.scrollIntoView({\n                    behavior: 'smooth',\n                    block: 'start'\n                });\n            });\n        }\n\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', init_icce);\n        } else {\n            init_icce();\n        }\n    })();\n    <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30c4\u30fc\u30eb\u306f\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u753b\u50cf\u3092\u30af\u30ea\u30c3\u30af\uff08\u30bf\u30c3\u30d7\uff09\u3059\u308b\u3060\u3051\u3067\u3001\u753b\u50cf\u306e\u4efb\u610f\u306e\u5834\u6240\u304b\u3089\u8272\uff08\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\uff09\u3092\u62bd\u51fa\u30fb\u53d6\u5f97\u3067\u304d\u308b\u7121\u6599\u306eWEB\u30c4\u30fc\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-0\">\u30c4\u30fc\u30eb\u306e\u4f7f\u3044\u65b9\uff083\u30b9\u30c6\u30c3\u30d7\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u3069\u306a\u305f\u3067\u3082\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u76f4\u611f\u7684\u306b\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>\u753b\u50cf\u306e\u8aad\u307f\u8fbc\u307f<\/strong> <br>\u70b9\u7dda\u3067\u56f2\u307e\u308c\u305f\u30a8\u30ea\u30a2\u306b\u753b\u50cf\u3092\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u304b\u3001\u300c\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u300d\u30dc\u30bf\u30f3\u304b\u3089\u5bfe\u8c61\u306e\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002\uff08\u5bfe\u5fdc\u5f62\u5f0f\uff1aJPEG\u3001PNG\u3001GIF\u3001WebP\uff09<\/li>\n\n\n\n<li><strong>\u8272\u306e\u62bd\u51fa<\/strong> <br>\u753b\u50cf\u304c\u8aad\u307f\u8fbc\u307e\u308c\u305f\u3089\u3001\u8272\u3092\u77e5\u308a\u305f\u3044\u90e8\u5206\u3092\u30af\u30ea\u30c3\u30af\uff08\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7b49\u306e\u5834\u5408\u306f\u30bf\u30c3\u30d7\uff09\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n\n\n\n<li><strong>\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u306e\u30b3\u30d4\u30fc<\/strong> <br>\u753b\u9762\u4e0a\u90e8\u306b\u3001\u9078\u629e\u3057\u305f\u90e8\u5206\u306e\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\uff08HEX\u304a\u3088\u3073RGB\uff09\u3068\u3001\u305d\u308c\u306b\u6700\u3082\u8fd1\u3044\u8272\u540d\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u300c\u30b3\u30d4\u30fc\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001\u305d\u306e\u307e\u307e\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u4fdd\u5b58\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-1\">\u3053\u306e\u30c4\u30fc\u30eb\u3067\u3067\u304d\u308b\u3053\u3068<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f53\u30c4\u30fc\u30eb\u3067\u306f\u3001\u624b\u8efd\u306a\u64cd\u4f5c\u3067\u4ee5\u4e0b\u306e\u6a5f\u80fd\u3092\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30d4\u30f3\u30dd\u30a4\u30f3\u30c8\u3067\u306e\u8272\u62bd\u51fa<\/strong> <br>\u753b\u50cf\u5185\u306e1\u30d4\u30af\u30bb\u30eb\u5358\u4f4d\u3067\u6b63\u78ba\u306a\u8272\u60c5\u5831\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u4e3b\u8981\u30ab\u30e9\u30fc\u306e\u81ea\u52d5\u30d1\u30ec\u30c3\u30c8\u5316<\/strong> <br>\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u77ac\u9593\u306b\u3001\u753b\u50cf\u5185\u3067\u591a\u304f\u4f7f\u308f\u308c\u3066\u3044\u308b\u4e3b\u8981\u306a\u8272\u3092\u81ea\u52d5\u3067\u5206\u6790\u3057\u3001\u6700\u59278\u8272\u306e\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\u3068\u3057\u3066\u4e00\u89a7\u8868\u793a\u3057\u307e\u3059\u3002\u30d1\u30ec\u30c3\u30c8\u306e\u8272\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u8a73\u7d30\u3092\u78ba\u8a8d\u3057\u305f\u308a\u3001\u76f4\u63a5\u30b3\u30d4\u30fc\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u30b3\u30d4\u30fc\u6a5f\u80fd<\/strong> <br>\u53d6\u5f97\u3057\u305fHEX\u3084RGB\u306e\u6570\u5024\u306f\u3001\u30dc\u30bf\u30f3\u4e00\u3064\u3067\u30b3\u30d4\u30fc\u3067\u304d\u3001\u305d\u306e\u307e\u307e\u5404\u7a2e\u30c7\u30b6\u30a4\u30f3\u30bd\u30d5\u30c8\u3084CSS\u306a\u3069\u306b\u8cbc\u308a\u4ed8\u3051\u3066\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-2\">\u3053\u306e\u30c4\u30fc\u30eb\u3067\u53d6\u5f97\u3059\u308b\u60c5\u5831\u306e\u57fa\u790e\u77e5\u8b58<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c7\u30b6\u30a4\u30f3\u3084\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3067\u983b\u7e41\u306b\u4f7f\u7528\u3055\u308c\u308b\u8272\u60c5\u5831\u306e\u5f62\u5f0f\u306b\u3064\u3044\u3066\u3001\u7c21\u5358\u306b\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HEX\uff08\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\uff09<\/strong> <br>\u300c#\u300d\u304b\u3089\u59cb\u307e\u308b6\u6841\u306e\u82f1\u6570\u5b57\uff08\u4f8b\uff1a#FF0000\uff09\u3067\u8272\u3092\u8868\u73fe\u3059\u308b\u5f62\u5f0f\u3067\u3059\u3002\u4e3b\u306b\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u5236\u4f5c\uff08HTML\u30fbCSS\uff09\u306a\u3069\u306eWEB\u30c7\u30b6\u30a4\u30f3\u306e\u5206\u91ce\u3067\u6a19\u6e96\u7684\u306b\u4f7f\u308f\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>RGB<\/strong> <br>Red\uff08\u8d64\uff09\u3001Green\uff08\u7dd1\uff09\u3001Blue\uff08\u9752\uff09\u306e\u5149\u306e\u4e09\u539f\u8272\u306e\u5f37\u3055\u3092\u3001\u305d\u308c\u305e\u308c0\u304b\u3089255\u306e\u6570\u5024\uff08\u4f8b\uff1a255, 0, 0\uff09\u3067\u8868\u3059\u5f62\u5f0f\u3067\u3059\u3002\u30d1\u30bd\u30b3\u30f3\u3084\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u306e\u30c7\u30a3\u30b9\u30d7\u30ec\u30a4\u3067\u8272\u3092\u8868\u73fe\u3059\u308b\u969b\u306e\u57fa\u672c\u539f\u7406\u3067\u3042\u308a\u3001\u753b\u50cf\u7de8\u96c6\u30bd\u30d5\u30c8\u3084\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u30bd\u30d5\u30c8\u3067\u3088\u304f\u5229\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u8fd1\u4f3c\u8272\u540d<\/strong> <br>\u62bd\u51fa\u3057\u305f\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u306b\u6700\u3082\u8fd1\u3044\u4e00\u822c\u7684\u306a\u8272\u540d\uff08\u4f8b\uff1a\u30ec\u30c3\u30c9\u3001\u30cd\u30a4\u30d3\u30fc\u3001\u30b3\u30fc\u30e9\u30eb\u306a\u3069\uff09\u3067\u3059\u3002\u30c1\u30fc\u30e0\u5185\u3067\u8272\u306e\u30a4\u30e1\u30fc\u30b8\u3092\u8a00\u8449\u3067\u5171\u6709\u3059\u308b\u969b\u306a\u3069\u306b\u5f79\u7acb\u3061\u307e\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 \u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u306f\uff1f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5834\u9762\u3067\u3001\u4f5c\u696d\u52b9\u7387\u3092\u5927\u5e45\u306b\u30a2\u30c3\u30d7\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WEB\u30c7\u30b6\u30a4\u30f3\u3084\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u53c2\u8003\u306b\u3057\u305f\u3044\u3068\u304d<\/strong> <br>\u6c17\u306b\u306a\u3063\u305fWEB\u30b5\u30a4\u30c8\u306e\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3084\u3001\u304a\u6c17\u306b\u5165\u308a\u306e\u30d0\u30ca\u30fc\u753b\u50cf\u304b\u3089\u914d\u8272\u3092\u8abf\u3079\u3001\u81ea\u8eab\u306e\u30c7\u30b6\u30a4\u30f3\u306b\u53d6\u308a\u5165\u308c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d7\u30ec\u30bc\u30f3\u8cc7\u6599\u306e\u30c8\u30fc\u30f3\uff06\u30de\u30ca\u30fc\u3092\u7d71\u4e00\u3057\u305f\u3044\u3068\u304d<\/strong> <br>\u4f01\u696d\u306e\u30ed\u30b4\u753b\u50cf\u3084\u3001\u8cc7\u6599\u5185\u3067\u4f7f\u7528\u3059\u308b\u30e1\u30a4\u30f3\u5199\u771f\u306e\u8272\u3092\u62bd\u51fa\u3057\u3001\u898b\u51fa\u3057\u3084\u56f3\u5f62\u306e\u80cc\u666f\u8272\u3092\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u7d71\u4e00\u611f\u306e\u3042\u308b\u7f8e\u3057\u3044\u30b9\u30e9\u30a4\u30c9\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30a4\u30e9\u30b9\u30c8\u4f5c\u6210\u3067\u8272\u306b\u8ff7\u3063\u305f\u3068\u304d<\/strong> <br>\u53c2\u8003\u306b\u306a\u308b\u5199\u771f\u3084\u30a4\u30e9\u30b9\u30c8\u304b\u3089\u76f4\u611f\u7684\u306b\u8272\u3092\u62fe\u3044\u4e0a\u3052\u3001\u3054\u81ea\u8eab\u306e\u30da\u30a4\u30f3\u30c8\u30bd\u30d5\u30c8\uff08\u30af\u30ea\u30b9\u30bf\u3084Photoshop\u306a\u3069\uff09\u306bRGB\u6570\u5024\u3092\u5165\u529b\u3057\u3066\u30d1\u30ec\u30c3\u30c8\u3092\u4f5c\u6210\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<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3067\u3082\u4f7f\u3048\u307e\u3059\u304b\uff1f<\/strong> <br>\u306f\u3044\u3001\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3084\u30bf\u30d6\u30ec\u30c3\u30c8\u306e\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u3082\u554f\u984c\u306a\u304f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002\u753b\u9762\u3092\u30bf\u30c3\u30d7\u3057\u3066\u8272\u3092\u62bd\u51fa\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n\n\n\n<li><strong>\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u753b\u50cf\u306f\u30b5\u30fc\u30d0\u30fc\u306b\u4fdd\u5b58\u3055\u308c\u307e\u3059\u304b\uff1f<\/strong> <br>\u3044\u3044\u3048\u3001\u4fdd\u5b58\u3055\u308c\u307e\u305b\u3093\u3002\u753b\u50cf\u306e\u8aad\u307f\u8fbc\u307f\u304b\u3089\u8272\u306e\u62bd\u51fa\u307e\u3067\u3059\u3079\u3066\u304a\u4f7f\u3044\u306e\u30d6\u30e9\u30a6\u30b6\u4e0a\uff08\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\uff09\u3067\u51e6\u7406\u3055\u308c\u308b\u305f\u3081\u3001\u6a5f\u5bc6\u60c5\u5831\u3092\u542b\u3080\u753b\u50cf\u3084\u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u306a\u5199\u771f\u3067\u3082\u5b89\u5fc3\u3057\u3066\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u753b\u50cf\u3092\u9078\u629e\u307e\u305f\u306f\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7 \u5bfe\u5fdc\u5f62\u5f0f\uff1aJPEG\uff08.jpg\/.jpeg\uff09\u3001PNG\u3001GIF\u3001WebP \u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e \u753b\u50cf\u4e0a\u306e\u8272\u3092\u77e5\u308a\u305f\u3044\u5834\u6240\u3092\u30af\u30ea\u30c3\u30af\uff08\u30b9\u30de\u30db\u306f\u30bf\u30c3\u30d7\uff09\u3057\u3066\u304f\u3060\u3055\u3044\u3002 HEX (\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9) #\u2014 &#8230; <\/p>\n","protected":false},"author":4,"featured_media":15731,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,59,60],"tags":[],"class_list":["post-15717","post","type-post","status-publish","format-standard","has-post-thumbnail","category-tool","category-web-design","category-design","entry"],"_links":{"self":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/15717","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=15717"}],"version-history":[{"count":12,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/15717\/revisions"}],"predecessor-version":[{"id":15729,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/15717\/revisions\/15729"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/media\/15731"}],"wp:attachment":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/media?parent=15717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/categories?post=15717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/tags?post=15717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}