生成AI+スマホで作成「WordPress(ブログ)で使えるJavaScript」 金色文字／銀色文字

    <div id="target-text">PREMIUM GOLD</div>

    <div class="controls">
        <button onclick="applyEffect('gold')">黄金の輝き</button>
        <button onclick="applyEffect('silver')">白銀の輝き</button>
    </div>

        function applyEffect(type) {
            const el = document.getElementById('target-text');
            
            // アニメーションを一旦リセット（同じボタンを押した時用）
            el.style.animation = 'none';
            // ズレを防ぐため、少し遅延させて再適用
            setTimeout(() => {
                if (type === 'gold') {
                    el.innerText = 'PREMIUM GOLD';
                    el.style.background = 'linear-gradient(110deg, #755a05 20%, #ffdf71 40%, #ffffff 50%, #ffdf71 60%, #755a05 80%)';
                    el.style.filter = 'drop-shadow(0 0 10px rgba(184, 134, 11, 0.5))';
                } else {
                    el.innerText = 'SHINING SILVER';

el.style.background = 'linear-gradient(110deg, #2d2d2d 20%, #c0c0c0 40%, #ffffff 50%, #c0c0c0 60%, #2d2d2d 80%)';
                    el.style.filter = 'drop-shadow(0 0 10px rgba(255, 255, 255, 0.3))';
                }
                
                // アニメーションを適用
                // 3秒かけて移動、無限ループ、線形（一定速度）
                el.style.animation = 'shine 3s linear infinite';
            }, 10);
        }

        // 初期実行
        applyEffect('gold');                

        #target-text {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 30px;
            display: inline-block;
            /* 背景のサイズを大きくして動かせるようにする */
            background-size: 200% auto !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent;
        }

        /* キラリと光るアニメーションの定義 */
        @keyframes shine {
            0% { background-position: 200% center; }
            100% { background-position: -200% center; }
        }

        .controls button {
            padding: 12px 24px;
            font-size: 1rem;
            cursor: pointer;
            margin: 5px;
            border: 1px solid #444;
            background: #222;
            color: #fff;
            border-radius: 4px;
        }
        
        button:hover { background: #333; }