{"id":87,"date":"2026-01-28T19:21:11","date_gmt":"2026-01-28T10:21:11","guid":{"rendered":"https:\/\/sakuramath.jp\/blog\/?page_id=87"},"modified":"2026-01-29T00:44:55","modified_gmt":"2026-01-28T15:44:55","slug":"articles","status":"publish","type":"page","link":"https:\/\/sakuramath.jp\/blog\/articles\/","title":{"rendered":"\u8a18\u4e8b\u4e00\u89a7"},"content":{"rendered":"\n<!-- WordPress\u56fa\u5b9a\u30da\u30fc\u30b8\u7528 \u8a18\u4e8b\u4e00\u89a7\u30da\u30fc\u30b8 -->\n<!-- \u30ab\u30b9\u30bf\u30e0HTML\u30d6\u30ed\u30c3\u30af\u306b\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044 -->\n\n<div class=\"shokutaku-archive\">\n    <div class=\"shokutaku-archive-content\">\n        <!-- \u30da\u30fc\u30b8\u30d8\u30c3\u30c0\u30fc -->\n        <div class=\"shokutaku-archive-header\">\n            <h1 class=\"shokutaku-archive-title\">\u6700\u65b0\u8a18\u4e8b\u4e00\u89a7<\/h1>\n            <p class=\"shokutaku-archive-subtitle\">\u71ed\u62d3\u306e\u307f\u3061\u3057\u308b\u3079\u304b\u3089\u3001\u6700\u65b0\u306e\u6559\u80b2\u60c5\u5831\u3092\u304a\u5c4a\u3051\u3057\u307e\u3059\u3002<\/p>\n        <\/div>\n\n        <div id=\"shokutaku-archive-container\">\n            <!-- \u3053\u3053\u306bJS\u3067\u8a18\u4e8b\u304c\u633f\u5165\u3055\u308c\u307e\u3059 -->\n            <p id=\"st-loading-msg\" style=\"text-align: center; padding: 40px; color: #64748b;\">\u8a18\u4e8b\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059&#8230;<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    (function () {\n        const container = document.getElementById('shokutaku-archive-container');\n        const loadingMsg = document.getElementById('st-loading-msg');\n        let currentPage = 1;\n\n        \/\/ API URL \u3092\u53d6\u5f97\u3059\u308b\u95a2\u6570\n        function getApiUrl(page = 1) {\n            const pathParts = window.location.pathname.split('\/').filter(p => p);\n            const perPage = (page === 1) ? 7 : 6;\n\n            \/\/ sakuramath.jp\/blog\/ \u306a\u3069\u306e\u74b0\u5883\u306b\u5bfe\u5fdc\n            const apiBase = (pathParts.length > 0 && pathParts[0] === 'blog') ? '\/blog\/wp-json\/wp\/v2\/posts' : '\/wp-json\/wp\/v2\/posts';\n            return `${window.location.protocol}\/\/${window.location.host}${apiBase}?per_page=6&page=${page}&_embed`;\n        }\n\n        async function fetchPosts(page = 1) {\n            container.style.opacity = '0.5';\n            const apiUrl = getApiUrl(page);\n\n            try {\n                const response = await fetch(apiUrl);\n                if (!response.ok) throw new Error('Fetch failed');\n\n                const posts = await response.json();\n                const totalPages = parseInt(response.headers.get('X-WP-TotalPages'));\n\n                if (posts.length === 0) {\n                    loadingMsg.textContent = '\u8a18\u4e8b\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002';\n                    return;\n                }\n\n                if (loadingMsg) loadingMsg.remove();\n                container.style.opacity = '1';\n                renderPosts(posts, page, totalPages);\n\n                \/\/ \u30da\u30fc\u30b8\u5207\u308a\u66ff\u3048\u6642\u306b\u4e0a\u90e8\u3078\u30b9\u30e0\u30fc\u30ba\u30b9\u30af\u30ed\u30fc\u30eb\n                if (page > 1) {\n                    window.scrollTo({ top: container.offsetTop - 100, behavior: 'smooth' });\n                }\n            } catch (error) {\n                console.error('Fetch error:', error);\n                container.innerHTML = '<p style=\"text-align:center;padding:40px;\">\u8a18\u4e8b\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002<\/p>';\n            }\n        }\n\n        function renderPosts(posts, page, totalPages) {\n            let html = '<div class=\"shokutaku-archive-wrapper\">';\n\n            \/\/ 1\u30da\u30fc\u30b8\u76ee\u306e\u6700\u65b01\u4ef6\u306e\u307f\u6ce8\u76ee\u8a18\u4e8b\u3068\u3057\u3066\u8868\u793a\n            let listPosts = posts;\n            if (page === 1) {\n                const firstPost = posts[0];\n                listPosts = posts.slice(1);\n\n                const thumb = firstPost._embedded && firstPost._embedded['wp:featuredmedia']\n                    ? firstPost._embedded['wp:featuredmedia'][0].source_url : '';\n                const date = new Date(firstPost.date).toLocaleDateString('ja-JP').replace(\/\\\/\/g, '.');\n\n                html += `\n                <div class=\"shokutaku-featured\">\n                    <a href=\"${firstPost.link}\" class=\"shokutaku-featured-grid\" style=\"text-decoration:none;\">\n                        <div class=\"shokutaku-featured-image\">\n                            ${thumb ? `<img decoding=\"async\" src=\"${thumb}\" alt=\"${firstPost.title.rendered}\">` : ''}\n                        <\/div>\n                        <div class=\"shokutaku-featured-content\">\n                            <span class=\"shokutaku-featured-badge\">\u6700\u65b0\u8a18\u4e8b<\/span>\n                            <h2 class=\"shokutaku-featured-title\">${firstPost.title.rendered}<\/h2>\n                            <p class=\"shokutaku-featured-excerpt\">${firstPost.excerpt.rendered.replace(\/<[^>]*>\/g, '').substring(0, 100)}...<\/p>\n                            <div class=\"shokutaku-featured-meta\"><span>${date}<\/span><\/div>\n                            <div class=\"shokutaku-featured-link\">\u7d9a\u304d\u3092\u8aad\u3080 \u2192<\/div>\n                        <\/div>\n                    <\/a>\n                <\/div>`;\n            }\n\n            html += '<div class=\"shokutaku-posts-grid\">';\n            listPosts.forEach(post => {\n                const thumb = post._embedded && post._embedded['wp:featuredmedia']\n                    ? post._embedded['wp:featuredmedia'][0].source_url : '';\n                const cat = post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0][0]\n                    ? post._embedded['wp:term'][0][0].name : '\u672a\u5206\u985e';\n                const date = new Date(post.date).toLocaleDateString('ja-JP').replace(\/\\\/\/g, '.');\n\n                html += `\n                <article class=\"shokutaku-post-card\">\n                    <a href=\"${post.link}\" style=\"text-decoration: none; color: inherit; display: block;\">\n                        <div class=\"shokutaku-post-image\">\n                            ${thumb ? `<img decoding=\"async\" src=\"${thumb}\" alt=\"${post.title.rendered}\">` : ''}\n                        <\/div>\n                        <div class=\"shokutaku-post-content\">\n                            <span class=\"shokutaku-post-category\">${cat}<\/span>\n                            <h3 class=\"shokutaku-post-title\">${post.title.rendered}<\/h3>\n                            <p class=\"shokutaku-post-excerpt\">${post.excerpt.rendered.replace(\/<[^>]*>\/g, '').substring(0, 60)}...<\/p>\n                            <div class=\"shokutaku-post-meta\"><span>${date}<\/span><\/div>\n                        <\/div>\n                    <\/a>\n                <\/article>`;\n            });\n            html += '<\/div>';\n\n            \/\/ \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306e\u751f\u6210\n            if (totalPages > 1) {\n                html += '<div class=\"shokutaku-pagination\">';\n                for (let i = 1; i <= totalPages; i++) {\n                    html += `<button class=\"shokutaku-pagination-btn ${i === page ? 'active' : ''}\" onclick=\"window.stFetchPage(${i})\">${i}<\/button>`;\n                }\n                html += '<\/div>';\n            }\n\n            html += '<\/div>';\n            container.innerHTML = html;\n        }\n\n        \/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u95a2\u6570\u3068\u3057\u3066\u516c\u958b\n        window.stFetchPage = function (page) {\n            fetchPosts(page);\n        };\n\n        fetchPosts(1);\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u65b0\u8a18\u4e8b\u4e00\u89a7 \u71ed\u62d3\u306e\u307f\u3061\u3057\u308b\u3079\u304b\u3089\u3001\u6700\u65b0\u306e\u6559\u80b2\u60c5\u5831\u3092\u304a\u5c4a\u3051\u3057\u307e\u3059\u3002 \u8a18\u4e8b\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-87","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sakuramath.jp\/blog\/wp-json\/wp\/v2\/pages\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sakuramath.jp\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sakuramath.jp\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sakuramath.jp\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sakuramath.jp\/blog\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":18,"href":"https:\/\/sakuramath.jp\/blog\/wp-json\/wp\/v2\/pages\/87\/revisions"}],"predecessor-version":[{"id":991,"href":"https:\/\/sakuramath.jp\/blog\/wp-json\/wp\/v2\/pages\/87\/revisions\/991"}],"wp:attachment":[{"href":"https:\/\/sakuramath.jp\/blog\/wp-json\/wp\/v2\/media?parent=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}