{"id":15610,"date":"2026-07-08T11:45:47","date_gmt":"2026-07-08T02:45:47","guid":{"rendered":"https:\/\/rakkokeyword.com\/techo\/?p=15610"},"modified":"2026-07-08T11:45:48","modified_gmt":"2026-07-08T02:45:48","slug":"tool-digital-clock","status":"publish","type":"post","link":"https:\/\/rakkokeyword.com\/techo\/tool-digital-clock\/","title":{"rendered":"\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\uff08Web\u6642\u8a08\uff09\u30c4\u30fc\u30eb"},"content":{"rendered":"\n<div id=\"dclock_wrapper\" class=\"dclock_theme_light\">\n    <!-- \u8a2d\u5b9a\u30fb\u64cd\u4f5cUI\u30a8\u30ea\u30a2 -->\n    <div id=\"dclock_settings\" class=\"dclock_settings\">\n        <!-- \u8868\u793a\u5f62\u5f0f\u8a2d\u5b9a -->\n        <div class=\"dclock_setting_group\">\n            <p class=\"dclock_setting_label\">\u8868\u793a\u5f62\u5f0f<\/p>\n            <label class=\"dclock_radio_label\">\n                <input type=\"radio\" name=\"dclock_format\" value=\"24\" checked> 24\u6642\u9593\n            <\/label>\n            <label class=\"dclock_radio_label\">\n                <input type=\"radio\" name=\"dclock_format\" value=\"12\"> 12\u6642\u9593\n            <\/label>\n        <\/div>\n        \n        <!-- \u8868\u793a\u8981\u7d20\u8a2d\u5b9a -->\n        <div class=\"dclock_setting_group\">\n            <p class=\"dclock_setting_label\">\u8868\u793a\u8981\u7d20<\/p>\n            <label class=\"dclock_check_label\">\n                <input type=\"checkbox\" id=\"dclock_show_sec\" checked> \u79d2\n            <\/label>\n            <label class=\"dclock_check_label\">\n                <input type=\"checkbox\" id=\"dclock_show_date\" checked> \u65e5\u4ed8\u30fb\u66dc\u65e5\n            <\/label>\n        <\/div>\n        \n        <!-- \u30c6\u30fc\u30de\u8a2d\u5b9a -->\n        <div class=\"dclock_setting_group\">\n            <p class=\"dclock_setting_label\">\u30c6\u30fc\u30de<\/p>\n            <label class=\"dclock_radio_label\">\n                <input type=\"radio\" name=\"dclock_theme\" value=\"light\" checked> \u30e9\u30a4\u30c8\n            <\/label>\n            <label class=\"dclock_radio_label\">\n                <input type=\"radio\" name=\"dclock_theme\" value=\"dark\"> \u30c0\u30fc\u30af\n            <\/label>\n        <\/div>\n        \n        <!-- \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u64cd\u4f5c -->\n        <div class=\"dclock_setting_group\">\n            <button id=\"dclock_fs_btn\" class=\"dclock_btn\" type=\"button\">\u5168\u753b\u9762\u8868\u793a<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- \u30e1\u30a4\u30f3\u8868\u793a\u9818\u57df -->\n    <div id=\"dclock_display\" class=\"dclock_display\">\n        <div id=\"dclock_date_area\" class=\"dclock_date_area\">\n            <span id=\"dclock_date_val\"><\/span>\n        <\/div>\n        <div class=\"dclock_time_area\">\n            <span id=\"dclock_ampm_val\" class=\"dclock_ampm\"><\/span>\n            <span id=\"dclock_time_val\"><\/span><span id=\"dclock_sec_val\" class=\"dclock_sec\"><\/span>\n        <\/div>\n    <\/div>\n\n    <style>\n        \/* CSS\u30ea\u30bb\u30c3\u30c8\u3068\u57fa\u672c\u30b9\u30bf\u30a4\u30eb \n          \uff08\u5916\u67a0border\u306a\u3057\u30fbpadding\u306a\u3057\u3001width:100%\u3092\u7dad\u6301\uff09\n        *\/\n        #dclock_wrapper {\n            width: 100%;\n            font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            box-sizing: border-box;\n            transition: background-color 0.3s, color 0.3s;\n            position: relative; \/* \u7591\u4f3c\u5168\u753b\u9762\u5bfe\u5fdc\u7528 *\/\n            margin-bottom: 40px;\n        }\n        #dclock_wrapper * {\n            box-sizing: inherit;\n        }\n\n        \/* \u30c6\u30fc\u30de\uff1a\u30e9\u30a4\u30c8\u30e2\u30fc\u30c9 *\/\n        #dclock_wrapper.dclock_theme_light {\n            background-color: #ffffff;\n            color: #333333;\n        }\n        \/* \u30c6\u30fc\u30de\uff1a\u30c0\u30fc\u30af\u30e2\u30fc\u30c9 *\/\n        #dclock_wrapper.dclock_theme_dark {\n            background-color: #1a1a1a;\n            color: #f0f0f0;\n        }\n\n        \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u72b6\u614b\uff08API\u307e\u305f\u306fCSS\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\uff09 *\/\n        #dclock_wrapper.dclock_fullscreen_active {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100vw;\n            height: 100vh;\n            z-index: 999999;\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-start; \/* \u8a2d\u5b9a\u30a8\u30ea\u30a2\u3092\u4e0a\u306b\u914d\u7f6e *\/\n            align-items: center;\n            margin-bottom: 0; \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306f\u5168\u4f53\u306e\u30de\u30fc\u30b8\u30f3\u4e0d\u8981 *\/\n            padding: 0 20px; \/* \u753b\u9762\u7aef\u306e\u4f59\u767d *\/\n        }\n        \n        \/* \u8a2d\u5b9a\u30d1\u30cd\u30eb\u30c7\u30b6\u30a4\u30f3 *\/\n        .dclock_settings {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 18px 36px; \/* \u4f59\u767d\u8abf\u6574 *\/\n            margin-bottom: 20px;\n            padding: 18px 24px; \/* \u4f59\u767d\u8abf\u6574 *\/\n            background-color: rgba(128, 128, 128, 0.1);\n            border-radius: 4px;\n            align-items: center;\n            justify-content: center;\n        }\n        \n        \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306f\u8a2d\u5b9a\u30d1\u30cd\u30eb\u3092\u4e0a\u90e8\u306b\u914d\u7f6e\u3057\u30b3\u30f3\u30d1\u30af\u30c8\u306b *\/\n        #dclock_wrapper.dclock_fullscreen_active .dclock_settings {\n            margin-top: 20px; \/* \u753b\u9762\u4e0a\u90e8\u306e\u4f59\u767d *\/\n            margin-bottom: 0; \/* \u4e0b\u65b9\u5411\u306e\u30de\u30fc\u30b8\u30f3\u306f\u30ea\u30bb\u30c3\u30c8\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u8868\u793a\u30a8\u30ea\u30a2\u3067\u8abf\u6574\u3059\u308b\u305f\u3081\uff09 *\/\n            max-width: 800px;\n            width: 100%;\n            padding: 10px 18px;\n            gap: 10px 24px;\n            font-size: 13px;\n            background-color: rgba(128, 128, 128, 0.1);\n        }\n\n        .dclock_setting_group {\n            display: flex;\n            align-items: center;\n            gap: 12px; \/* \u4f59\u767d\u8abf\u6574 *\/\n            font-size: 14px;\n        }\n\n        \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306e\u8a2d\u5b9a\u30b0\u30eb\u30fc\u30d7\u3092\u30b3\u30f3\u30d1\u30af\u30c8\u306b *\/\n        #dclock_wrapper.dclock_fullscreen_active .dclock_setting_group {\n            gap: 8px;\n            font-size: 13px;\n        }\n\n        #dclock_wrapper .dclock_setting_label {\n            margin: 0 4px 0 0 !important;\n            font-weight: 700;\n            color: #222;\n        }\n        #dclock_wrapper.dclock_theme_dark .dclock_setting_label {\n            color: #f0f0f0;\n        }\n        .dclock_radio_label, .dclock_check_label {\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            gap: 4px;\n        }\n        .dclock_radio_label input, .dclock_check_label input {\n            margin: 0;\n            cursor: pointer;\n        }\n\n        \/* \u30dc\u30bf\u30f3\u30c7\u30b6\u30a4\u30f3 (\u8981\u4ef6: \u9752\u8272 #13284B, height 40px\u4ee5\u4e0a) *\/\n        .dclock_btn {\n            background-color: #13284B;\n            color: #ffffff;\n            border: none;\n            height: 40px;\n            padding: 0 20px;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 14px;\n            font-weight: bold;\n            transition: opacity 0.2s ease;\n        }\n        .dclock_btn:hover {\n            opacity: 0.8;\n        }\n\n        \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306e\u30dc\u30bf\u30f3\u3092\u30b3\u30f3\u30d1\u30af\u30c8\u306b *\/\n        #dclock_wrapper.dclock_fullscreen_active .dclock_btn {\n            height: 36px;\n            padding: 0 16px;\n            font-size: 13px;\n        }\n\n        \/* \u6642\u8a08\u8868\u793a\u30a8\u30ea\u30a2 *\/\n        .dclock_display {\n            text-align: center;\n            padding: 10px 0 30px;\n        }\n        \n        \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306e\u6642\u8a08\u8868\u793a\u30a8\u30ea\u30a2\uff08\u753b\u9762\u4e2d\u592e\u914d\u7f6e\uff09 *\/\n        #dclock_wrapper.dclock_fullscreen_active .dclock_display {\n            flex-grow: 1; \/* \u6b8b\u308a\u306e\u9ad8\u3055\u3092\u3059\u3079\u3066\u57cb\u3081\u308b *\/\n            display: flex;\n            flex-direction: column;\n            justify-content: center; \/* \u7e26\u4e2d\u592e *\/\n            align-items: center;\n            padding-bottom: 40px; \/* \u8996\u899a\u7684\u306b\u4e2d\u592e\u306b\u898b\u3048\u308b\u3088\u3046\u4e0b\u90e8\u306b\u5c11\u3057\u4f59\u767d *\/\n            padding-top: 0;\n        }\n        \n        \/* \u65e5\u4ed8\u30fb\u66dc\u65e5 *\/\n        .dclock_date_area {\n            font-size: 1.25rem;\n            margin-bottom: 5px;\n            font-weight: bold;\n            min-height: 1.5rem; \/* \u975e\u8868\u793a\u6642\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u5d29\u308c\u9632\u6b62 *\/\n        }\n        \n        \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306e\u65e5\u4ed8\u30fb\u66dc\u65e5\u62e1\u5927 *\/\n        #dclock_wrapper.dclock_fullscreen_active .dclock_date_area {\n            font-size: 2.5rem;\n            margin-bottom: 10px;\n            min-height: 3rem;\n        }\n\n        \/* \u6642\u523b\u8868\u793a\uff08\u30e2\u30c0\u30f3\u306a\u30d5\u30a9\u30f3\u30c8\u304b\u3064\u6570\u5b57\u306e\u7b49\u5e45\u8868\u793a\u3067\u30ac\u30bf\u3064\u304d\u9632\u6b62\uff09 *\/\n        .dclock_time_area {\n            font-size: 5rem;\n            font-weight: 700;\n            font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            font-variant-numeric: tabular-nums;\n            line-height: 1;\n            display: flex;\n            justify-content: center;\n            align-items: baseline;\n        }\n\n        \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306e\u6642\u523b\u8868\u793a\u62e1\u5927 *\/\n        #dclock_wrapper.dclock_fullscreen_active .dclock_time_area {\n            font-size: 10rem;\n        }\n        \n        \/* AM\/PM *\/\n        .dclock_ampm {\n            font-size: 2rem;\n            margin-right: 15px;\n            font-family: inherit; \/* \u30e1\u30a4\u30f3\u3068\u540c\u3058\u30d5\u30a9\u30f3\u30c8\u69cb\u6210\u3092\u7d99\u627f *\/\n        }\n\n        \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306eAM\/PM\u62e1\u5927 *\/\n        #dclock_wrapper.dclock_fullscreen_active .dclock_ampm {\n            font-size: 4rem;\n            margin-right: 30px;\n        }\n        \n        \/* \u79d2 *\/\n        .dclock_sec {\n            font-size: 2.5rem;\n        }\n\n        \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306e\u79d2\u8868\u793a\u62e1\u5927 *\/\n        #dclock_wrapper.dclock_fullscreen_active .dclock_sec {\n            font-size: 5rem;\n        }\n\n        \/* \u30b9\u30de\u30db\u7b49\u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc *\/\n        @media (max-width: 720px) {\n            .dclock_settings {\n                justify-content: flex-start;\n            }\n            .dclock_time_area {\n                font-size: 3.5rem;\n            }\n            .dclock_ampm {\n                font-size: 1.5rem;\n                margin-right: 10px;\n            }\n            .dclock_sec {\n                font-size: 2rem;\n            }\n            \n            \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306e\u30bf\u30d6\u30ec\u30c3\u30c8\u30fb\u6a2a\u5411\u304d\u30b9\u30de\u30db\u7b49\u306e\u8abf\u6574\uff08\u7d042\u500d\uff09 *\/\n            #dclock_wrapper.dclock_fullscreen_active .dclock_time_area { font-size: 7rem; }\n            #dclock_wrapper.dclock_fullscreen_active .dclock_ampm { font-size: 3rem; margin-right: 20px; }\n            #dclock_wrapper.dclock_fullscreen_active .dclock_sec { font-size: 4rem; }\n            #dclock_wrapper.dclock_fullscreen_active .dclock_date_area { font-size: 2rem; }\n        }\n        @media (max-width: 480px) {\n            .dclock_time_area {\n                font-size: 2.5rem;\n            }\n            .dclock_ampm {\n                font-size: 1.2rem;\n                margin-right: 8px;\n            }\n            .dclock_sec {\n                font-size: 1.5rem;\n            }\n            .dclock_date_area {\n                font-size: 1rem;\n            }\n            .dclock_btn {\n                width: 100%;\n                margin-top: 5px;\n            }\n            \n            \/* \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u6642\u306e\u30b9\u30de\u30db\u7e26\u5411\u304d\u8abf\u6574\uff08\u7d042\u500d\uff09 *\/\n            #dclock_wrapper.dclock_fullscreen_active .dclock_time_area { font-size: 5rem; }\n            #dclock_wrapper.dclock_fullscreen_active .dclock_ampm { font-size: 2.4rem; margin-right: 16px; }\n            #dclock_wrapper.dclock_fullscreen_active .dclock_sec { font-size: 3rem; }\n            #dclock_wrapper.dclock_fullscreen_active .dclock_date_area { font-size: 1.5rem; margin-bottom: 5px; }\n            \n            #dclock_wrapper.dclock_fullscreen_active .dclock_settings {\n                margin-top: 10px; \/* \u30b9\u30de\u30db\u5168\u753b\u9762\u6642\u306f\u4e0a\u90e8\u4f59\u767d\u3092\u5c11\u3057\u8a70\u3081\u308b *\/\n            }\n        }\n    <\/style>\n\n    <script>\n    (function() {\n        \/\/ DOM\u8981\u7d20\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\n        const els = {\n            wrapper: document.getElementById('dclock_wrapper'),\n            formatRadios: document.getElementsByName('dclock_format'),\n            themeRadios: document.getElementsByName('dclock_theme'),\n            chkSec: document.getElementById('dclock_show_sec'),\n            chkDate: document.getElementById('dclock_show_date'), \/\/ \u65e5\u4ed8\u30fb\u66dc\u65e5\u517c\u7528\u306b\n            btnFs: document.getElementById('dclock_fs_btn'),\n            \n            dateArea: document.getElementById('dclock_date_area'),\n            dateVal: document.getElementById('dclock_date_val'),\n            timeVal: document.getElementById('dclock_time_val'),\n            secVal: document.getElementById('dclock_sec_val'),\n            ampmVal: document.getElementById('dclock_ampm_val')\n        };\n\n        \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u7528\u30ad\u30fc\u540d\n        const STORAGE_KEY = 'dclock_settings';\n\n        \/\/ \u66dc\u65e5\u6587\u5b57\u5217\u5b9a\u7fa9\n        const daysStr = ['\u65e5', '\u6708', '\u706b', '\u6c34', '\u6728', '\u91d1', '\u571f'];\n\n        \/\/ \u8a2d\u5b9a\u306e\u521d\u671f\u5024\n        let settings = {\n            format: '24', \/\/ 12 or 24\n            showSec: true,\n            showDate: true, \/\/ \u65e5\u4ed8\u30fb\u66dc\u65e5\u517c\u7528\n            theme: 'light' \/\/ light or dark\n        };\n\n        \/\/ HTML\u30a8\u30b9\u30b1\u30fc\u30d7\u51e6\u7406\n        function dclock_escapeHtml(str) {\n            if (typeof str !== 'string') str = String(str);\n            return str.replace(\/[&'`\"<>]\/g, function(match) {\n                switch(match) {\n                    case '&': return '&' + 'amp;';\n                    case \"'\": return '&' + '#x27;';\n                    case '`': return '&' + '#x60;';\n                    case '\"': return '&' + 'quot;';\n                    case '<': return '&#038;' + 'lt;';\n                    case '>': return '&' + 'gt;';\n                    default: return match;\n                }\n            });\n        }\n\n        \/\/ LocalStorage\u304b\u3089\u8a2d\u5b9a\u3092\u8aad\u307f\u8fbc\u307f\n        function loadSettings() {\n            try {\n                const saved = localStorage.getItem(STORAGE_KEY);\n                if (saved) {\n                    const parsed = JSON.parse(saved);\n                    \/\/ \u578b\u30fb\u5024\u30c1\u30a7\u30c3\u30af\u3092\u884c\u3044\u5b89\u5168\u306b\u30de\u30fc\u30b8\n                    if (['12', '24'].includes(parsed.format)) settings.format = parsed.format;\n                    if (typeof parsed.showSec === 'boolean') settings.showSec = parsed.showSec;\n                    if (typeof parsed.showDate === 'boolean') settings.showDate = parsed.showDate;\n                    if (['light', 'dark'].includes(parsed.theme)) settings.theme = parsed.theme;\n                }\n            } catch (e) {\n                \/\/ \u30d1\u30fc\u30b9\u30a8\u30e9\u30fc\u3084\u7121\u52b9\u74b0\u5883\u6642\u306f\u521d\u671f\u5024\u3092\u7dad\u6301\n            }\n        }\n\n        \/\/ LocalStorage\u306b\u8a2d\u5b9a\u3092\u4fdd\u5b58\n        function saveSettings() {\n            try {\n                localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));\n            } catch (e) {}\n        }\n\n        \/\/ UI\uff08\u30d5\u30a9\u30fc\u30e0\u8981\u7d20\uff09\u3092\u8a2d\u5b9a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u72b6\u614b\u306b\u540c\u671f\n        function syncUIToSettings() {\n            els.formatRadios.forEach(r => r.checked = (r.value === settings.format));\n            els.themeRadios.forEach(r => r.checked = (r.value === settings.theme));\n            els.chkSec.checked = settings.showSec;\n            els.chkDate.checked = settings.showDate;\n            applyTheme();\n        }\n\n        \/\/ \u30c6\u30fc\u30de\u306e\u53cd\u6620\uff08\u30af\u30e9\u30b9\u5207\u308a\u66ff\u3048\uff09\n        function applyTheme() {\n            els.wrapper.classList.remove('dclock_theme_light', 'dclock_theme_dark');\n            els.wrapper.classList.add('dclock_theme_' + settings.theme);\n        }\n\n        \/\/ \u6642\u8a08\u63cf\u753b\u51e6\u7406\uff08\u6bce\u79d2\u5b9f\u884c\uff09\n        function updateClock() {\n            const now = new Date();\n            \n            \/\/ --- \u65e5\u4ed8\u30fb\u66dc\u65e5\u306e\u51e6\u7406 ---\n            if (settings.showDate) {\n                els.dateArea.style.display = 'block';\n                \n                const year = now.getFullYear();\n                const month = now.getMonth() + 1;\n                const date = now.getDate();\n                const day = daysStr[now.getDay()];\n                \n                els.dateVal.textContent = dclock_escapeHtml(`${year}\u5e74${month}\u6708${date}\u65e5\uff08${day}\uff09`);\n                els.dateVal.style.display = 'inline';\n            } else {\n                els.dateArea.style.display = 'none';\n            }\n\n            \/\/ --- \u6642\u523b\u306e\u51e6\u7406 ---\n            let h = now.getHours();\n            let m = now.getMinutes();\n            let s = now.getSeconds();\n            let ampmStr = '';\n\n            \/\/ 12\u6642\u9593\u8868\u793a\u51e6\u7406\n            if (settings.format === '12') {\n                ampmStr = h < 12 ? 'AM' : 'PM';\n                h = h % 12;\n                if (h === 0) h = 12; \/\/ 0\u6642\u306f12\u6642\n                els.ampmVal.textContent = dclock_escapeHtml(ampmStr);\n                els.ampmVal.style.display = 'inline';\n            } else {\n                els.ampmVal.style.display = 'none';\n            }\n\n            \/\/ \u30bc\u30ed\u57cb\u3081\n            const hStr = String(h).padStart(2, '0');\n            const mStr = String(m).padStart(2, '0');\n            const sStr = String(s).padStart(2, '0');\n\n            els.timeVal.textContent = dclock_escapeHtml(`${hStr}:${mStr}`);\n            \n            if (settings.showSec) {\n                els.secVal.textContent = dclock_escapeHtml(`:${sStr}`);\n                els.secVal.style.display = 'inline';\n            } else {\n                els.secVal.style.display = 'none';\n            }\n        }\n\n        \/\/ \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u767b\u9332\n        function bindEvents() {\n            \/\/ \u8868\u793a\u5f62\u5f0f\u5207\u308a\u66ff\u3048\n            els.formatRadios.forEach(r => {\n                r.addEventListener('change', (e) => {\n                    settings.format = e.target.value;\n                    saveSettings();\n                    updateClock(); \/\/ \u5373\u6642\u53cd\u6620\n                });\n            });\n\n            \/\/ \u30c6\u30fc\u30de\u5207\u308a\u66ff\u3048\n            els.themeRadios.forEach(r => {\n                r.addEventListener('change', (e) => {\n                    settings.theme = e.target.value;\n                    saveSettings();\n                    applyTheme(); \/\/ \u5373\u6642\u53cd\u6620\n                });\n            });\n\n            \/\/ \u79d2\u8868\u793a\u5207\u308a\u66ff\u3048\n            els.chkSec.addEventListener('change', (e) => {\n                settings.showSec = e.target.checked;\n                saveSettings();\n                updateClock();\n            });\n\n            \/\/ \u65e5\u4ed8\u30fb\u66dc\u65e5\u8868\u793a\u5207\u308a\u66ff\u3048\n            els.chkDate.addEventListener('change', (e) => {\n                settings.showDate = e.target.checked;\n                saveSettings();\n                updateClock();\n            });\n\n            \/\/ \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u5207\u308a\u66ff\u3048\n            els.btnFs.addEventListener('click', toggleFullscreen);\n\n            \/\/ \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u72b6\u614b\u5909\u66f4\u306e\u76e3\u8996\uff08ESC\u30ad\u30fc\u7b49\u3067\u306e\u89e3\u9664\u5bfe\u5fdc\uff09\n            document.addEventListener('fullscreenchange', handleFsChange);\n            document.addEventListener('webkitfullscreenchange', handleFsChange);\n        }\n\n        \/\/ \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u30dc\u30bf\u30f3\u306e\u6587\u8a00\u66f4\u65b0\n        function updateFsButtonText() {\n            const isBrowserFs = document.fullscreenElement || document.webkitFullscreenElement;\n            const isCssFs = els.wrapper.classList.contains('dclock_fullscreen_active');\n            if (isBrowserFs || isCssFs) {\n                els.btnFs.textContent = '\u5168\u753b\u9762\u3092\u7d42\u4e86';\n            } else {\n                els.btnFs.textContent = '\u5168\u753b\u9762\u8868\u793a';\n            }\n        }\n\n        \/\/ \u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\u5207\u308a\u66ff\u3048\u30ed\u30b8\u30c3\u30af\n        function toggleFullscreen() {\n            const isBrowserFs = document.fullscreenElement || document.webkitFullscreenElement;\n            const isCssFs = els.wrapper.classList.contains('dclock_fullscreen_active');\n\n            if (!isBrowserFs && !isCssFs) {\n                \/\/ \u5168\u753b\u9762\u8868\u793a\u306b\u3059\u308b\n                if (els.wrapper.requestFullscreen) {\n                    els.wrapper.requestFullscreen().then(() => {\n                        \/\/ \u6210\u529f\u6642\u306b\u3082CSS\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u7528\u306e\u30af\u30e9\u30b9\u3092\u8ffd\u52a0\u3057\u3066\u62e1\u5927\u3092\u9069\u7528\n                        els.wrapper.classList.add('dclock_fullscreen_active');\n                        updateFsButtonText();\n                    }).catch(() => {\n                        \/\/ \u30a8\u30e9\u30fc\u6642\uff08\u975e\u5bfe\u5fdc\u74b0\u5883\u7b49\uff09\u306fCSS\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\n                        els.wrapper.classList.add('dclock_fullscreen_active');\n                        updateFsButtonText();\n                    });\n                } else if (els.wrapper.webkitRequestFullscreen) {\n                    els.wrapper.webkitRequestFullscreen();\n                    \/\/ WebKit\u7cfb\u3067\u3082\u5b9f\u884c\u5f8c\u306b\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e\n                    els.wrapper.classList.add('dclock_fullscreen_active');\n                    updateFsButtonText();\n                } else {\n                    \/\/ \u975e\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\uff08iOS Safari\u306a\u3069\uff09\u5411\u3051\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\n                    els.wrapper.classList.add('dclock_fullscreen_active');\n                    updateFsButtonText();\n                }\n            } else {\n                \/\/ \u5168\u753b\u9762\u8868\u793a\u3092\u89e3\u9664\u3059\u308b\n                if (isBrowserFs) {\n                    if (document.exitFullscreen) {\n                        document.exitFullscreen();\n                    } else if (document.webkitExitFullscreen) {\n                        document.webkitExitFullscreen();\n                    }\n                }\n                \/\/ CSS\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u72b6\u614b\u306a\u3089\u89e3\u9664\n                els.wrapper.classList.remove('dclock_fullscreen_active');\n                updateFsButtonText();\n            }\n        }\n\n        function handleFsChange() {\n            if (!document.fullscreenElement && !document.webkitFullscreenElement) {\n                els.wrapper.classList.remove('dclock_fullscreen_active');\n            }\n            updateFsButtonText();\n        }\n\n        \/\/ \u521d\u671f\u5316\u51e6\u7406\n        function init() {\n            loadSettings();\n            syncUIToSettings();\n            updateClock();\n            bindEvents();\n            updateFsButtonText();\n            setInterval(updateClock, 1000); \/\/ 1\u79d2\u3054\u3068\u306b\u66f4\u65b0\n        }\n\n        \/\/ DOMContentLoaded\u3092\u5f85\u305f\u305a\u306b\u5b9f\u884c\u53ef\u80fd\u3060\u304c\u3001\u5b89\u5168\u306e\u305f\u3081\u72b6\u614b\u78ba\u8a8d\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', init);\n        } else {\n            init();\n        }\n\n    })();\n    <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30c4\u30fc\u30eb\u306f\u3001\u30d1\u30bd\u30b3\u30f3\u3084\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u306e\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u305d\u306e\u307e\u307e\u4f7f\u3048\u308b\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u4e0d\u8981\u306e\u7121\u6599\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u3067\u3059\u3002\u8a2d\u5b9a\u3092\u597d\u307f\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3001\u5168\u753b\u9762\u8868\u793a\u3067\u5353\u4e0a\u6642\u8a08\u306e\u3088\u3046\u306b\u6d3b\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-0\">\u3053\u306e\u30c4\u30fc\u30eb\u3067\u3067\u304d\u308b\u3053\u3068<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f53\u30c4\u30fc\u30eb\u3067\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u3067\u3042\u308a\u306a\u304c\u3089\u5b9f\u7528\u7684\u306a\u4ee5\u4e0b\u306e\u6a5f\u80fd\u3092\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u8868\u793a\u5f62\u5f0f\u306e\u5909\u66f4<\/strong>\uff1a12\u6642\u9593\u8868\u793a\u306824\u6642\u9593\u8868\u793a\u3092\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u3067\u5207\u308a\u66ff\u3048\u53ef\u80fd\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u8868\u793a\u8981\u7d20\u306e\u9078\u629e<\/strong>\uff1a\u300c\u79d2\u300d\u3084\u300c\u65e5\u4ed8\u30fb\u66dc\u65e5\u300d\u306e\u8868\u793a\u30fb\u975e\u8868\u793a\u3092\u500b\u5225\u306b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30c6\u30fc\u30de\u30ab\u30e9\u30fc\u306e\u5909\u66f4<\/strong>\uff1a\u660e\u308b\u3044\u300c\u30e9\u30a4\u30c8\u30e2\u30fc\u30c9\u300d\u3068\u3001\u76ee\u3084\u30d0\u30c3\u30c6\u30ea\u30fc\u306b\u512a\u3057\u3044\u300c\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u300d\u3092\u9078\u3079\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5168\u753b\u9762\u8868\u793a\uff08\u30d5\u30eb\u30b9\u30af\u30ea\u30fc\u30f3\uff09<\/strong>\uff1a\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u3067\u753b\u9762\u3044\u3063\u3071\u3044\u306b\u6642\u8a08\u3092\u62e1\u5927\u8868\u793a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u8a2d\u5b9a\u306e\u81ea\u52d5\u4fdd\u5b58<\/strong>\uff1a\u4e00\u5ea6\u8a2d\u5b9a\u3057\u305f\u5185\u5bb9\u306f\u30d6\u30e9\u30a6\u30b6\u306b\u4fdd\u5b58\u3055\u308c\u3001\u6b21\u56de\u30a2\u30af\u30bb\u30b9\u6642\u306b\u3082\u540c\u3058\u8a2d\u5b9a\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">\u3053\u306e\u30c4\u30fc\u30eb\u3067\u53d6\u5f97\u3059\u308b\u60c5\u5831\u306e\u57fa\u790e\u77e5\u8b58<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f53\u30c4\u30fc\u30eb\u306f\u3001\u3054\u5229\u7528\u306e\u30d1\u30bd\u30b3\u30f3\u3084\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u672c\u4f53\u306b\u5185\u8535\u3055\u308c\u3066\u3044\u308b\u6642\u8a08\uff08\u30b7\u30b9\u30c6\u30e0\u6642\u523b\uff09\u306e\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u53d6\u3063\u3066\u753b\u9762\u306b\u8868\u793a\u3059\u308b\u4ed5\u7d44\u307f\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5916\u90e8\u306e\u30b5\u30fc\u30d0\u30fc\u3068\u901a\u4fe1\u3057\u3066\u6642\u523b\u3092\u53d6\u5f97\u3057\u3066\u3044\u308b\u308f\u3051\u3067\u306f\u306a\u3044\u305f\u3081\u3001\u901a\u4fe1\u74b0\u5883\u304c\u4e0d\u5b89\u5b9a\u306a\u5834\u6240\u3067\u3082\u3001\u30aa\u30d5\u30e9\u30a4\u30f3\u306b\u8fd1\u3044\u72b6\u614b\u3067\u30b9\u30e0\u30fc\u30ba\u306b\u52d5\u4f5c\u3057\u307e\u3059\u3002\u3082\u3057\u5f53\u30c4\u30fc\u30eb\u306e\u6642\u523b\u304c\u5b9f\u969b\u306e\u6642\u523b\u3068\u305a\u308c\u3066\u3044\u308b\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u3054\u5229\u7528\u4e2d\u306e\u7aef\u672b\u672c\u4f53\u306e\u6642\u523b\u8a2d\u5b9a\uff08\u65e5\u4ed8\u3068\u6642\u523b\u306e\u81ea\u52d5\u8a2d\u5b9a\u306a\u3069\uff09\u3092\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">\u3053\u306e\u30c4\u30fc\u30eb\u304c\u5f79\u7acb\u3064\u3068\u304d\u306f\u3069\u3093\u306a\u3068\u304d\uff1f \u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u306f\uff1f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u65e5\u5e38\u306e\u3055\u307e\u3056\u307e\u306a\u30b7\u30fc\u30f3\u3067\u3001\u4fbf\u5229\u306a\u6642\u8a08\u3068\u3057\u3066\u6d3b\u8e8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u52c9\u5f37\u3084\u30c6\u30ec\u30ef\u30fc\u30af\u6642\u306e\u5353\u4e0a\u6642\u8a08\u3068\u3057\u3066<\/strong> <br>\u4e0d\u8981\u306b\u306a\u3063\u305f\u53e4\u3044\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3084\u30bf\u30d6\u30ec\u30c3\u30c8\u3092\u5168\u753b\u9762\u8868\u793a\u306b\u3057\u3066\u30b9\u30bf\u30f3\u30c9\u306b\u7f6e\u3051\u3070\u3001\u5c02\u7528\u306e\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u306b\u65e9\u5909\u308f\u308a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u3084\u30b9\u30d4\u30fc\u30c1\u306e\u30bf\u30a4\u30e0\u30ad\u30fc\u30d1\u30fc\u306b<\/strong> <br>\u30d7\u30ed\u30b8\u30a7\u30af\u30bf\u30fc\u3084\u30e2\u30cb\u30bf\u30fc\u306b\u5168\u753b\u9762\u3067\u6295\u5f71\u3059\u308b\u3053\u3068\u3067\u3001\u53c2\u52a0\u8005\u5168\u54e1\u304c\u6b8b\u308a\u6642\u9593\u3092\u6b63\u78ba\u306b\u628a\u63e1\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u79d2\u5358\u4f4d\u306e\u6b63\u78ba\u306a\u6642\u9593\u78ba\u8a8d\u304c\u5fc5\u8981\u306a\u3068\u304d\u306b<\/strong> <br>\u4eba\u6c17\u30c1\u30b1\u30c3\u30c8\u306e\u4e88\u7d04\u958b\u59cb\u6642\u523b\u306e\u78ba\u8a8d\u3084\u3001\u5e74\u8d8a\u3057\u306a\u3069\u306e\u30ab\u30a6\u30f3\u30c8\u30c0\u30a6\u30f3\u6642\u306a\u3069\u3001\u79d2\u6570\u304c\u91cd\u8981\u306b\u306a\u308b\u5834\u9762\u3067\u5f79\u7acb\u3061\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u591c\u9593\u3084\u6697\u3044\u90e8\u5c4b\u3067\u306e\u6642\u9593\u78ba\u8a8d\u306b<\/strong> <br>\u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u753b\u9762\u306e\u307e\u3076\u3057\u3055\u3092\u6291\u3048\u3001\u5c31\u5bdd\u524d\u306e\u5bdd\u5ba4\u306a\u3069\u3067\u3082\u5feb\u9069\u306b\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-3\">\u30a2\u30d7\u30ea\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306f\u4e00\u5207\u4e0d\u8981\uff01\u30d6\u30e9\u30a6\u30b6\u6642\u8a08\u306e\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u6642\u8a08\u30a2\u30d7\u30ea\u3092\u65b0\u3057\u304f\u63a2\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u624b\u9593\u306f\u304b\u304b\u308a\u307e\u305b\u3093\u3002\u30d6\u30e9\u30a6\u30b6\u306e\u30d6\u30c3\u30af\u30de\u30fc\u30af\uff08\u304a\u6c17\u306b\u5165\u308a\uff09\u306b\u3053\u306e\u30da\u30fc\u30b8\u3092\u767b\u9332\u3059\u308b\u304b\u3001\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u306e\u30db\u30fc\u30e0\u753b\u9762\u306b\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3092\u8ffd\u52a0\u3059\u308b\u3060\u3051\u3067\u3001\u3044\u3064\u3067\u3082\u3059\u3050\u306b\u30a2\u30d7\u30ea\u611f\u899a\u3067\u8d77\u52d5\u3067\u304d\u307e\u3059\u3002\u7aef\u672b\u306e\u30b9\u30c8\u30ec\u30fc\u30b8\u5bb9\u91cf\u3092\u5727\u8feb\u3057\u306a\u3044\u70b9\u3082\u5927\u304d\u306a\u30e1\u30ea\u30c3\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8868\u793a\u5f62\u5f0f 24\u6642\u9593 12\u6642\u9593 \u8868\u793a\u8981\u7d20 \u79d2 \u65e5\u4ed8\u30fb\u66dc\u65e5 \u30c6\u30fc\u30de \u30e9\u30a4\u30c8 \u30c0\u30fc\u30af \u5168\u753b\u9762\u8868\u793a \u3053\u306e\u30c4\u30fc\u30eb\u306f\u3001\u30d1\u30bd\u30b3\u30f3\u3084\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u306e\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u305d\u306e\u307e\u307e\u4f7f\u3048\u308b\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u4e0d\u8981\u306e\u7121\u6599\u30c7\u30b8\u30bf\u30eb\u6642\u8a08\u3067\u3059\u3002\u8a2d\u5b9a\u3092\u597d\u307f\u306b\u30ab\u30b9\u30bf\u30de &#8230; <\/p>\n","protected":false},"author":4,"featured_media":15649,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,39],"tags":[],"class_list":["post-15610","post","type-post","status-publish","format-standard","has-post-thumbnail","category-tool","category-life","entry"],"_links":{"self":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/15610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/comments?post=15610"}],"version-history":[{"count":9,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/15610\/revisions"}],"predecessor-version":[{"id":15648,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/posts\/15610\/revisions\/15648"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/media\/15649"}],"wp:attachment":[{"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/media?parent=15610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/categories?post=15610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rakkokeyword.com\/techo\/wp-json\/wp\/v2\/tags?post=15610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}