<\/p>\n\n\n
\n<!DOCTYPE html>\n<html lang="ja">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>\u5275\u4f5c\u30a2\u30a4\u30c7\u30a3\u30a2\u751f\u6210\u30b5\u30a4\u30c8<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: var(--background-color, #f4f6f9);\n }\n .container {\n max-width: 800px;\n width: 90%;\n padding: 20px;\n text-align: center;\n background-color: var(--chat-bg-color, #ffffff);\n border-radius: 10px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n margin-top: 20px;\n }\n .title {\n font-size: 24px;\n margin-bottom: 15px;\n }\n .theme-toggle-btn {\n position: absolute;\n right: 15px;\n top: 15px;\n padding: 5px 10px;\n cursor: pointer;\n border: none;\n background-color: #0078d7;\n color: #ffffff;\n border-radius: 5px;\n }\n .dropdown, .input, .button {\n width: 80%;\n margin: 5px;\n padding: 10px;\n font-size: 16px;\n }\n .idea-display {\n margin-top: 20px;\n font-size: 18px;\n padding: 15px;\n color: #333;\n background-color: #f4f4f4;\n border-radius: 10px;\n text-align: left;\n }\n .related-ideas {\n font-size: 14px;\n color: #555;\n margin-top: 10px;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class="container">\n <h1 class="title">\u5275\u4f5c\u30a2\u30a4\u30c7\u30a3\u30a2\u751f\u6210\u30b5\u30a4\u30c8<\/h1>\n\n <button class="theme-toggle-btn" onclick="toggleTheme()">\ud83c\udf19 \u30c0\u30fc\u30af\u30e2\u30fc\u30c9<\/button>\n\n <label for="categorySelect">\u30ab\u30c6\u30b4\u30ea\u3092\u9078\u629e<\/label>\n <select id="categorySelect" class="dropdown">\n <option value="fantasy">\u30d5\u30a1\u30f3\u30bf\u30b8\u30fc<\/option>\n <option value="sci-fi">SF<\/option>\n <option value="mystery">\u30df\u30b9\u30c6\u30ea\u30fc<\/option>\n <option value="horror">\u30db\u30e9\u30fc<\/option>\n <\/select>\n\t<BR>\n <label for="elementSelect">\u8a73\u7d30\u8981\u7d20\u3092\u9078\u629e<\/label>\n <select id="elementSelect" class="dropdown">\n <option value="character">\u30ad\u30e3\u30e9\u30af\u30bf\u30fc<\/option>\n <option value="plot">\u30d7\u30ed\u30c3\u30c8<\/option>\n <option value="setting">\u821e\u53f0\u8a2d\u5b9a<\/option>\n <option value="theme">\u30c6\u30fc\u30de<\/option>\n <\/select>\n\n <button class="button" onclick="generateIdea()">\u30a2\u30a4\u30c7\u30a3\u30a2\u751f\u6210<\/button>\n\n <div class="idea-display" id="ideaDisplay">\u3053\u3053\u306b\u751f\u6210\u3055\u308c\u305f\u30a2\u30a4\u30c7\u30a3\u30a2\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/div>\n\n <div class="related-ideas" id="relatedIdeas"><\/div>\n<\/div>\n\n<script>\n const ideas = {\n "fantasy": {\n "character": ["\u52c7\u6562\u306a\u9a0e\u58eb", "\u795e\u79d8\u7684\u306a\u9b54\u6cd5\u4f7f\u3044", "\u4e0d\u601d\u8b70\u306a\u751f\u7269"],\n "plot": ["\u738b\u56fd\u3092\u6551\u3046\u305f\u3081\u306e\u5192\u967a", "\u9b54\u6cd5\u306e\u79d8\u5b9d\u3092\u5de1\u308b\u4e89\u3044", "\u7981\u65ad\u306e\u9b54\u6cd5\u3092\u63a2\u6c42\u3059\u308b\u65c5"],\n "setting": ["\u30c9\u30e9\u30b4\u30f3\u304c\u4f4f\u3080\u5c71", "\u4e0d\u601d\u8b70\u306a\u68ee", "\u6d77\u5e95\u306e\u738b\u56fd"],\n "theme": ["\u53cb\u60c5\u3068\u52c7\u6c17", "\u904b\u547d\u3068\u6226\u3044", "\u9b54\u6cd5\u3068\u73fe\u5b9f\u306e\u5bfe\u7acb"]\n },\n "sci-fi": {\n "character": ["\u5b87\u5b99\u98db\u884c\u58eb", "AI\u30ed\u30dc\u30c3\u30c8", "\u30b5\u30a4\u30dc\u30fc\u30b0"],\n "plot": ["\u7570\u661f\u4eba\u3068\u306e\u63a5\u89e6", "\u672a\u6765\u90fd\u5e02\u306e\u9670\u8b00", "\u5b87\u5b99\u6226\u4e89"],\n "setting": ["\u5b87\u5b99\u30b9\u30c6\u30fc\u30b7\u30e7\u30f3", "\u8352\u5ec3\u3057\u305f\u5730\u7403", "\u4eba\u5de5\u60d1\u661f"],\n "theme": ["\u4eba\u9593\u3068\u6a5f\u68b0\u306e\u5171\u5b58", "\u9032\u5316\u306e\u5371\u6a5f", "\u6587\u660e\u306e\u5d29\u58ca\u3068\u518d\u751f"]\n }\n };\n\n const relatedIdeas = {\n "\u53cb\u60c5\u3068\u52c7\u6c17": ["\u6226\u5834\u3067\u306e\u53cb\u60c5", "\u5171\u306b\u6226\u3046\u53cb\u4eba\u306e\u7d46"],\n "\u904b\u547d\u3068\u6226\u3044": ["\u904b\u547d\u306b\u6297\u3046\u30d2\u30fc\u30ed\u30fc", "\u904e\u53bb\u3092\u80cc\u8ca0\u3046\u4e3b\u4eba\u516c\u306e\u6c7a\u610f"]\n };\n\n let isDarkMode = false;\n\n function toggleTheme() {\n isDarkMode = !isDarkMode;\n document.body.style.setProperty("--background-color", isDarkMode ? "#333" : "#f4f6f9");\n document.body.style.setProperty("--chat-bg-color", isDarkMode ? "#444" : "#ffffff");\n document.querySelector(".theme-toggle-btn").textContent = isDarkMode ? "\ud83c\udf1e \u30e9\u30a4\u30c8\u30e2\u30fc\u30c9" : "\ud83c\udf19 \u30c0\u30fc\u30af\u30e2\u30fc\u30c9";\n }\n\n function generateIdea() {\n const category = document.getElementById("categorySelect").value;\n const element = document.getElementById("elementSelect").value;\n const ideaArray = ideas[category][element];\n const randomIdea = ideaArray[Math.floor(Math.random() * ideaArray.length)];\n document.getElementById("ideaDisplay").textContent = randomIdea;\n\n displayRelatedIdeas(randomIdea);\n }\n\n function displayRelatedIdeas(idea) {\n const relatedDiv = document.getElementById("relatedIdeas");\n relatedDiv.innerHTML = "<h4>\u95a2\u9023\u3059\u308b\u30a2\u30a4\u30c7\u30a3\u30a2:<\/h4>";\n const relatedItems = relatedIdeas[idea] || ["\u95a2\u9023\u30a2\u30a4\u30c7\u30a3\u30a2\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093"];\n relatedItems.forEach(item => {\n const relatedItemDiv = document.createElement("div");\n relatedItemDiv.textContent = `- ${item}`;\n relatedDiv.appendChild(relatedItemDiv);\n });\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[80],"tags":[42],"class_list":["post-25654","post","type-post","status-publish","format-standard","hentry","category-html","tag-html"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25654"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25654\/revisions"}],"predecessor-version":[{"id":25656,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25654\/revisions\/25656"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25654"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}