Cursive Text Generator<\/title>\n <style>\n \/* \u5909\u66f4\u70b9: \u5168\u4f53\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u8abf\u6574 *\/\n body {\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n text-align: center;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n color: #333;\n }\n\n \/* \u5909\u66f4\u70b9: \u30b3\u30f3\u30c6\u30f3\u30c4\u5e45\u3092\u5236\u5fa1\u3059\u308b\u30b3\u30f3\u30c6\u30ca\u3092\u8ffd\u52a0 *\/\n .container {\n max-width: 800px;\n margin: 0 auto;\n background: #fff;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n border-radius: 8px;\n }\n\n .adjust-spacing {\n letter-spacing: normal;\n }\n\n @font-face {\n font-family: 'Graphecrit';\n src: url('.\/wp-content\/uploads\/2024\/01\/graphecrit.otf') format('opentype');\n }\n\n \/* \u5165\u529b\u30a8\u30ea\u30a2\u3068\u30dc\u30bf\u30f3\u306e\u30b9\u30bf\u30a4\u30eb\u6539\u5584 *\/\n #textInput {\n width: 100%;\n box-sizing: border-box; \/* \u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u542b\u3081\u305f\u5e45\u8a08\u7b97 *\/\n padding: 15px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 16px;\n margin-bottom: 20px;\n resize: vertical;\n }\n\n #saveButton {\n background-color: #2b42cb;\n color: white;\n border: none;\n padding: 12px 30px;\n font-size: 16px;\n border-radius: 25px;\n cursor: pointer;\n transition: background-color 0.3s;\n width: 100%;\n max-width: 300px; \/* PC\u3067\u5e83\u304c\u308a\u3059\u304e\u306a\u3044\u3088\u3046\u306b *\/\n margin-bottom: 20px;\n }\n\n #saveButton:hover {\n background-color: #1a2b8f;\n }\n\n \/* \u8868\u793a\u7528\u30c6\u30ad\u30b9\u30c8\u306e\u30b9\u30bf\u30a4\u30eb *\/\n #cursiveTextWrapper {\n \/* \u5909\u66f4\u70b9: \u30b9\u30de\u30db\u3067\u30ce\u30fc\u30c8\u304c\u306f\u307f\u51fa\u3059\u5834\u5408\u306b\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u3055\u305b\u308b\u67a0 *\/\n width: 100%;\n overflow-x: auto;\n border: 1px solid #ddd;\n margin-top: 20px;\n }\n\n #cursiveText, #textCanvas {\n font-family: 'Graphecrit', sans-serif;\n font-size: 64px;\n color: rgba(43, 66, 203, 0.89);\n background-color: #f8f8f8;\n background-image: \n linear-gradient(to right, lightgrey 1px, transparent 1px), \n linear-gradient(to bottom, #957DAD 3px, transparent 3px),\n linear-gradient(to bottom, lightgrey 1px, transparent 1px);\n background-size: \n 31px 14px,\n 14px 56px,\n 14px 14px;\n line-height: 56px;\n }\n\n #cursiveText {\n text-align: left; \/* \u30ce\u30fc\u30c8\u306a\u306e\u3067\u5de6\u5bc4\u305b *\/\n padding: 19px 29px 14px;\n \/* \u30ce\u30fc\u30c8\u306e\u5e45\u3092\u56fa\u5b9a\u307e\u305f\u306f\u6700\u5c0f\u5e45\u78ba\u4fdd\uff08\u30c7\u30b6\u30a4\u30f3\u5d29\u308c\u9632\u6b62\uff09 *\/\n min-width: 800px; \n box-sizing: border-box;\n white-space: pre-wrap;\n }\n\n canvas {\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <h2>\u7b46\u8a18\u4f53\u5909\u63db\u30c4\u30fc\u30eb<\/h2>\n <textarea id=\"textInput\" placeholder=\"\u30d5\u30e9\u30f3\u30b9\u8a9e\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\" rows=\"4\">\nBonjour, comment \u00e7a va ? J'esp\u00e8re que vous passez une bonne journ\u00e9e.\n <\/textarea>\n \n <button id=\"saveButton\">\u753b\u50cf\u3092\u4fdd\u5b58<\/button>\n\n <div id=\"cursiveTextWrapper\">\n <div id=\"cursiveText\"><\/div>\n <\/div>\n \n <canvas id=\"textCanvas\" width=\"800\" height=\"200\"><\/canvas>\n <\/div>\n\n <script>\n \/\/ \u74b0\u5883\u3054\u3068\u306e\u7e26\u8abf\u6574\u5024\u3092\u8fd4\u3059\u95a2\u6570\n function getVerticalAdjustment() {\n var ua = navigator.userAgent;\n \n \/\/ \u5909\u66f4\u70b9: && \u3092\u4f7f\u7528\u3057\u306a\u3044\u5f62\u306b\u66f8\u304d\u63db\u3048\n if (ua.indexOf(\"iPhone\") > -1) {\n return -33;\n }\n \n if (ua.indexOf(\"Macintosh\") > -1) {\n if (ua.indexOf(\"Chrome\") > -1) {\n return -28;\n }\n if (ua.indexOf(\"Safari\") > -1) {\n return -33;\n }\n }\n\n \/\/ \u305d\u306e\u4ed6\u306e\u74b0\u5883\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\n return -28;\n }\n\n \/\/ \u30c6\u30ad\u30b9\u30c8\u5165\u529b\u306b\u5fdc\u3058\u3066\u8868\u793a\u7528\u30c6\u30ad\u30b9\u30c8\u3092\u66f4\u65b0\n document.getElementById('textInput').addEventListener('input', function() {\n var text = this.value;\n var adjustedText = text.replace(\/T([^ ])\/g, 'T<span class=\"adjust-spacing\">$1<\/span>');\n document.getElementById('cursiveText').innerHTML = adjustedText;\n });\n\n document.addEventListener('DOMContentLoaded', function() {\n var initialText = document.getElementById('textInput').value;\n document.getElementById('cursiveText').innerHTML = initialText;\n });\n\n function saveAsPng() {\n var canvas = document.getElementById('textCanvas');\n var context = canvas.getContext('2d');\n\n \/\/ devicePixelRatio \u306b\u5bfe\u5fdc\n var dpr = window.devicePixelRatio;\n \/\/ \u5909\u66f4\u70b9: || \u3092\u4f7f\u7528\u3057\u3066\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\n if (!dpr) {\n dpr = 1;\n }\n \n var cssWidth = 800; \/\/ CSS\u4e0a\u306e\u5e45\n var text = document.getElementById('textInput').value;\n\n \/\/ \u30d5\u30a9\u30f3\u30c8\u8a2d\u5b9a\u3067\u30c6\u30ad\u30b9\u30c8\u30b5\u30a4\u30ba\u3092\u6e2c\u5b9a\n context.font = \"64px 'Graphecrit', sans-serif\";\n context.textBaseline = \"top\";\n var maxWidth = cssWidth - 40; \/\/ \u5de6\u53f320px\u305a\u3064\u306e\u4f59\u767d\n var lineHeight = 56;\n var lines = [];\n var paragraphs = text.split('\\n');\n \n for (var i = 0; i < paragraphs.length; i++) {\n var words = paragraphs[i].split(' ');\n var line = \"\";\n for (var n = 0; n < words.length; n++) {\n var testLine = line + words[n] + \" \";\n var metrics = context.measureText(testLine);\n \n \/\/ \u5909\u66f4\u70b9: && \u3092\u4f7f\u7528\u3057\u306a\u3044\u5f62\u306b\u66f8\u304d\u63db\u3048\n if (metrics.width > maxWidth) {\n if (n > 0) {\n lines.push(line);\n line = words[n] + \" \";\n } else {\n \/\/ \u5358\u8a9e\u81ea\u4f53\u304c\u9577\u3059\u304e\u308b\u5834\u5408\u306e\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\uff08\u5fc5\u8981\u306a\u3089\uff09\n line = testLine;\n }\n } else {\n line = testLine;\n }\n }\n lines.push(line);\n }\n \n var padding = 40;\n var cssHeight = lines.length * lineHeight + padding;\n \n \/\/ \u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u5b9f\u969b\u306e\u30b5\u30a4\u30ba\u3092 dpr \u306b\u5408\u308f\u305b\u3066\u8a2d\u5b9a\n canvas.width = cssWidth * dpr;\n canvas.height = cssHeight * dpr;\n canvas.style.width = cssWidth + \"px\";\n canvas.style.height = cssHeight + \"px\";\n\n \/\/ \u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u3057\u3066\u63cf\u753b\u5ea7\u6a19\u3092 CSS\u30d4\u30af\u30bb\u30eb\u306b\u5408\u308f\u305b\u308b\n context.scale(dpr, dpr);\n context.font = \"64px 'Graphecrit', sans-serif\";\n context.textBaseline = \"top\";\n\n \/\/ \u80cc\u666f\u306e\u63cf\u753b\n context.fillStyle = \"#f8f8f8\";\n context.fillRect(0, 0, cssWidth, cssHeight);\n\n \/\/ \u30b0\u30ea\u30c3\u30c9\u63cf\u753b\uff1a\u7e26\u7dda\uff0831px\u9593\u9694\u3001lightgrey\uff09\n context.strokeStyle = \"lightgrey\";\n for (var x = 0; x < cssWidth; x += 31) {\n context.beginPath();\n context.moveTo(x, 0);\n context.lineTo(x, cssHeight);\n context.stroke();\n }\n \/\/ \u6a2a\u7dda\uff0814px\u9593\u9694\u3001lightgrey\uff09\n for (var y = 0; y < cssHeight; y += 14) {\n context.beginPath();\n context.moveTo(0, y);\n context.lineTo(cssWidth, y);\n context.stroke();\n }\n \/\/ \u592a\u3044\u6a2a\u7dda\uff0856px\u9593\u9694\u3001#957DAD\u8272\u30013px\u7dda\uff09\n context.strokeStyle = \"#957DAD\";\n context.lineWidth = 3;\n for (var y = 0; y < cssHeight; y += 56) {\n context.beginPath();\n context.moveTo(0, y);\n context.lineTo(cssWidth, y);\n context.stroke();\n }\n context.lineWidth = 1;\n context.fillStyle = \"rgba(43, 66, 203, 0.89)\";\n\n var x = 28; \/\/ \u5de6\u4f59\u767d\n var y = 40; \/\/ \u4e0a\u4f59\u767d\n\n \/\/ \u74b0\u5883\u306b\u5408\u308f\u305b\u305f\u5fae\u8abf\u6574\u5024\u3092\u53d6\u5f97\n var verticalAdjustment = getVerticalAdjustment();\n \n \/\/ \u30c6\u30ad\u30b9\u30c8\u63cf\u753b\n for (var i = 0; i < lines.length; i++) {\n context.fillText(lines[i], x, y + verticalAdjustment + i * lineHeight);\n }\n\n \/\/ png\u753b\u50cf\u3068\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\n var link = document.createElement('a');\n link.download = \"text_image.png\";\n link.href = canvas.toDataURL(\"image\/png\");\n link.click();\n }\n\n document.getElementById('saveButton').addEventListener('click', saveAsPng);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><br>\u3000 \u7b46\u8a18\u4f53\u306f\u3001\u7121\u6599\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u7b46\u8a18\u4f53\u30d5\u30a9\u30f3\u30c8\u300c<a href=\"http:\/\/ecriture-cursive.com\/cursive-a-lecole-graphecrit\/\" title=\"\">Graph\u00e9crit<\/a>\u300d\u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3059\u3002<br>\u3000\u3053\u306e\u30d5\u30a9\u30f3\u30c8\u306f\u3001\u5b66\u6821\u3067\u306e\u7b46\u8a18\u4f53\u5b66\u7fd2\u306e\u305f\u3081\u306b\u30c7\u30b6\u30a4\u30f3\u3055\u308c\u3066\u3044\u307e\u3059\u3002Graph\u00e9crit\u306f\u6d41\u308c\u308b\u3088\u3046\u306a\u81ea\u7136\u306a\u66f8\u4f53\u3067\u3042\u308a\u3001\u6559\u5e2b\u305f\u3061\u306e\u8981\u671b\u306b\u5fdc\u3048\u308b\u3088\u3046\u306b\u7d99\u7d9a\u7684\u306b\u6539\u826f\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u6587\u5b57\u306e\u30b5\u30a4\u30ba\u3001\u5f62\u72b6\u3001\u6587\u5b57\u9593\u306e\u3064\u306a\u304c\u308a\u306a\u3069\u304c\u7d30\u304b\u304f\u8abf\u6574\u3055\u308c\u3066\u304a\u308a\u3001\u7b46\u8a18\u4f53\u5b66\u7fd2\u306b\u9069\u3057\u305f\u30d5\u30a9\u30f3\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<div class=\"affiliate-box\"><div class=\"affiliate-containar\"><a href=\"https:\/\/amzn.to\/3RPVEva\" rel=\"nofollow\"><img decoding=\"async\" style=\"border: none;\" src=\"https:\/\/m.media-amazon.com\/images\/I\/81hj4XVXPVL._SY522_.jpg\" target=\"_blank\"><\/a><div class=\"affiliate-content\"><a href=\"https:\/\/amzn.to\/3RPVEva\" rel=\"nofollow\">\u30d5\u30e9\u8a9e\u5165\u9580\u3001\u308f\u304b\u308a\u3084\u3059\u3044\u306b\u3082\u30db\u30c9\u304c\u3042\u308b! <\/a><ul class=\"affiliate-button\"><li><a href=\"https:\/\/amzn.to\/3RPVEva\" rel=\"nofollow\">Amazon<\/a><\/li><\/ul><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u30ed\u30fc\u30de\u5b57\u3092\u30d5\u30e9\u30f3\u30b9\u8a9e\u306e\u7b46\u8a18\u4f53\u306b\u5909\u63db\u3057\u307e\u3059\u3002 Cursive Text Generator \u7b46\u8a18\u4f53\u5909\u63db\u30c4\u30fc\u30eb Bonjour, comment \u00e7a va ? J'esp\u00e8re que vous passez une bo […]<\/p>\n","protected":false},"author":1,"featured_media":3704,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[19],"tags":[],"class_list":["post-3633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-19"],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/ubun2m.com\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-14-at-15.52.10.png","_links":{"self":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts\/3633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3633"}],"version-history":[{"count":1,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts\/3633\/revisions"}],"predecessor-version":[{"id":5261,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts\/3633\/revisions\/5261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/media\/3704"}],"wp:attachment":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3633,"date":"2024-01-14T15:52:36","date_gmt":"2024-01-14T06:52:36","guid":{"rendered":"https:\/\/ubun2m.com\/?p=3633"},"modified":"2025-12-21T11:05:16","modified_gmt":"2025-12-21T02:05:16","slug":"%e3%83%95%e3%83%a9%e3%83%b3%e3%82%b9%e8%aa%9e%e7%ad%86%e8%a8%98%e4%bd%93%e5%a4%89%e6%8f%9b%e3%83%84%e3%83%bc%e3%83%ab","status":"publish","type":"post","link":"https:\/\/ubun2m.com\/?p=3633","title":{"rendered":"\u30d5\u30e9\u30f3\u30b9\u8a9e\u7b46\u8a18\u4f53\u5909\u63db\u30c4\u30fc\u30eb"},"content":{"rendered":"\n

\u30ed\u30fc\u30de\u5b57\u3092\u30d5\u30e9\u30f3\u30b9\u8a9e\u306e\u7b46\u8a18\u4f53\u306b\u5909\u63db\u3057\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n \n \n Cursive Text Generator<\/title>\n <style>\n \/* \u5909\u66f4\u70b9: \u5168\u4f53\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u8abf\u6574 *\/\n body {\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n text-align: center;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n color: #333;\n }\n\n \/* \u5909\u66f4\u70b9: \u30b3\u30f3\u30c6\u30f3\u30c4\u5e45\u3092\u5236\u5fa1\u3059\u308b\u30b3\u30f3\u30c6\u30ca\u3092\u8ffd\u52a0 *\/\n .container {\n max-width: 800px;\n margin: 0 auto;\n background: #fff;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n border-radius: 8px;\n }\n\n .adjust-spacing {\n letter-spacing: normal;\n }\n\n @font-face {\n font-family: 'Graphecrit';\n src: url('.\/wp-content\/uploads\/2024\/01\/graphecrit.otf') format('opentype');\n }\n\n \/* \u5165\u529b\u30a8\u30ea\u30a2\u3068\u30dc\u30bf\u30f3\u306e\u30b9\u30bf\u30a4\u30eb\u6539\u5584 *\/\n #textInput {\n width: 100%;\n box-sizing: border-box; \/* \u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u542b\u3081\u305f\u5e45\u8a08\u7b97 *\/\n padding: 15px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 16px;\n margin-bottom: 20px;\n resize: vertical;\n }\n\n #saveButton {\n background-color: #2b42cb;\n color: white;\n border: none;\n padding: 12px 30px;\n font-size: 16px;\n border-radius: 25px;\n cursor: pointer;\n transition: background-color 0.3s;\n width: 100%;\n max-width: 300px; \/* PC\u3067\u5e83\u304c\u308a\u3059\u304e\u306a\u3044\u3088\u3046\u306b *\/\n margin-bottom: 20px;\n }\n\n #saveButton:hover {\n background-color: #1a2b8f;\n }\n\n \/* \u8868\u793a\u7528\u30c6\u30ad\u30b9\u30c8\u306e\u30b9\u30bf\u30a4\u30eb *\/\n #cursiveTextWrapper {\n \/* \u5909\u66f4\u70b9: \u30b9\u30de\u30db\u3067\u30ce\u30fc\u30c8\u304c\u306f\u307f\u51fa\u3059\u5834\u5408\u306b\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u3055\u305b\u308b\u67a0 *\/\n width: 100%;\n overflow-x: auto;\n border: 1px solid #ddd;\n margin-top: 20px;\n }\n\n #cursiveText, #textCanvas {\n font-family: 'Graphecrit', sans-serif;\n font-size: 64px;\n color: rgba(43, 66, 203, 0.89);\n background-color: #f8f8f8;\n background-image: \n linear-gradient(to right, lightgrey 1px, transparent 1px), \n linear-gradient(to bottom, #957DAD 3px, transparent 3px),\n linear-gradient(to bottom, lightgrey 1px, transparent 1px);\n background-size: \n 31px 14px,\n 14px 56px,\n 14px 14px;\n line-height: 56px;\n }\n\n #cursiveText {\n text-align: left; \/* \u30ce\u30fc\u30c8\u306a\u306e\u3067\u5de6\u5bc4\u305b *\/\n padding: 19px 29px 14px;\n \/* \u30ce\u30fc\u30c8\u306e\u5e45\u3092\u56fa\u5b9a\u307e\u305f\u306f\u6700\u5c0f\u5e45\u78ba\u4fdd\uff08\u30c7\u30b6\u30a4\u30f3\u5d29\u308c\u9632\u6b62\uff09 *\/\n min-width: 800px; \n box-sizing: border-box;\n white-space: pre-wrap;\n }\n\n canvas {\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"container\">\n <h2>\u7b46\u8a18\u4f53\u5909\u63db\u30c4\u30fc\u30eb<\/h2>\n <textarea id=\"textInput\" placeholder=\"\u30d5\u30e9\u30f3\u30b9\u8a9e\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\" rows=\"4\">\nBonjour, comment \u00e7a va ? J'esp\u00e8re que vous passez une bonne journ\u00e9e.\n <\/textarea>\n \n <button id=\"saveButton\">\u753b\u50cf\u3092\u4fdd\u5b58<\/button>\n\n <div id=\"cursiveTextWrapper\">\n <div id=\"cursiveText\"><\/div>\n <\/div>\n \n <canvas id=\"textCanvas\" width=\"800\" height=\"200\"><\/canvas>\n <\/div>\n\n <script>\n \/\/ \u74b0\u5883\u3054\u3068\u306e\u7e26\u8abf\u6574\u5024\u3092\u8fd4\u3059\u95a2\u6570\n function getVerticalAdjustment() {\n var ua = navigator.userAgent;\n \n \/\/ \u5909\u66f4\u70b9: && \u3092\u4f7f\u7528\u3057\u306a\u3044\u5f62\u306b\u66f8\u304d\u63db\u3048\n if (ua.indexOf(\"iPhone\") > -1) {\n return -33;\n }\n \n if (ua.indexOf(\"Macintosh\") > -1) {\n if (ua.indexOf(\"Chrome\") > -1) {\n return -28;\n }\n if (ua.indexOf(\"Safari\") > -1) {\n return -33;\n }\n }\n\n \/\/ \u305d\u306e\u4ed6\u306e\u74b0\u5883\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\n return -28;\n }\n\n \/\/ \u30c6\u30ad\u30b9\u30c8\u5165\u529b\u306b\u5fdc\u3058\u3066\u8868\u793a\u7528\u30c6\u30ad\u30b9\u30c8\u3092\u66f4\u65b0\n document.getElementById('textInput').addEventListener('input', function() {\n var text = this.value;\n var adjustedText = text.replace(\/T([^ ])\/g, 'T<span class=\"adjust-spacing\">$1<\/span>');\n document.getElementById('cursiveText').innerHTML = adjustedText;\n });\n\n document.addEventListener('DOMContentLoaded', function() {\n var initialText = document.getElementById('textInput').value;\n document.getElementById('cursiveText').innerHTML = initialText;\n });\n\n function saveAsPng() {\n var canvas = document.getElementById('textCanvas');\n var context = canvas.getContext('2d');\n\n \/\/ devicePixelRatio \u306b\u5bfe\u5fdc\n var dpr = window.devicePixelRatio;\n \/\/ \u5909\u66f4\u70b9: || \u3092\u4f7f\u7528\u3057\u3066\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\n if (!dpr) {\n dpr = 1;\n }\n \n var cssWidth = 800; \/\/ CSS\u4e0a\u306e\u5e45\n var text = document.getElementById('textInput').value;\n\n \/\/ \u30d5\u30a9\u30f3\u30c8\u8a2d\u5b9a\u3067\u30c6\u30ad\u30b9\u30c8\u30b5\u30a4\u30ba\u3092\u6e2c\u5b9a\n context.font = \"64px 'Graphecrit', sans-serif\";\n context.textBaseline = \"top\";\n var maxWidth = cssWidth - 40; \/\/ \u5de6\u53f320px\u305a\u3064\u306e\u4f59\u767d\n var lineHeight = 56;\n var lines = [];\n var paragraphs = text.split('\\n');\n \n for (var i = 0; i < paragraphs.length; i++) {\n var words = paragraphs[i].split(' ');\n var line = \"\";\n for (var n = 0; n < words.length; n++) {\n var testLine = line + words[n] + \" \";\n var metrics = context.measureText(testLine);\n \n \/\/ \u5909\u66f4\u70b9: && \u3092\u4f7f\u7528\u3057\u306a\u3044\u5f62\u306b\u66f8\u304d\u63db\u3048\n if (metrics.width > maxWidth) {\n if (n > 0) {\n lines.push(line);\n line = words[n] + \" \";\n } else {\n \/\/ \u5358\u8a9e\u81ea\u4f53\u304c\u9577\u3059\u304e\u308b\u5834\u5408\u306e\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\uff08\u5fc5\u8981\u306a\u3089\uff09\n line = testLine;\n }\n } else {\n line = testLine;\n }\n }\n lines.push(line);\n }\n \n var padding = 40;\n var cssHeight = lines.length * lineHeight + padding;\n \n \/\/ \u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u5b9f\u969b\u306e\u30b5\u30a4\u30ba\u3092 dpr \u306b\u5408\u308f\u305b\u3066\u8a2d\u5b9a\n canvas.width = cssWidth * dpr;\n canvas.height = cssHeight * dpr;\n canvas.style.width = cssWidth + \"px\";\n canvas.style.height = cssHeight + \"px\";\n\n \/\/ \u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u3057\u3066\u63cf\u753b\u5ea7\u6a19\u3092 CSS\u30d4\u30af\u30bb\u30eb\u306b\u5408\u308f\u305b\u308b\n context.scale(dpr, dpr);\n context.font = \"64px 'Graphecrit', sans-serif\";\n context.textBaseline = \"top\";\n\n \/\/ \u80cc\u666f\u306e\u63cf\u753b\n context.fillStyle = \"#f8f8f8\";\n context.fillRect(0, 0, cssWidth, cssHeight);\n\n \/\/ \u30b0\u30ea\u30c3\u30c9\u63cf\u753b\uff1a\u7e26\u7dda\uff0831px\u9593\u9694\u3001lightgrey\uff09\n context.strokeStyle = \"lightgrey\";\n for (var x = 0; x < cssWidth; x += 31) {\n context.beginPath();\n context.moveTo(x, 0);\n context.lineTo(x, cssHeight);\n context.stroke();\n }\n \/\/ \u6a2a\u7dda\uff0814px\u9593\u9694\u3001lightgrey\uff09\n for (var y = 0; y < cssHeight; y += 14) {\n context.beginPath();\n context.moveTo(0, y);\n context.lineTo(cssWidth, y);\n context.stroke();\n }\n \/\/ \u592a\u3044\u6a2a\u7dda\uff0856px\u9593\u9694\u3001#957DAD\u8272\u30013px\u7dda\uff09\n context.strokeStyle = \"#957DAD\";\n context.lineWidth = 3;\n for (var y = 0; y < cssHeight; y += 56) {\n context.beginPath();\n context.moveTo(0, y);\n context.lineTo(cssWidth, y);\n context.stroke();\n }\n context.lineWidth = 1;\n context.fillStyle = \"rgba(43, 66, 203, 0.89)\";\n\n var x = 28; \/\/ \u5de6\u4f59\u767d\n var y = 40; \/\/ \u4e0a\u4f59\u767d\n\n \/\/ \u74b0\u5883\u306b\u5408\u308f\u305b\u305f\u5fae\u8abf\u6574\u5024\u3092\u53d6\u5f97\n var verticalAdjustment = getVerticalAdjustment();\n \n \/\/ \u30c6\u30ad\u30b9\u30c8\u63cf\u753b\n for (var i = 0; i < lines.length; i++) {\n context.fillText(lines[i], x, y + verticalAdjustment + i * lineHeight);\n }\n\n \/\/ png\u753b\u50cf\u3068\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\n var link = document.createElement('a');\n link.download = \"text_image.png\";\n link.href = canvas.toDataURL(\"image\/png\");\n link.click();\n }\n\n document.getElementById('saveButton').addEventListener('click', saveAsPng);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><br>\u3000 \u7b46\u8a18\u4f53\u306f\u3001\u7121\u6599\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u7b46\u8a18\u4f53\u30d5\u30a9\u30f3\u30c8\u300c<a href=\"http:\/\/ecriture-cursive.com\/cursive-a-lecole-graphecrit\/\" title=\"\">Graph\u00e9crit<\/a>\u300d\u3092\u5229\u7528\u3057\u3066\u3044\u307e\u3059\u3002<br>\u3000\u3053\u306e\u30d5\u30a9\u30f3\u30c8\u306f\u3001\u5b66\u6821\u3067\u306e\u7b46\u8a18\u4f53\u5b66\u7fd2\u306e\u305f\u3081\u306b\u30c7\u30b6\u30a4\u30f3\u3055\u308c\u3066\u3044\u307e\u3059\u3002Graph\u00e9crit\u306f\u6d41\u308c\u308b\u3088\u3046\u306a\u81ea\u7136\u306a\u66f8\u4f53\u3067\u3042\u308a\u3001\u6559\u5e2b\u305f\u3061\u306e\u8981\u671b\u306b\u5fdc\u3048\u308b\u3088\u3046\u306b\u7d99\u7d9a\u7684\u306b\u6539\u826f\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u6587\u5b57\u306e\u30b5\u30a4\u30ba\u3001\u5f62\u72b6\u3001\u6587\u5b57\u9593\u306e\u3064\u306a\u304c\u308a\u306a\u3069\u304c\u7d30\u304b\u304f\u8abf\u6574\u3055\u308c\u3066\u304a\u308a\u3001\u7b46\u8a18\u4f53\u5b66\u7fd2\u306b\u9069\u3057\u305f\u30d5\u30a9\u30f3\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<div class=\"affiliate-box\"><div class=\"affiliate-containar\"><a href=\"https:\/\/amzn.to\/3RPVEva\" rel=\"nofollow\"><img decoding=\"async\" style=\"border: none;\" src=\"https:\/\/m.media-amazon.com\/images\/I\/81hj4XVXPVL._SY522_.jpg\" target=\"_blank\"><\/a><div class=\"affiliate-content\"><a href=\"https:\/\/amzn.to\/3RPVEva\" rel=\"nofollow\">\u30d5\u30e9\u8a9e\u5165\u9580\u3001\u308f\u304b\u308a\u3084\u3059\u3044\u306b\u3082\u30db\u30c9\u304c\u3042\u308b! <\/a><ul class=\"affiliate-button\"><li><a href=\"https:\/\/amzn.to\/3RPVEva\" rel=\"nofollow\">Amazon<\/a><\/li><\/ul><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u30ed\u30fc\u30de\u5b57\u3092\u30d5\u30e9\u30f3\u30b9\u8a9e\u306e\u7b46\u8a18\u4f53\u306b\u5909\u63db\u3057\u307e\u3059\u3002 Cursive Text Generator \u7b46\u8a18\u4f53\u5909\u63db\u30c4\u30fc\u30eb Bonjour, comment \u00e7a va ? J'esp\u00e8re que vous passez une bo […]<\/p>\n","protected":false},"author":1,"featured_media":3704,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[19],"tags":[],"class_list":["post-3633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-19"],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/ubun2m.com\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-14-at-15.52.10.png","_links":{"self":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts\/3633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3633"}],"version-history":[{"count":1,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts\/3633\/revisions"}],"predecessor-version":[{"id":5261,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts\/3633\/revisions\/5261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/media\/3704"}],"wp:attachment":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}