{"id":210,"date":"2025-07-16T13:46:03","date_gmt":"2025-07-16T04:46:03","guid":{"rendered":"https:\/\/wing-950.com\/?page_id=210"},"modified":"2025-07-16T13:46:04","modified_gmt":"2025-07-16T04:46:04","slug":"210-2","status":"publish","type":"page","link":"https:\/\/wing-950.com\/?page_id=210","title":{"rendered":""},"content":{"rendered":"


\n
\n
\n
\n
\nMyBlog – \u30d6\u30ed\u30b0\uff06\u30d5\u30a1\u30a4\u30eb\u7ba1\u7406<\/title><\/p>\n<style>\n * {<br \/>\n margin: 0;<br \/>\n padding: 0;<br \/>\n box-sizing: border-box;<br \/>\n }<\/p>\n<p> body {<br \/>\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;<br \/>\n line-height: 1.6;<br \/>\n color: #333;<br \/>\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);<br \/>\n min-height: 100vh;<br \/>\n }<\/p>\n<p> .container {<br \/>\n max-width: 1200px;<br \/>\n margin: 0 auto;<br \/>\n padding: 0 20px;<br \/>\n }<\/p>\n<p> header {<br \/>\n background: rgba(255, 255, 255, 0.95);<br \/>\n backdrop-filter: blur(10px);<br \/>\n padding: 1rem 0;<br \/>\n position: fixed;<br \/>\n width: 100%;<br \/>\n top: 0;<br \/>\n z-index: 1000;<br \/>\n box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);<br \/>\n }<\/p>\n<p> nav {<br \/>\n display: flex;<br \/>\n justify-content: space-between;<br \/>\n align-items: center;<br \/>\n }<\/p>\n<p> .logo {<br \/>\n font-size: 1.8rem;<br \/>\n font-weight: bold;<br \/>\n color: #667eea;<br \/>\n text-decoration: none;<br \/>\n }<\/p>\n<p> .nav-links {<br \/>\n display: flex;<br \/>\n list-style: none;<br \/>\n gap: 2rem;<br \/>\n }<\/p>\n<p> .nav-links a {<br \/>\n text-decoration: none;<br \/>\n color: #333;<br \/>\n font-weight: 500;<br \/>\n transition: color 0.3s ease;<br \/>\n }<\/p>\n<p> .nav-links a:hover {<br \/>\n color: #667eea;<br \/>\n }<\/p>\n<p> main {<br \/>\n margin-top: 80px;<br \/>\n padding: 2rem 0;<br \/>\n }<\/p>\n<p> .hero {<br \/>\n text-align: center;<br \/>\n padding: 4rem 0;<br \/>\n color: white;<br \/>\n }<\/p>\n<p> .hero h1 {<br \/>\n font-size: 3rem;<br \/>\n margin-bottom: 1rem;<br \/>\n animation: fadeInUp 1s ease-out;<br \/>\n }<\/p>\n<p> .hero p {<br \/>\n font-size: 1.2rem;<br \/>\n margin-bottom: 2rem;<br \/>\n animation: fadeInUp 1s ease-out 0.2s both;<br \/>\n }<\/p>\n<p> .btn {<br \/>\n display: inline-block;<br \/>\n background: rgba(255, 255, 255, 0.2);<br \/>\n color: white;<br \/>\n padding: 12px 30px;<br \/>\n text-decoration: none;<br \/>\n border-radius: 50px;<br \/>\n border: 2px solid rgba(255, 255, 255, 0.3);<br \/>\n transition: all 0.3s ease;<br \/>\n backdrop-filter: blur(10px);<br \/>\n animation: fadeInUp 1s ease-out 0.4s both;<br \/>\n }<\/p>\n<p> .btn:hover {<br \/>\n background: rgba(255, 255, 255, 0.3);<br \/>\n transform: translateY(-2px);<br \/>\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);<br \/>\n }<\/p>\n<p> .content-section {<br \/>\n background: white;<br \/>\n border-radius: 15px;<br \/>\n padding: 2rem;<br \/>\n margin: 2rem 0;<br \/>\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);<br \/>\n animation: fadeInUp 1s ease-out;<br \/>\n }<\/p>\n<p> .section-title {<br \/>\n color: #667eea;<br \/>\n font-size: 2rem;<br \/>\n margin-bottom: 1rem;<br \/>\n text-align: center;<br \/>\n }<\/p>\n<p> .blog-grid {<br \/>\n display: grid;<br \/>\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));<br \/>\n gap: 2rem;<br \/>\n margin-top: 2rem;<br \/>\n }<\/p>\n<p> .blog-card {<br \/>\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);<br \/>\n border-radius: 10px;<br \/>\n padding: 1.5rem;<br \/>\n transition: transform 0.3s ease, box-shadow 0.3s ease;<br \/>\n cursor: pointer;<br \/>\n }<\/p>\n<p> .blog-card:hover {<br \/>\n transform: translateY(-5px);<br \/>\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);<br \/>\n }<\/p>\n<p> .blog-card h3 {<br \/>\n color: #333;<br \/>\n margin-bottom: 0.5rem;<br \/>\n }<\/p>\n<p> .blog-date {<br \/>\n color: #666;<br \/>\n font-size: 0.9rem;<br \/>\n margin-bottom: 1rem;<br \/>\n }<\/p>\n<p> .blog-excerpt {<br \/>\n color: #555;<br \/>\n line-height: 1.5;<br \/>\n }<\/p>\n<p> .file-section {<br \/>\n display: grid;<br \/>\n grid-template-columns: 1fr 1fr;<br \/>\n gap: 2rem;<br \/>\n margin-top: 2rem;<br \/>\n }<\/p>\n<p> .file-upload, .file-list {<br \/>\n background: #f8f9fa;<br \/>\n border-radius: 10px;<br \/>\n padding: 1.5rem;<br \/>\n }<\/p>\n<p> .file-upload h3, .file-list h3 {<br \/>\n color: #333;<br \/>\n margin-bottom: 1rem;<br \/>\n }<\/p>\n<p> .file-input {<br \/>\n width: 100%;<br \/>\n padding: 10px;<br \/>\n border: 2px dashed #667eea;<br \/>\n border-radius: 5px;<br \/>\n text-align: center;<br \/>\n cursor: pointer;<br \/>\n transition: all 0.3s ease;<br \/>\n }<\/p>\n<p> .file-input:hover {<br \/>\n background: rgba(102, 126, 234, 0.1);<br \/>\n }<\/p>\n<p> .file-item {<br \/>\n display: flex;<br \/>\n justify-content: space-between;<br \/>\n align-items: center;<br \/>\n padding: 0.5rem 0;<br \/>\n border-bottom: 1px solid #eee;<br \/>\n }<\/p>\n<p> .file-name {<br \/>\n color: #333;<br \/>\n font-weight: 500;<br \/>\n }<\/p>\n<p> .file-size {<br \/>\n color: #666;<br \/>\n font-size: 0.9rem;<br \/>\n }<\/p>\n<p> .delete-btn {<br \/>\n background: #ff4757;<br \/>\n color: white;<br \/>\n border: none;<br \/>\n padding: 5px 10px;<br \/>\n border-radius: 5px;<br \/>\n cursor: pointer;<br \/>\n font-size: 0.8rem;<br \/>\n transition: background 0.3s ease;<br \/>\n }<\/p>\n<p> .delete-btn:hover {<br \/>\n background: #ff3742;<br \/>\n }<\/p>\n<p> .blog-form {<br \/>\n background: #f8f9fa;<br \/>\n border-radius: 10px;<br \/>\n padding: 1.5rem;<br \/>\n margin-top: 2rem;<br \/>\n }<\/p>\n<p> .form-group {<br \/>\n margin-bottom: 1rem;<br \/>\n }<\/p>\n<p> .form-group label {<br \/>\n display: block;<br \/>\n margin-bottom: 0.5rem;<br \/>\n color: #333;<br \/>\n font-weight: 500;<br \/>\n }<\/p>\n<p> .form-group input, .form-group textarea {<br \/>\n width: 100%;<br \/>\n padding: 10px;<br \/>\n border: 1px solid #ddd;<br \/>\n border-radius: 5px;<br \/>\n font-size: 1rem;<br \/>\n }<\/p>\n<p> .form-group textarea {<br \/>\n height: 100px;<br \/>\n resize: vertical;<br \/>\n }<\/p>\n<p> .submit-btn {<br \/>\n background: #667eea;<br \/>\n color: white;<br \/>\n border: none;<br \/>\n padding: 12px 30px;<br \/>\n border-radius: 5px;<br \/>\n cursor: pointer;<br \/>\n font-size: 1rem;<br \/>\n transition: background 0.3s ease;<br \/>\n }<\/p>\n<p> .submit-btn:hover {<br \/>\n background: #5a67d8;<br \/>\n }<\/p>\n<p> @keyframes fadeInUp {<br \/>\n from {<br \/>\n opacity: 0;<br \/>\n transform: translateY(30px);<br \/>\n }<br \/>\n to {<br \/>\n opacity: 1;<br \/>\n transform: translateY(0);<br \/>\n }<br \/>\n }<\/p>\n<p> @media (max-width: 768px) {<br \/>\n .nav-links {<br \/>\n display: none;<br \/>\n }<\/p>\n<p> .hero h1 {<br \/>\n font-size: 2rem;<br \/>\n }<\/p>\n<p> .file-section {<br \/>\n grid-template-columns: 1fr;<br \/>\n }<br \/>\n }<br \/>\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<header>\n<nav class=\"container\">\n <a href=\"#\" class=\"logo\">MyBlog<\/a><\/p>\n<ul class=\"nav-links\">\n<li><a href=\"#home\">\u30db\u30fc\u30e0<\/a><\/li>\n<li><a href=\"#blog\">\u30d6\u30ed\u30b0<\/a><\/li>\n<li><a href=\"#files\">\u30d5\u30a1\u30a4\u30eb<\/a><\/li>\n<li><a href=\"#about\">About<\/a><\/li>\n<\/ul>\n<\/nav>\n<\/header>\n<p> <main><\/p>\n<section class=\"hero\" id=\"home\">\n<div class=\"container\">\n<h1>Welcome to MyBlog<\/h1>\n<p>\u3042\u306a\u305f\u306e\u601d\u8003\u3092\u4e16\u754c\u306b\u767a\u4fe1\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u5b89\u5168\u306b\u7ba1\u7406<\/p>\n<p><a href=\"#blog\" class=\"btn\">\u30d6\u30ed\u30b0\u3092\u898b\u308b<\/a><\/div>\n<\/section>\n<section class=\"content-section container\" id=\"blog\">\n<h2 class=\"section-title\">\u6700\u65b0\u30d6\u30ed\u30b0\u8a18\u4e8b<\/h2>\n<div class=\"blog-grid\" id=\"blogGrid\">\n <!-- \u30d6\u30ed\u30b0\u8a18\u4e8b\u304c\u3053\u3053\u306b\u8868\u793a\u3055\u308c\u307e\u3059 --><\/div>\n<div class=\"blog-form\">\n<h3>\u65b0\u3057\u3044\u8a18\u4e8b\u3092\u6295\u7a3f<\/h3>\n<form id=\"blogForm\">\n<div class=\"form-group\">\n <label for=\"blogTitle\">\u30bf\u30a4\u30c8\u30eb<\/label><br \/>\n<input type=\"text\" id=\"blogTitle\" required><\/div>\n<div class=\"form-group\">\n <label for=\"blogContent\">\u5185\u5bb9<\/label><br \/>\n<textarea id=\"blogContent\" required><\/textarea><\/div>\n<p><button type=\"submit\" class=\"submit-btn\">\u6295\u7a3f\u3059\u308b<\/button><br \/>\n<\/form>\n<\/div>\n<\/section>\n<section class=\"content-section container\" id=\"files\">\n<h2 class=\"section-title\">\u30d5\u30a1\u30a4\u30eb\u7ba1\u7406<\/h2>\n<div class=\"file-section\">\n<div class=\"file-upload\">\n<h3>\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/h3>\n<div class=\"file-input\" onclick=\"document.getElementById('fileInput').click()\">\n<p>\u3053\u3053\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e<\/p>\n<p><input type=\"file\" id=\"fileInput\" style=\"display: none;\" multiple><\/div>\n<\/div>\n<div class=\"file-list\">\n<h3>\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6e08\u307f\u30d5\u30a1\u30a4\u30eb<\/h3>\n<div id=\"fileList\">\n <!-- \u30d5\u30a1\u30a4\u30eb\u30ea\u30b9\u30c8\u304c\u3053\u3053\u306b\u8868\u793a\u3055\u308c\u307e\u3059 --><\/div>\n<\/div>\n<\/div>\n<\/section>\n<p> <\/main><\/p>\n<p><script><br \/>\n \/\/ \u30d6\u30ed\u30b0\u8a18\u4e8b\u306e\u30c7\u30fc\u30bf<br \/>\n let blogPosts = [<br \/>\n {<br \/>\n id: 1,<br \/>\n title: \"\u30d6\u30ed\u30b0\u3092\u59cb\u3081\u307e\u3057\u305f\",<br \/>\n content: \"\u4eca\u65e5\u304b\u3089\u30d6\u30ed\u30b0\u3092\u59cb\u3081\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002\u65e5\u3005\u306e\u601d\u8003\u3084\u4f53\u9a13\u3092\u8a18\u9332\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002\",<br \/>\n date: \"2024-07-15\"<br \/>\n },<br \/>\n {<br \/>\n id: 2,<br \/>\n title: \"Web\u30c7\u30b6\u30a4\u30f3\u306b\u3064\u3044\u3066\",<br \/>\n content: \"\u6700\u8fd1\u306eWeb\u30c7\u30b6\u30a4\u30f3\u306e\u30c8\u30ec\u30f3\u30c9\u306b\u3064\u3044\u3066\u8003\u3048\u3066\u307f\u307e\u3057\u305f\u3002\u30e6\u30fc\u30b6\u30d3\u30ea\u30c6\u30a3\u3068\u30c7\u30b6\u30a4\u30f3\u306e\u7f8e\u3057\u3055\u306e\u30d0\u30e9\u30f3\u30b9\u304c\u91cd\u8981\u3067\u3059\u306d\u3002\",<br \/>\n date: \"2024-07-14\"<br \/>\n }<br \/>\n ];<\/p>\n<p> \/\/ \u30d5\u30a1\u30a4\u30eb\u306e\u30c7\u30fc\u30bf<br \/>\n let uploadedFiles = [];<\/p>\n<p> \/\/ \u30d6\u30ed\u30b0\u8a18\u4e8b\u3092\u8868\u793a<br \/>\n function displayBlogPosts() {<br \/>\n const blogGrid = document.getElementById('blogGrid');<br \/>\n blogGrid.innerHTML = '';<\/p>\n<p> blogPosts.forEach(post => {<br \/>\n const blogCard = document.createElement('div');<br \/>\n blogCard.className = 'blog-card';<br \/>\n blogCard.innerHTML = `<\/p>\n<h3>${post.title}<\/h3>\n<p class=\"blog-date\">${post.date}<\/p>\n<p class=\"blog-excerpt\">${post.content.substring(0, 100)}...<\/p>\n<p> `;<br \/>\n blogGrid.appendChild(blogCard);<br \/>\n });<br \/>\n }<\/p>\n<p> \/\/ \u30d5\u30a1\u30a4\u30eb\u30ea\u30b9\u30c8\u3092\u8868\u793a<br \/>\n function displayFileList() {<br \/>\n const fileList = document.getElementById('fileList');<br \/>\n fileList.innerHTML = '';<\/p>\n<p> if (uploadedFiles.length === 0) {<br \/>\n fileList.innerHTML = '<\/p>\n<p>\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u306f\u3042\u308a\u307e\u305b\u3093<\/p>\n<p>';<br \/>\n return;<br \/>\n }<\/p>\n<p> uploadedFiles.forEach((file, index) => {<br \/>\n const fileItem = document.createElement('div');<br \/>\n fileItem.className = 'file-item';<br \/>\n fileItem.innerHTML = `<\/p>\n<div>\n<div class=\"file-name\">${file.name}<\/div>\n<div class=\"file-size\">${formatFileSize(file.size)}<\/div>\n<\/p>\n<\/div>\n<p> <button class=\"delete-btn\" onclick=\"deleteFile(${index})\">\u524a\u9664<\/button><br \/>\n `;<br \/>\n fileList.appendChild(fileItem);<br \/>\n });<br \/>\n }<\/p>\n<p> \/\/ \u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u306e\u30d5\u30a9\u30fc\u30de\u30c3\u30c8<br \/>\n function formatFileSize(bytes) {<br \/>\n if (bytes === 0) return '0 Bytes';<br \/>\n const k = 1024;<br \/>\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];<br \/>\n const i = Math.floor(Math.log(bytes) \/ Math.log(k));<br \/>\n return parseFloat((bytes \/ Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];<br \/>\n }<\/p>\n<p> \/\/ \u30d5\u30a1\u30a4\u30eb\u3092\u524a\u9664<br \/>\n function deleteFile(index) {<br \/>\n uploadedFiles.splice(index, 1);<br \/>\n displayFileList();<br \/>\n }<\/p>\n<p> \/\/ \u30d6\u30ed\u30b0\u30d5\u30a9\u30fc\u30e0\u306e\u9001\u4fe1<br \/>\n document.getElementById('blogForm').addEventListener('submit', function(e) {<br \/>\n e.preventDefault();<\/p>\n<p> const title = document.getElementById('blogTitle').value;<br \/>\n const content = document.getElementById('blogContent').value;<\/p>\n<p> if (title && content) {<br \/>\n const newPost = {<br \/>\n id: blogPosts.length + 1,<br \/>\n title: title,<br \/>\n content: content,<br \/>\n date: new Date().toISOString().split('T')[0]<br \/>\n };<\/p>\n<p> blogPosts.unshift(newPost);<br \/>\n displayBlogPosts();<\/p>\n<p> \/\/ \u30d5\u30a9\u30fc\u30e0\u3092\u30ea\u30bb\u30c3\u30c8<br \/>\n document.getElementById('blogTitle').value = '';<br \/>\n document.getElementById('blogContent').value = '';<\/p>\n<p> alert('\u30d6\u30ed\u30b0\u8a18\u4e8b\u304c\u6295\u7a3f\u3055\u308c\u307e\u3057\u305f\uff01');<br \/>\n }<br \/>\n });<\/p>\n<p> \/\/ \u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<br \/>\n document.getElementById('fileInput').addEventListener('change', function(e) {<br \/>\n const files = Array.from(e.target.files);<\/p>\n<p> files.forEach(file => {<br \/>\n uploadedFiles.push(file);<br \/>\n });<\/p>\n<p> displayFileList();<br \/>\n alert(`${files.length}\u500b\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u307e\u3057\u305f\uff01`);<br \/>\n });<\/p>\n<p> \/\/ \u30b9\u30e0\u30fc\u30ba\u30b9\u30af\u30ed\u30fc\u30eb<br \/>\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {<br \/>\n anchor.addEventListener('click', function (e) {<br \/>\n e.preventDefault();<br \/>\n const target = document.querySelector(this.getAttribute('href'));<br \/>\n target.scrollIntoView({<br \/>\n behavior: 'smooth'<br \/>\n });<br \/>\n });<br \/>\n });<\/p>\n<p> \/\/ \u521d\u671f\u8868\u793a<br \/>\n displayBlogPosts();<br \/>\n displayFileList();<br \/>\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>MyBlog – \u30d6\u30ed\u30b0\uff06\u30d5\u30a1\u30a4\u30eb\u7ba1\u7406 MyBlog \u30db\u30fc\u30e0 \u30d6\u30ed\u30b0 \u30d5\u30a1\u30a4\u30eb About Welcome to MyBlog \u3042\u306a\u305f\u306e\u601d\u8003\u3092\u4e16\u754c\u306b\u767a\u4fe1\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u5b89\u5168\u306b\u7ba1\u7406 \u30d6\u30ed\u30b0\u3092\u898b\u308b \u6700\u65b0\u30d6\u30ed\u30b0\u8a18\u4e8b […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-210","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wing-950.com\/index.php?rest_route=\/wp\/v2\/pages\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wing-950.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wing-950.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wing-950.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wing-950.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=210"}],"version-history":[{"count":1,"href":"https:\/\/wing-950.com\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":211,"href":"https:\/\/wing-950.com\/index.php?rest_route=\/wp\/v2\/pages\/210\/revisions\/211"}],"wp:attachment":[{"href":"https:\/\/wing-950.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}