{"id":6032,"date":"2024-10-01T10:39:16","date_gmt":"2024-10-01T01:39:16","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?page_id=6032"},"modified":"2026-06-09T14:40:57","modified_gmt":"2026-06-09T05:40:57","slug":"eyecatch-generator","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/tools\/eyecatch-generator\/","title":{"rendered":"\u30bf\u30a4\u30c8\u30eb\u4ed8\u304d\u306e\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u751f\u6210\u30c4\u30fc\u30eb | \u30aa\u30f3\u30e9\u30a4\u30f3\u4e0a\u3067\u6587\u5b57\u3092\u753b\u50cf\u306b\u5909\u63db"},"content":{"rendered":"<!-- \u0f3b.mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09\u0f3a -->\r\n<hr class=\"spacer-mezzala\" \/>\r\n\r\n<!-- \u0f3b\u273f\ud835\udc0f\ud835\udc00\ud835\udc06\ud835\udc04\u0f3a -->\r\n<hr id=\"ch-TextConverter\" anchor \/>\r\n<div class=\"pg-saracnvtvkaa bg-hackingGate bg-hackingGate bg-hackingGate bg-hackingGate\">\r\n\r\n  <header class=\"page-header mx-auto\">\r\n    <!-- \u2756\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8 --><div><!-- breadcrumb.php -->\n<style>\n\/* \u2756breadcrumb.leckermaul\uff08\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\uff09\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a *\/\n.zaratan .breadcrumb.leckermaul {\n\twidth: 100%;\n\tmax-width: 92.5vw;\n\tmargin-inline: auto;\n}\n\n.zaratan .breadcrumb.leckermaul :is(ul, ol) {\n\tmin-height: 3rem;\n\tline-height: initial;\n\tfont-size: 0;\n\tletter-spacing: 0;\n\toverflow: hidden;\n}\n\n.zaratan .breadcrumb.leckermaul li {\n\tdisplay: inline;\n\tline-height: 1.55;\n\tfont-size: clamp(0.775rem, calc(0.775rem + ((1vw - 0.225rem) * 0.1563)), 0.8750rem);\n}\n\n.zaratan .breadcrumb.leckermaul li>*,\n.zaratan .breadcrumb.leckermaul li::before {\n\tposition: relative;\n\ttop: 0.125em;\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n.zaratan .breadcrumb.leckermaul a {\n\tdisplay: inline;\n\tcolor: var(--c-text-300, hsl(233, 6%, 74%));\n\tmargin-right: .5em;\n}\n\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2) a {\n\tmargin-left: .5em;\n}\n\n.zaratan .breadcrumb.leckermaul .current_page_item a {\n\tpointer-events: none;\n\tcolor: var(--c-text-300, hsl(233, 6%, 74%));\n}\n\n@media (any-hover:hover) {\n\t.zaratan .breadcrumb.leckermaul a:hover {\n\t\tcolor: var(--c-text-300, hsl(233, 6%, 74%));\n\t}\n}\n\n\/* .separator *\/\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2)::before,\n.zaratan .breadcrumb.leckermaul.chevron-right li:nth-of-type(n+2)::before {\n\tcontent: \">\";\n\tcolor: var(--c-text-300, hsl(233, 6%, 74%))\n}\n\n.zaratan .breadcrumb.leckermaul.slash li:nth-of-type(n+2)::before {\n\tcontent: \"\/\";\n}\n\n.zaratan .breadcrumb.leckermaul.trigon-bullet li:nth-of-type(n+2)::before {\n\tcontent: \"\u2023\";\n}\n<\/style>\n\n\n<nav class=\"breadcrumb leckermaul mx-auto py-0.5r\">\n  <ul class=\"breadcrumb-wrapper\">\n    <!-- \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u8868\u793a -->\n    <li><a href=\"https:\/\/code-plus.jp\/gp\/\"><i><\/i>\u30c8\u30c3\u30d7<\/a><\/li>\n\n          <!-- \u56fa\u5b9a\u30da\u30fc\u30b8\uff08\u305d\u308c\u4ee5\u5916\uff09\uff1a \u5148\u7956\u30da\u30fc\u30b8\u540d\u3068\u3001\u73fe\u5728\u306e\u30da\u30fc\u30b8\u540d\u3092\u8868\u793a -->\n      <li><a href=\"https:\/\/code-plus.jp\/gp\/tools\/\">TOOLS\uff08\u30c4\u30fc\u30eb\u4e00\u89a7\uff09<\/a><\/li><li class=\"current_page_item\"><a>\u52d5\u753b\u30fb\u753b\u50cf\u7de8\u96c6<\/a><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\r\n  <\/header><!-- \/\/\/.inheader -->\r\n\r\n\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <section class=\"sect-cnvtVkaA-Intro\" style=\"contain-intrinsic-size:1000px;\">\r\n    <header class=\"section__inheader mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper d-iblock mb-0.5r\">\r\n        <h1 class=\"fz-xxl hdg-page mb-0.25pc\"><span>\u30bf\u30a4\u30c8\u30eb\u4ed8\u304d\u306e\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u751f\u6210\u30c4\u30fc\u30eb | \u30aa\u30f3\u30e9\u30a4\u30f3\u4e0a\u3067\u6587\u5b57\u3092\u753b\u50cf\u306b\u5909\u63db<\/span><\/h1>\r\n        <p class=\"page-foreword fz-ss\">\r\n          \u30c6\u30ad\u30b9\u30c8\u3092\u753b\u50cf\u306b\u5909\u63db\u3059\u308b\u30aa\u30f3\u30e9\u30a4\u30f3\u753b\u50cf\u751f\u6210\u30c4\u30fc\u30eb\u3002SNS\u30fb\u30d6\u30ed\u30b0\u7528\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u3092\u77ac\u6642\u306b\u4f5c\u6210\u3002\u30d5\u30a9\u30f3\u30c8\u3001\u8272\u3001\u80cc\u666f\u3092\u81ea\u7531\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u3002\r\n        <\/p>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <a class=\"fl-right badge is-outlined is-gray fz-xs bdrs-0.25r\" href=\"#ch-Explanation\">\r\n        <i class=\"icon mas ma-help\"><\/i>&nbsp;<span>\u4f7f\u3044\u65b9<\/span>\r\n      <\/a>\r\n    <\/header><!-- \/\/\/.inheader -->\r\n  <\/section>\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <hr id=\"ch-Converter\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Converter\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior fxd-row mx-auto\">\r\n      <figure class=\"section__leftlane\">\r\n        <div class=\"hgroup-wrapper\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span><\/h3>\r\n        <\/div><!-- \/\/\/.hgroup -->\r\n\r\n        <div class=\"chest-wrapper relatived\">\r\n          <textarea class=\"textarea\" id=\"encodeArea\" style=\"height:17.5pc;\" placeholder=\"\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\">600x600<\/textarea>\r\n          <ins id=\"decodedMessage\"><\/ins>\r\n        <\/div><!-- \/\/\/.chest -->\r\n\r\n        <!-- \u30aa\u30d7\u30b7\u30e7\u30f3 -->\r\n        <div class=\"colgroup w-full mt-1r\">\r\n          <label class=\"label is-outlined fz-sm\"><span class=\"fx-shrink w-14e\">Width x Height:&ensp;<\/span>\r\n            <input type=\"number\" class=\"input w-4e\" id=\"input-width\" value=\"600\" min=\"1\">&nbsp;x&nbsp;\r\n            <input type=\"number\" class=\"input w-4e\" id=\"input-height\" value=\"600\" min=\"1\">&nbsp;px\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\">\r\n            <span class=\"d-iblock my-0.5pc\">Padding:&ensp;<\/span>\r\n            <span class=\"d-iblock\">\r\n              \u4e0a&nbsp;<input type=\"number\" class=\"input w-4e\" id=\"input-paddingTop\" value=\"200\" min=\"0\">&nbsp;\r\n              \u53f3&nbsp;<input type=\"number\" class=\"input w-4e\" id=\"input-paddingRight\" value=\"40\" min=\"0\">&nbsp;\r\n              \u4e0b&nbsp;<input type=\"number\" class=\"input w-4e\" id=\"input-paddingBottom\" value=\"200\" min=\"0\">&nbsp;\r\n              \u5de6&nbsp;<input type=\"number\" class=\"input w-4e\" id=\"input-paddingLeft\" value=\"40\" min=\"0\">&nbsp;px\r\n            <\/span>\r\n          <\/label>\r\n          <label class=\"label is-outlined is-gray fz-rg fx-wrap\">\r\n            <span class=\"fx-shrink w-14e\">Background Image:&ensp;<\/span>\r\n            <hr class=\"fxbr\" \/>\r\n            <input type=\"file\" class=\"mt-0.5r\" id=\"input-bgImage\" accept=\"image\/*\">\r\n            <a class=\"button is-outlined\" id=\"remove-bgImage\">\u80cc\u666f\u753b\u50cf\u3092\u524a\u9664<\/a>\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\"><span class=\"fx-shrink w-14e\">Background Color (HSLA):&ensp;<\/span>\r\n            <input type=\"text\" class=\"input w-14e\" id=\"input-bgColor\" value=\"hsla(223, 6%, 100%, 0.05)\" placeholder=\"hsla(223, 6%, 0%, 0.05)\">\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\">\r\n            <span class=\"fx-shrink w-14e\">Text Background:&ensp;<\/span>\r\n            <input type=\"text\" class=\"input w-14e\" id=\"encodeAreaBg\" value=\"hsla(223, 6%, 100%, 0.85)\" placeholder=\"hsla(223, 6%, 100%, 0.85)\">\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\">\r\n            <span class=\"fx-shrink w-14e\">Text Background Width:&ensp;<\/span>\r\n            <select id=\"encodeAreaBgSize\">\r\n              <option value=\"full-size\">Full Size<\/option>\r\n              <option value=\"fit-content\">Fit Content<\/option>\r\n            <\/select>\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\"><span class=\"fx-shrink w-14e\">Text Color:&ensp;<\/span>\r\n            <input type=\"text\" class=\"input w-14e\" id=\"encodeAreaColor\" value=\"#1F2023\" placeholder=\"#1F2023\">\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\"><span class=\"fx-shrink w-14e\">Line-height:&ensp;<\/span>\r\n            <input type=\"number\" class=\"input w-4e\" id=\"input-lineHeight\" value=\"1.88\" min=\"0\" step=\"0.01\">\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\"><span class=\"fx-shrink mb-0.25pc\">Font-family:&ensp;<\/span>\r\n            <hr class=\"fxbr\" \/>\r\n            <select id=\"select-fontFamily\" style=\"max-width:27pc;\">\r\n              <option value=\"'YakuHanJP', 'Hanken Grotesk', 'Noto Sans JP', sans-serif\" selected>'YakuHanJP', 'Hanken Grotesk', 'Noto Sans JP', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Poppins', 'Noto Sans JP', sans-serif\">'YakuHanJP', 'Poppins', 'Noto Sans JP', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Noto Sans', 'Noto Sans JP', sans-serif\">'YakuHanJP', 'Noto Sans', 'Noto Sans JP', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'M PLUS 1', sans-serif\">'YakuHanJP', 'M PLUS 1', sans-serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Lusitana', 'Shippori Mincho', serif\">'YakuHanMP', 'Lusitana', 'Shippori Mincho', serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Noto Serif', 'Noto Serif JP', serif\">'YakuHanMP', 'Noto Serif', 'Noto Serif JP', serif<\/option>\r\n              <option value=\"'YakuHanRP', 'M PLUS Rounded 1c', sans-serif\">'YakuHanRP', 'M PLUS Rounded 1c', sans-serif<\/option>\r\n              <option value=\"'YakuHanRP', 'LINE Seed JP_OTF', sans-serif\">'YakuHanRP', 'LINE Seed JP_OTF', sans-serif<\/option>\r\n              <option value=\"'YakuHanRP', 'Shin Retro Maru Gothic', sans-serif\">'YakuHanRP', 'Shin Retro Maru Gothic', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Source Sans Pro', 'Noto Sans JP', sans-serif\">'YakuHanJP', 'Source Sans Pro', 'Noto Sans JP', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Montserrat', 'Noto Sans JP', sans-serif\">'YakuHanJP', 'Montserrat', 'Noto Sans JP', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Jost', 'Noto Sans JP', sans-serif\">'YakuHanJP', 'Jost', 'Noto Sans JP', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Kumbh Sans', 'Noto Sans JP', sans-serif\">'YakuHanJP', 'Kumbh Sans', 'Noto Sans JP', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Raleway', 'Noto Sans JP', sans-serif\">'YakuHanJP', 'Raleway', 'Noto Sans JP', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Roboto Condensed', sans-serif\">'YakuHanJP', 'Roboto Condensed', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'D-DIN-PRO', 'Dinish', sans-serif\">'YakuHanJP', 'D-DIN-PRO', 'Dinish', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Dinish Condensed', sans-serif\">'YakuHanJP', 'Dinish Condensed', sans-serif<\/option>\r\n              <option value=\"'YakuHanJP', 'Bebas Neue', sans-serif\">'YakuHanJP', 'Bebas Neue', sans-serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Source Serif Pro', 'Noto Serif JP', serif\">'YakuHanMP', 'Source Serif Pro', 'Noto Serif JP', serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Cinzel', 'Noto Serif JP', serif\">'YakuHanMP', 'Cinzel', 'Noto Serif JP', serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Libre Caslon Display', 'Libre Caslon Text', 'Noto Serif JP', serif\">'YakuHanMP', 'Libre Caslon Display', 'Libre Caslon Text', 'Noto Serif JP', serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Cormorant Infant', 'Cormorant Garamond', 'Noto Serif JP', serif\">'YakuHanMP', 'Cormorant Infant', 'Cormorant Garamond', 'Noto Serif JP', serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Prata', 'Playfair Display', 'Noto Serif JP', serif\">'YakuHanMP', 'Prata', 'Playfair Display', 'Noto Serif JP', serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Cardo', 'Noto Serif JP', serif\">'YakuHanMP', 'Cardo', 'Noto Serif JP', serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Marcellus', 'Noto Serif JP', serif\">'YakuHanMP', 'Marcellus', 'Noto Serif JP', serif<\/option>\r\n              <option value=\"'YakuHanMP', 'Dancing Script', 'Noto Serif JP', cursive\">'YakuHanMP', 'Dancing Script', 'Noto Serif JP', cursive<\/option>\r\n              <option value=\"'HackGen', monospace\">'HackGen', monospace<\/option>\r\n              <option value=\"'Nanum Gothic', monospace\">'Nanum Gothic', monospace<\/option>\r\n            <\/select>\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\"><span class=\"fx-shrink w-14e\">Font-size:&ensp;<\/span>\r\n            <input type=\"number\" class=\"input w-4e\" id=\"input-fontSize\" value=\"39\" min=\"1\">&nbsp;px\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\"><span class=\"fx-shrink w-14e\">Font-weight:&ensp;<\/span>\r\n            <input type=\"number\" class=\"input w-4e\" id=\"input-fontWeight\" value=\"700\" min=\"100\" max=\"900\" step=\"100\">\r\n          <\/label>\r\n          <label class=\"label is-outlined fz-sm\"><span class=\"fx-shrink w-14e\">Text-align:&ensp;<\/span>\r\n            <input type=\"radio\" class=\"radio\" id=\"alignLeft\" name=\"textAlign\" value=\"left\">\u5de6\r\n            <input type=\"radio\" class=\"radio\" id=\"alignCenter\" name=\"textAlign\" value=\"center\" checked>\u4e2d\u592e\r\n            <input type=\"radio\" class=\"radio\" id=\"alignRight\" name=\"textAlign\" value=\"right\">\u53f3\r\n          <\/label>\r\n        <\/div><!-- \/\/\/.colgroup -->\r\n      <\/figure><!-- \/\/\/.leftlane -->\r\n\r\n      <figure class=\"section__centerlane\">\r\n        <aside class=\"sticky-sidebar fxd-column pc-center\">\r\n          <a class=\"button is-outlined is-primary\" href=\"#ch-Converter\" onclick=\"generateImage()\"><span>\u751f\u6210&nbsp;\u00bb<\/span><\/a>\r\n        <\/aside>\r\n      <\/figure><!-- \/\/\/.centerlane -->\r\n\r\n      <figure class=\"section__rightlane\">\r\n        <div class=\"chest-wrapper relatived\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u751f\u6210\u5f8c\u306e\u30a4\u30e1\u30fc\u30b8<\/span><\/h3>\r\n          <canvas id=\"canvas\" width=\"600\" height=\"600\" style=\"max-width:100%;\"><\/canvas>\r\n          <ins id=\"encodedMessage\"><\/ins>\r\n        <\/div><!-- \/\/\/.chest -->\r\n\r\n        <p class=\"ta-center mt-1r\">\r\n          <a id=\"download\" class=\"button is-solided is-primary\" download=\"generated_image.png\">\u753b\u50cf\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a>\r\n        <\/p>\r\n      <\/figure><!-- \/\/\/.rightlane -->\r\n    <\/div><!-- \/\/\/.interior.fxd-row -->\r\n  <\/section>\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\r\n  <hr id=\"ch-Explanation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Explanation pt-3r\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\r\n      <div class=\"box is-broad is-solided c-text\">\r\n        <h4 class=\"hdg-explanation fz-md mb-0.25pc\">\u4f7f\u3044\u65b9<\/h4>\r\n        <p class=\"fz-ss mb-1r\">\r\n          \u5de6\u5074\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u306b\u30bf\u30a4\u30c8\u30eb\u3084\u6587\u7ae0\u3092\u5165\u529b\u3057\u3001\u30d5\u30a9\u30f3\u30c8\u30fb\u8272\u30fb\u30b5\u30a4\u30ba\u3092\u8abf\u6574\u3057\u3066\u300c\u751f\u6210 \u00bb\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3002<br \/>\u53f3\u5074\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3055\u308c\u305f\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\r\n        <\/p>\r\n        \r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83d\udca1 \u4e3b\u306a\u6a5f\u80fd<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b>\u81ea\u7531\u306a\u30b5\u30a4\u30ba\u8a2d\u5b9a\uff1a<\/b> \u6a2a600\u00d7\u7e26600px\u304b\u3089\u4efb\u610f\u306e\u30b5\u30a4\u30ba\u307e\u3067\u81ea\u7531\u306b\u8abf\u6574<\/li>\r\n          <li><b>\u8c4a\u5bcc\u306a\u30d5\u30a9\u30f3\u30c8\uff1a<\/b> 27\u7a2e\u985e\u306e\u65e5\u672c\u8a9e\u30fb\u82f1\u8a9e\u30d5\u30a9\u30f3\u30c8\u304b\u3089\u9078\u629e\u53ef\u80fd<\/li>\r\n          <li><b>\u80cc\u666f\u753b\u50cf\u5bfe\u5fdc\uff1a<\/b> \u304a\u597d\u307f\u306e\u80cc\u666f\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066\u5408\u6210<\/li>\r\n          <li><b>\u30ab\u30e9\u30fc\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\uff1a<\/b> HSLA\u5f62\u5f0f\u3067\u900f\u660e\u5ea6\u3092\u542b\u3080\u7d30\u304b\u3044\u8272\u8abf\u6574<\/li>\r\n          <li><b>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30d7\u30ec\u30d3\u30e5\u30fc\uff1a<\/b> \u8a2d\u5b9a\u5909\u66f4\u304c\u5373\u5ea7\u306b\u753b\u50cf\u306b\u53cd\u6620<\/li>\r\n        <\/ul>\r\n        \r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83c\udfaf \u6d3b\u7528\u30b7\u30fc\u30f3<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b>SNS\u6295\u7a3f\uff1a<\/b> Twitter\u3001Instagram\u3001Facebook\u7528\u306e\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf<\/li>\r\n          <li><b>\u30d6\u30ed\u30b0\u8a18\u4e8b\uff1a<\/b> WordPress\u3001Note\u306a\u3069\u306e\u30bf\u30a4\u30c8\u30eb\u753b\u50cf<\/li>\r\n          <li><b>YouTube\u30b5\u30e0\u30cd\u30a4\u30eb\uff1a<\/b> \u52d5\u753b\u30bf\u30a4\u30c8\u30eb\u3092\u76ee\u7acb\u3064\u753b\u50cf\u306b\u5909\u63db<\/li>\r\n          <li><b>\u30d7\u30ec\u30bc\u30f3\u8cc7\u6599\uff1a<\/b> PowerPoint\u3001Keynote\u306e\u30bf\u30a4\u30c8\u30eb\u30b9\u30e9\u30a4\u30c9<\/li>\r\n          <li><b>\u30d0\u30ca\u30fc\u5e83\u544a\uff1a<\/b> \u7c21\u5358\u306a\u30ad\u30e3\u30c3\u30c1\u30b3\u30d4\u30fc\u753b\u50cf\u306e\u4f5c\u6210<\/li>\r\n        <\/ul>\r\n        \r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\u2699\ufe0f \u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u30aa\u30d7\u30b7\u30e7\u30f3<\/h5>\r\n        <ul class=\"fz-ss\">\r\n          <li><b>\u30d1\u30c7\u30a3\u30f3\u30b0\u8abf\u6574\uff1a<\/b> \u4e0a\u4e0b\u5de6\u53f3\u306e\u4f59\u767d\u3092\u500b\u5225\u306b\u8a2d\u5b9a<\/li>\r\n          <li><b>\u30c6\u30ad\u30b9\u30c8\u80cc\u666f\uff1a<\/b> Full Size\uff08\u5168\u4f53\uff09\u30fbFit Content\uff08\u30c6\u30ad\u30b9\u30c8\u5e45\uff09\u9078\u629e<\/li>\r\n          <li><b>\u6587\u5b57\u914d\u7f6e\uff1a<\/b> \u5de6\u5bc4\u305b\u30fb\u4e2d\u592e\u30fb\u53f3\u5bc4\u305b\u306e3\u30d1\u30bf\u30fc\u30f3<\/li>\r\n          <li><b>\u884c\u9593\u8a2d\u5b9a\uff1a<\/b> \u8907\u6570\u884c\u30c6\u30ad\u30b9\u30c8\u306e\u8aad\u307f\u3084\u3059\u3055\u3092\u8abf\u6574<\/li>\r\n          <li><b>\u5373\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\uff1a<\/b> PNG\u5f62\u5f0f\u3067\u9ad8\u54c1\u8cea\u753b\u50cf\u3092\u4fdd\u5b58<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc03\ud835\udc04\ud835\udc0f\ud835\udc00\ud835\udc11\ud835\udc13\ud835\udc0c\ud835\udc04\ud835\udc0d\ud835\udc13\u0f3a -->\r\n  <hr id=\"ch-Relation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Relation pt-3r\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper mb-0.5pc\">\r\n        <h5 class=\"hdg-relation fz-rg\"><span>\u95a2\u9023\u30c4\u30fc\u30eb<\/span><\/h5>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <ul class=\"shelf-wrapper_pc shelfA\" data-cols_pc=\"2\">\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/imagemap-converter\/\" class=\"linkbox\">\r\n            <picture class=\"linkbox-thumbnail\">\r\n              <img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/illustra_2410301614.png?ver=20260609144057\" alt=\"SVG\u304b\u3089ImageMap\u5909\u63db\u30c4\u30fc\u30eb\" loading=\"lazy\" \/>\r\n            <\/picture>\r\n            <h4 class=\"linkbox-title fz-md\">SVG\u304b\u3089ImageMap\u5909\u63db\u30c4\u30fc\u30eb<\/h4>\r\n            <span class=\"linkbox-excerpt\">\u753b\u50cf\u306b\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30a8\u30ea\u30a2\u3092\u8a2d\u5b9a\u3002\u8907\u6570\u306e\u30ea\u30f3\u30af\u9818\u57df\u3092\u6301\u3064\u753b\u50cf\u30de\u30c3\u30d7\u3092\u4f5c\u6210\u3002<\/span>\r\n          <\/a>\r\n        <\/li>\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/markdown-converter\/\" class=\"linkbox\">\r\n            <picture class=\"linkbox-thumbnail\">\r\n              <img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/Markdown_2410161832.jpg?ver=20260609144057\" alt=\"Markdown\u8a18\u6cd5 HTML\u5909\u63db\u30c4\u30fc\u30eb\" loading=\"lazy\" \/>\r\n            <\/picture>\r\n            <h4 class=\"linkbox-title fz-md\">Markdown\u8a18\u6cd5 HTML\u5909\u63db\u30c4\u30fc\u30eb<\/h4>\r\n            <span class=\"linkbox-excerpt\">Markdown\u8a18\u6cd5\u3092HTML\u306b\u5909\u63db\u3002\u30d6\u30ed\u30b0\u8a18\u4e8b\u4f5c\u6210\u306b\u6700\u9069\u3002<\/span>\r\n          <\/a>\r\n        <\/li>\r\n      <\/ul><!-- \/\/\/.shelf -->\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- \u0f3b\u00a7\ud835\udc03\ud835\udc04\ud835\udc0f\ud835\udc00\ud835\udc11\ud835\udc13\ud835\udc0c\ud835\udc04\ud835\udc0d\ud835\udc13\u0f3a -->\r\n\r\n  <section class=\"sect-cnvtVkaA-Relation2 pt-3r\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper mb-0.5pc\">\r\n\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n\r\n\r\n<\/div><!-- \/\/\/\u25b2.page  -->\r\n\r\n<!-- \u0f3b.mediano\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0b\uff09\u0f3a -->\r\n<hr class=\"spacer-mediano\" \/>\r\n\r\n\r\n\r\n\r\n<script>\r\n  let backgroundImage = null;\r\n  document.getElementById('input-bgImage').addEventListener('change', function (e) {\r\n    const file = e.target.files[0];\r\n    if (file) {\r\n      const reader = new FileReader();\r\n      reader.onload = function (event) {\r\n        backgroundImage = event.target.result;\r\n        document.getElementById('remove-bgImage').style.display = 'inline-block';\r\n        generateImage(); \/\/\u753b\u50cf\u3092\u5373\u6642\u66f4\u65b0\r\n      };\r\n      reader.readAsDataURL(file);\r\n    }\r\n  });\r\n\r\n  document.getElementById('remove-bgImage').addEventListener('click', function (e) {\r\n    e.preventDefault();\r\n    backgroundImage = null;\r\n    document.getElementById('input-bgImage').value = ''; \/\/\u30d5\u30a1\u30a4\u30eb\u5165\u529b\u3092\u30af\u30ea\u30a2\r\n    this.style.display = 'none';\r\n    generateImage(); \/\/\u753b\u50cf\u3092\u5373\u6642\u66f4\u65b0\r\n  });\r\n\r\n\r\n  async function generateImage() {\r\n    try {\r\n      const canvas = document.getElementById('canvas');\r\n      const ctx = canvas.getContext('2d');\r\n      const text = document.getElementById('encodeArea').value;\r\n      const width = parseInt(document.getElementById('input-width').value);\r\n      const height = parseInt(document.getElementById('input-height').value);\r\n      const paddingTop = parseInt(document.getElementById('input-paddingTop').value);\r\n      const paddingRight = parseInt(document.getElementById('input-paddingRight').value);\r\n      const paddingBottom = parseInt(document.getElementById('input-paddingBottom').value);\r\n      const paddingLeft = parseInt(document.getElementById('input-paddingLeft').value);\r\n      const lineHeight = parseFloat(document.getElementById('input-lineHeight').value);\r\n      const fontSize = parseInt(document.getElementById('input-fontSize').value);\r\n      const fontWeight = document.getElementById('input-fontWeight').value;\r\n      const textAlign = document.querySelector('input[name=\"textAlign\"]:checked').value;\r\n      const fontFamily = document.getElementById('select-fontFamily').value;\r\n      const bgColor = document.getElementById('input-bgColor').value;\r\n      const textBg = document.getElementById('encodeAreaBg').value;\r\n      const textColor = document.getElementById('encodeAreaColor').value;\r\n\r\n      \/\/\u30ad\u30e3\u30f3\u30d0\u30b9\u30b5\u30a4\u30ba\u3092\u66f4\u65b0\r\n      canvas.width = width;\r\n      canvas.height = height;\r\n\r\n\r\n      \/\/\u80cc\u666f\u3092\u63cf\u753b\u3059\u308b\u95a2\u6570\r\n      async function drawBackground() {\r\n        return new Promise((resolve) => {\r\n          if (backgroundImage) {\r\n            const img = new Image();\r\n            img.onload = function () {\r\n              \/\/\u753b\u50cf\u306e\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u3092\u8a08\u7b97\r\n              const imgAspectRatio = img.width \/ img.height;\r\n              const canvasAspectRatio = canvas.width \/ canvas.height;\r\n\r\n              let drawWidth, drawHeight, drawX, drawY;\r\n\r\n              if (imgAspectRatio > canvasAspectRatio) {\r\n                \/\/\u753b\u50cf\u306e\u65b9\u304c\u6a2a\u9577\u306e\u5834\u5408\r\n                drawHeight = canvas.height;\r\n                drawWidth = drawHeight * imgAspectRatio;\r\n                drawY = 0;\r\n                drawX = (canvas.width - drawWidth) \/ 2;\r\n              } else {\r\n                \/\/\u753b\u50cf\u306e\u65b9\u304c\u7e26\u9577\u307e\u305f\u306f\u540c\u3058\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u306e\u5834\u5408\r\n                drawWidth = canvas.width;\r\n                drawHeight = drawWidth \/ imgAspectRatio;\r\n                drawX = 0;\r\n                drawY = (canvas.height - drawHeight) \/ 2;\r\n              }\r\n\r\n              \/\/\u753b\u50cf\u3092\u63cf\u753b\r\n              ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);\r\n\r\n              \/\/\u80cc\u666f\u8272\u3092\u91cd\u306d\u308b\r\n              ctx.fillStyle = bgColor;\r\n              ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n              resolve();\r\n            };\r\n            img.src = backgroundImage;\r\n\r\n          } else {\r\n            \/\/\u80cc\u666f\u753b\u50cf\u304c\u306a\u3044\u5834\u5408\u306f\u80cc\u666f\u8272\u306e\u307f\r\n            ctx.fillStyle = bgColor;\r\n            ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n            resolve();\r\n          }\r\n        });\r\n      }\r\n\r\n\r\n      \/\/\u30c6\u30ad\u30b9\u30c8\u3092\u63cf\u753b\u3059\u308b\u95a2\u6570\r\n      async function drawText() {\r\n        ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;\r\n        ctx.textAlign = textAlign;\r\n        ctx.textBaseline = 'middle'; \/\/'top'\u304b\u3089'middle'\u306b\u5909\u66f4\r\n\r\n        const lines = text.split('\\n');\r\n        const lineHeightPx = fontSize * lineHeight;\r\n        const totalTextHeight = lineHeightPx * lines.length;\r\n\r\n        \/\/\u5782\u76f4\u65b9\u5411\u306e\u4e2d\u592e\u4f4d\u7f6e\u3092\u8a08\u7b97\r\n        const startY = (height - totalTextHeight) \/ 2 + lineHeightPx \/ 2;\r\n\r\n        const textBgSize = document.getElementById('encodeAreaBgSize').value;\r\n\r\n        \/\/\u80cc\u666f\u3092\u63cf\u753b\r\n        ctx.fillStyle = textBg;\r\n        if (textBgSize === 'full-size') {\r\n          \/\/Full Size: padding\u5185\u3044\u3063\u3071\u3044\u306b\u80cc\u666f\u3092\u63cf\u753b\r\n          ctx.fillRect(paddingLeft, paddingTop, width - paddingLeft - paddingRight, height - paddingTop - paddingBottom);\r\n        } else { \/\/fit-content\r\n          \/\/\u5404\u884c\u306e\u6700\u5927\u5e45\u3092\u8a08\u7b97\r\n          let maxWidth = 0;\r\n          lines.forEach(line => {\r\n            const metrics = ctx.measureText(line);\r\n            maxWidth = Math.max(maxWidth, metrics.width);\r\n          });\r\n\r\n          \/\/Fit Content: \u30c6\u30ad\u30b9\u30c8\u306b\u5408\u308f\u305b\u3066\u80cc\u666f\u3092\u63cf\u753b\r\n          const bgStartX = textAlign === 'left' ? paddingLeft :\r\n            textAlign === 'right' ? width - paddingRight - maxWidth :\r\n              (width - maxWidth) \/ 2;\r\n          const bgStartY = (height - totalTextHeight) \/ 2; \/\/\u80cc\u666f\u306e\u958b\u59cbY\u5ea7\u6a19\u3092\u4e2d\u592e\u306b\u8abf\u6574\r\n          ctx.fillRect(bgStartX, bgStartY, maxWidth, totalTextHeight);\r\n        }\r\n\r\n        \/\/\u30c6\u30ad\u30b9\u30c8\u3092\u63cf\u753b\r\n        ctx.fillStyle = textColor;\r\n        lines.forEach((line, index) => {\r\n          const y = startY + index * lineHeightPx;\r\n          let x;\r\n          switch (textAlign) {\r\n            case 'left':\r\n              x = paddingLeft;\r\n              break;\r\n            case 'right':\r\n              x = width - paddingRight;\r\n              break;\r\n            default: \/\/center\r\n              x = width \/ 2;\r\n          }\r\n\r\n          ctx.fillText(line, x, y);\r\n        });\r\n      }\r\n\r\n\r\n      \/\/\u753b\u50cf\u751f\u6210\u5f8c\u306e\u51e6\u7406\u95a2\u6570\r\n      async function finishImageGeneration() {\r\n        canvas.toBlob(function (blob) {\r\n          const url = URL.createObjectURL(blob);\r\n          const downloadButton = document.getElementById('download');\r\n          downloadButton.href = url;\r\n\r\n          \/\/\u30d5\u30a1\u30a4\u30eb\u540d\u751f\u6210\u95a2\u6570\r\n          function generateFileName() {\r\n            const codeAreaValue = document.getElementById('encodeArea').value.trim();\r\n            const now = new Date();\r\n            const dateString = now.getFullYear().toString().substr(-2) +\r\n              (now.getMonth() + 1).toString().padStart(2, '0') +\r\n              now.getDate().toString().padStart(2, '0') +\r\n              now.getHours().toString().padStart(2, '0') +\r\n              now.getMinutes().toString().padStart(2, '0');\r\n\r\n            \/\/\u30d5\u30a1\u30a4\u30eb\u540d\u306e\u30b5\u30cb\u30bf\u30a4\u30ba\r\n            function sanitizeFileName(name) {\r\n              \/\/\u30b9\u30da\u30fc\u30b9\u3092\u30a2\u30f3\u30c0\u30fc\u30b9\u30b3\u30a2\u306b\u7f6e\u63db\u3057\u3001\u4f7f\u7528\u3067\u304d\u306a\u3044\u6587\u5b57\u3092\u9664\u53bb\r\n              return name.replace(\/s+\/g, '_').replace(\/[\/\\:*?\"<>|]\/g, '');\r\n            }\r\n\r\n            let prefix = 'image';\r\n            if (codeAreaValue) {\r\n              prefix = sanitizeFileName(codeAreaValue.substring(0, 8));\r\n            }\r\n\r\n            return `${prefix}_${dateString}.png`;\r\n          }\r\n\r\n          const fileName = generateFileName();\r\n          downloadButton.setAttribute('download', fileName);\r\n        });\r\n\r\n\r\n        \/\/\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u30ea\u30f3\u30af\u3092\u66f4\u65b0\r\n        const dataURL = canvas.toDataURL('image\/png');\r\n        document.getElementById('download').href = dataURL;\r\n      }; \/\/\/function finishImageGeneration();\r\n\r\n      \/\/\u5165\u529b\u306e\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\uff08bgColor, textBg, textColor\u306b\u9069\u7528\uff09\r\n      ['input-bgColor', 'encodeAreaBg', 'encodeAreaColor'].forEach(id => {\r\n        document.getElementById(id).addEventListener('input', function (e) {\r\n          const value = e.target.value.trim();\r\n          if (value === '' ||\r\n            \/^#[0-9A-Fa-f]{6}$\/.test(value) ||\r\n            \/^hsla(s*d+s*,s*d+%?s*,s*d+%?s*,s*(?:0|1|0?.d+)s*)$\/.test(value)) {\r\n            this.style.borderColor = '';\r\n            generateImage(); \/\/\u6709\u52b9\u306a\u5165\u529b\u306e\u5834\u5408\u3001\u753b\u50cf\u3092\u66f4\u65b0\r\n          } else {\r\n            this.style.borderColor = 'red'; \/\/\u7121\u52b9\u306a\u5165\u529b\u306e\u5834\u5408\u3001\u5165\u529b\u6b04\u3092\u8d64\u304f\u3059\u308b\r\n          }\r\n        });\r\n      });\r\n\r\n      await drawBackground();\r\n      await drawText();\r\n      await finishImageGeneration();\r\n\r\n    } catch (error) {\r\n      console.error(\"\u753b\u50cf\u751f\u6210\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f:\", error);\r\n    }\r\n  }; \/\/\/function generateImage();\r\n\r\n\r\n  \/\/\u30c6\u30ad\u30b9\u30c8\u5165\u529b\u6b04\u306e\u5909\u66f4\u3092\u76e3\u8996\r\n  document.getElementById('encodeArea').addEventListener('input', generateImage);\r\n\r\n\r\n  \/\/\u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306b\u524a\u9664\u30dc\u30bf\u30f3\u306e\u8868\u793a\u3092\u8a2d\u5b9a\r\n  window.addEventListener('load', function () {\r\n    document.getElementById('remove-bgImage').style.display = backgroundImage ? 'inline-block' : 'none';\r\n  });\r\n<\/script>\r\n\r\n\r\n<script>\r\n  \/\/\u5165\u529b\u5024\u3092localStorage\u306b\u4fdd\u5b58\u3057\u3001\u6b21\u56de\u8aad\u307f\u8fbc\u307f\u6642\u306b\u5fa9\u5143\u3059\u308b\r\n  document.addEventListener('DOMContentLoaded', function () {\r\n    \/\/\u4fdd\u5b58\u3059\u308b\u8981\u7d20\u306eID\u30ea\u30b9\u30c8\r\n    const elementsToSave = [\r\n      'encodeArea', 'input-width', 'input-height', 'input-paddingTop', 'input-paddingRight', 'input-paddingBottom', 'input-paddingLeft', 'input-bgColor', 'encodeAreaColor', 'input-lineHeight', 'select-fontFamily', 'input-fontSize', 'input-fontWeight'\r\n    ];\r\n\r\n    \/\/\u5024\u3092\u4fdd\u5b58\u3059\u308b\u95a2\u6570\r\n    function saveValues() {\r\n      elementsToSave.forEach(id => {\r\n        const element = document.getElementById(id);\r\n        if (element) {\r\n          localStorage.setItem(id, element.value);\r\n        }\r\n      });\r\n    }\r\n\r\n    \/\/\u5024\u3092\u8aad\u307f\u8fbc\u3080\u95a2\u6570\r\n    function loadValues() {\r\n      elementsToSave.forEach(id => {\r\n        const savedValue = localStorage.getItem(id);\r\n        if (savedValue !== null) {\r\n          const element = document.getElementById(id);\r\n          if (element) {\r\n            element.value = savedValue;\r\n          }\r\n        }\r\n      });\r\n    }\r\n\r\n    \/\/\u521d\u56de\u8aad\u307f\u8fbc\u307f\u6642\u306b\u5024\u3092\u5fa9\u5143\r\n    loadValues();\r\n\r\n    \/\/\u5404\u5165\u529b\u8981\u7d20\u306e\u5909\u66f4\u3092\u76e3\u8996\u3057\u3001\u5024\u304c\u5909\u66f4\u3055\u308c\u305f\u3089\u4fdd\u5b58\r\n    elementsToSave.forEach(id => {\r\n      const element = document.getElementById(id);\r\n      if (element) {\r\n        element.addEventListener('input', saveValues);\r\n      }\r\n    });\r\n  });\r\n\r\n\r\n  \/\/\u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306b\u521d\u671f\u753b\u50cf\u3092\u751f\u6210\r\n  window.onload = function () {\r\n    generateImage();\r\n  };\r\n<\/script>","protected":false},"excerpt":{"rendered":"\u30c6\u30ad\u30b9\u30c8\u3092\u753b\u50cf\u306b\u5909\u63db\u3059\u308b\u30aa\u30f3\u30e9\u30a4\u30f3\u753b\u50cf\u751f\u6210\u30c4\u30fc\u30eb\u3002SNS\u30fb\u30d6\u30ed\u30b0\u7528\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u3092\u77ac\u6642\u306b\u4f5c\u6210\u3002\u30d5\u30a9\u30f3\u30c8\u3001\u8272\u3001\u80cc\u666f\u3092\u81ea\u7531\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u3002","protected":false},"author":1,"featured_media":8601,"parent":173,"menu_order":42,"comment_status":"closed","ping_status":"closed","template":"templates\/page-converter.php","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","_exclude_from_list_pages":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[958,21],"tags":[],"class_list":["post-6032","page","type-page","status-publish","has-post-thumbnail","category-mediaedit","category-tool"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/6032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=6032"}],"version-history":[{"count":3,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/6032\/revisions"}],"predecessor-version":[{"id":12772,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/6032\/revisions\/12772"}],"up":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/8601"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=6032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=6032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=6032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}