{"id":25323,"date":"2024-05-04T14:27:43","date_gmt":"2024-05-04T05:27:43","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25323"},"modified":"2024-05-04T14:27:45","modified_gmt":"2024-05-04T05:27:45","slug":"pinterest%e9%a2%a8%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25323","title":{"rendered":"Pinterest\u98a8\u30b5\u30a4\u30c8"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Pintrest\u98a8\u30b5\u30a4\u30c8&lt;\/title>\n    &lt;style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n            background-color: #f0f0f0;\n        }\n\n        header {\n            background-color: #333;\n            color: #fff;\n            padding: 20px;\n            text-align: center;\n        }\n\n        .container {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n            gap: 20px;\n            padding: 20px;\n            margin: 0 auto;\n            max-width: 1200px;\n        }\n\n        .card {\n            background-color: #fff;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n            overflow: hidden;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n            transition: transform 0.3s ease;\n            cursor: pointer;\n        }\n\n        .card:hover {\n            transform: translateY(-5px);\n        }\n\n        .card img {\n            width: 100%;\n            display: block;\n            border-top-left-radius: 5px;\n            border-top-right-radius: 5px;\n        }\n\n        .card-content {\n            padding: 15px;\n        }\n\n        .card h2 {\n            font-size: 18px;\n            margin: 10px 0;\n            color: #333;\n        }\n\n        .card p {\n            font-size: 14px;\n            color: #666;\n            margin-top: 0;\n        }\n\n        .modal {\n            display: none;\n            position: fixed;\n            z-index: 999;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0,0,0,0.7);\n        }\n\n        .modal-content {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #fff;\n            padding: 20px;\n            border-radius: 5px;\n        }\n\n        .modal img {\n            max-width: 100%;\n            display: block;\n            margin: 0 auto;\n        }\n\n        footer {\n            background-color: #333;\n            color: #fff;\n            text-align: center;\n            padding: 10px 0;\n            margin-top: 20px;\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body>\n    &lt;header>\n        &lt;h1>Pintrest\u98a8\u30b5\u30a4\u30c8&lt;\/h1>\n    &lt;\/header>\n\n    &lt;main>\n        &lt;div class=\"container\">\n            &lt;div class=\"card\" onclick=\"openModal('https:\/\/via.placeholder.com\/800x600', 'Beautiful Sunset', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')\">\n                &lt;img src=\"https:\/\/via.placeholder.com\/400x250\" alt=\"Image 1\">\n                &lt;div class=\"card-content\">\n                    &lt;h2>Beautiful Sunset&lt;\/h2>\n                    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;\/p>\n                &lt;\/div>\n            &lt;\/div>\n            &lt;div class=\"card\" onclick=\"openModal('https:\/\/via.placeholder.com\/800x600', 'Cute Kittens', 'Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.')\">\n                &lt;img src=\"https:\/\/via.placeholder.com\/400x300\" alt=\"Image 2\">\n                &lt;div class=\"card-content\">\n                    &lt;h2>Cute Kittens&lt;\/h2>\n                    &lt;p>Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.&lt;\/p>\n                &lt;\/div>\n            &lt;\/div>\n            &lt;!-- More cards -->\n        &lt;\/div>\n    &lt;\/main>\n\n    &lt;div id=\"myModal\" class=\"modal\">\n        &lt;div class=\"modal-content\">\n            &lt;span class=\"close\" onclick=\"closeModal()\">&amp;times;&lt;\/span>\n            &lt;img src=\"\" alt=\"Modal Image\" id=\"modalImage\">\n            &lt;div id=\"caption\">&lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n\n    &lt;footer>\n        &lt;p>&amp;copy; 2024 Pintrest\u98a8\u30b5\u30a4\u30c8&lt;\/p>\n    &lt;\/footer>\n\n    &lt;script>\n        function openModal(imageSrc, title, description) {\n            document.getElementById(\"modalImage\").src = imageSrc;\n            document.getElementById(\"caption\").innerHTML = \"&lt;h2>\" + title + \"&lt;\/h2>&lt;p>\" + description + \"&lt;\/p>\";\n            document.getElementById(\"myModal\").style.display = \"block\";\n        }\n\n        function closeModal() {\n            document.getElementById(\"myModal\").style.display = \"none\";\n        }\n    &lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n","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":[4,6],"tags":[3],"class_list":["post-25323","post","type-post","status-publish","format-standard","hentry","category-programming","category-web","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25323","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=25323"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25323\/revisions"}],"predecessor-version":[{"id":25324,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25323\/revisions\/25324"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25323"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}