キャラクター選択
Pink
Blue
Gray
Black
Purple
Orange
Light Blue
Red
Full Body
右側の台詞
NAME
桜川　春（さくらがわ　はる）
DATA
シンガーソングライター
document.addEventListener("DOMContentLoaded", function() { console.log("Script Loaded"); // デバッグ用 const title = document.querySelector(".smooth"); const line = document.querySelector(".line"); const synopsis = document.querySelector(".synopsis"); if (title) { title.classList.add("is-animated"); } setTimeout(() => { if (line) { line.classList.add("is-animated"); } }, 800); // タイトル表示後に下線アニメーション setTimeout(() => { if (synopsis) { synopsis.classList.add("is-animated"); } }, 1600); // 下線表示後にあらすじを表示 }); ## Character Selection Page ### Layout - **Top row (5 characters):** Pink, Blue, Gray, Black, Orange - **Bottom row (3 characters):** Purple, Light Blue, Red ### Design - **Font:** Tsunagi Gothic Black - **Alignment:** - "Name" and "Data" → Left-aligned - Everything else → Center-aligned - **Frames and Circles:** Moderately thick borders - **Background:** White - **Character Images:** Temporary placeholder images (to be replaced later) - **Outfits:** Each character has only one outfit ### Interaction - Clicking on a character displays their details - Styled with clear distinctions for each character Let me know if you want any modifications! function selectCharacter(color) { currentCharacter = color; outfitIndex = 0; // 画像URLが正しい場合、full-bodyに設定 document.getElementById("full-body").src = characters[color].outfits[outfitIndex]; document.getElementById("character-name").textContent = characters[color].name; document.getElementById("character-data").textContent = characters[color].data; document.getElementById("character-quote").textContent = characters[color].quote; }