生成AI+スマホで作成「WordPress(ブログ)で使えるJavaScript」 時間で画像とメッセージを変える

時間帯で上の画像とメッセージが変わります

<div id="container" style="padding: 50px; text-align: center; transition: 0.5s;">
  <h1 id="greeting"></h1>
  <img id="time-image" src="" alt="時間帯の画像" style="width: 200px; border-radius: 10px;">
</div>

/* ここから下は説明用です */
時間帯で上の画像とメッセージが変わります
<div style="display: flex; gap: 10px;">
  <img src="朝の画像" style="width: 30%;">
  <img src="昼の画像" style="width: 30%;">
  <img src="夜の画像" style="width: 30%;">
</div>

function updateAppearance() {
  const hour = new Date().getHours();
  const greeting = document.getElementById("greeting");
  const container = document.getElementById("container");
  const img = document.getElementById("time-image");

  if (hour >= 5 && hour < 11) {
    // 朝
    greeting.innerText = "おはようございます！";
    container.style.backgroundColor = "#f0f9ff"; // 薄い水色
    img.src = "morning.jpg"; 
  } else if (hour >= 11 && hour < 18) {
    // 昼
    greeting.innerText = "こんにちは！";
    container.style.backgroundColor = "#fffde7"; // 薄い黄色
    img.src = "noon.jpg";
  } else {
    // 夜
    greeting.innerText = "こんばんは！";
    container.style.backgroundColor = "#2c3e50"; // 濃い紺色
   // container.style.color = "white"; // 文字を白く
    img.src = "night.jpg";
  }
}

window.onload = updateAppearance;