Mutter
編集

Blogger用ウィジェット【時計】

｜2025/10/09

アイキャッチ画像

面白い時計があったらなぁ、、、

ブログに張り付けるんだけどなぁ、、、

で

作りました


…
　
↑ ↑ ↑
これ
※Ver2です

アバウトな時計

今何時？
１０時前

とか、適当と言うか分単位まで伝えずに〇時前とか〇時過ぎって伝える時ありますよね？

それが時計だったら面白いのに

と、作ってみました

と、言ってもChatGPTにアレコレ言って作って貰ったんですけど(^^;


時計ガジェット
INFOに時計追加


ブログ等を見る時はパソコン、スマホ、タブレット、何で見ても時計はあるし必要ないんですが、、、

こういう時計があっても良いじゃないですか

遊び心っていう奴ですよ

馬鹿だなぁ、、、とか言わないで


表記は基本が、〇時 ～ 〇時過ぎ ～ 〇時半 ～ 〇時前 ～ 〇時 の流れ

12時はお昼表記しているのでお昼前 ～ お昼 ～ お昼過ぎ の表記になります

時計の８時表記
8時00分

時計８時1分～29分表記
8時1～29分

0～6時までは更にアバウトで１時間単位の表示切替になります

真夜中 ～ 深夜 ～ 丑三つ時 ～ 夜明け前 ～ 夜が明けかけ ～ 明け方 ～ 朝 って流れ


こんな腕時計発売されたら買うけどな

どっかのメーカーが作ってくれないかなぁ（笑）



コード

Bloggerなら、レイアウト編集・ガジェット追加で動きます

記事やページに張り付けてもOK

テーマ編集では場所によるのでガジェットで追加がお勧めです

表記は1分単位ではありませんが内部では1分ごとに時間更新してますので、表記を書きまくれば１分ごとに変更できますよ

背景色も時間によって変わるようにしてます

時間表記や色等、自分好みにイジって面白い時計作ってください

Ver1

読み込み中...
　
ボタン付きデモ版
 ボタンクリックで各表記が見れます 

<!-- アバウトな時計 -->
<div class="japaneseTimeClockContainer"
     style="display:inline-block; text-align:center; font-family:serif;">
  <div class="japaneseTimeClockBox"
       style="
         font-size:20px;        
         padding:6px 20px;      
         width:220px;           
         border-radius:10px;    
         border:1px solid rgba(0,0,0,0.1); 
         display:inline-block;   
         text-align:center;      
         transition:all 1s ease; 
         opacity:1;              
         background-color:#f8f6f0; 
         background-image:
           linear-gradient(90deg, rgba(200,180,160,0.03) 1px, transparent 1px),
           linear-gradient(180deg, rgba(200,180,160,0.03) 1px, transparent 1px),
           radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
         background-size:6px 6px,6px 6px,100px 100px; 
         background-blend-mode: overlay; 
       ">
    <div class="japaneseTimeClock"
         style="font-size:20px; margin-bottom:2px; transition:opacity 0.3s ease;">読み込み中...</div>
    <div class="japaneseDate"
         style="font-size:16px; margin-top:2px; transition:all 1s ease;">　</div>
  </div>
</div>

<script>
(function(){
  function getJapaneseEra(date){
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const eraYear = year - 2018;
    return `令和${eraYear}年${month}月${day}日`;
  }

  function updateJapaneseTimeClock(){
    const now = new Date();
    const h = now.getHours();
    const m = now.getMinutes();

    // ページ内の全ての時計を更新
    document.querySelectorAll('.japaneseTimeClockContainer').forEach(container=>{
      const clock = container.querySelector('.japaneseTimeClock');
      const dateDiv = container.querySelector('.japaneseDate');
      const box = container.querySelector('.japaneseTimeClockBox');
      let display='';

      if(h===0) display='真夜中';
      else if(h===1) display='深夜';
      else if(h===2) display='丑三つ時';
      else if(h===3) display='夜明け前';
      else if(h===4) display='夜が明けかけ';
      else if(h===5) display='明け方';
      else if(h===6) display='朝';
      else if(h===11 && m > 30) display='お昼前';
      else if(h===12){if(m===0) display='お昼';
        else if(m>0 && m<30) display='お昼過ぎ';
        else if(m===30) display='12時半';
        else display='13時前';
      }
      else { 
        if(h===14 && m>30 && m<60) display='もうすぐおやつ';
        else if(h===15 && m===0) display='おやつ';
        else if(m===0) display=h+'時';
        else if(m>0 && m<30) display=h+'時過ぎ';
        else if(m===30) display=h+'時半';
        else display=(h+1)+'時前';
      }

      clock.style.opacity=0;
      setTimeout(()=>{clock.textContent=display; clock.style.opacity=1;},300);
      dateDiv.textContent = getJapaneseEra(now);

      let bgColor='', textColor='', borderColor='';
      if(h>=5 && h<10){bgColor='#fffbe6'; textColor='#443'; borderColor='rgba(255,222,100,0.5)';}
      else if(h>=10 && h<17){bgColor='#f8f6f0'; textColor='#333'; borderColor='rgba(0,0,0,0.1)';}
      else if(h>=17 && h<19){bgColor='#ff9c3f'; textColor='#fff'; borderColor='rgba(255,160,0,0.6)';}
      else{bgColor='#1f1e1b'; textColor='#f5f5f5'; borderColor='rgba(255,255,255,0.2)';}

      const texture='linear-gradient(90deg, rgba(200,180,160,0.03) 1px, transparent 1px), linear-gradient(180deg, rgba(200,180,160,0.03) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px)';
      box.style.background=bgColor;
      box.style.color=textColor;
      clock.style.color=textColor;
      dateDiv.style.color=textColor;
      box.style.borderColor=borderColor;
      box.style.backgroundImage=texture;
      box.style.backgroundSize='6px 6px,6px 6px,100px 100px';
      box.style.backgroundBlendMode='overlay';
    });
  }

  updateJapaneseTimeClock();
  setInterval(updateJapaneseTimeClock,60000);
})();
</script>
説明有、通常版
※追記／２つ設置すると動かない不具合を直しました 


<div id="japaneseTimeClockContainer" style="display:inline-block;text-align:center;font-family:serif;"><div id="japaneseTimeClockBox" style="font-size:20px;padding:6px 20px;width:220px;border-radius:10px;border:1px solid rgba(0,0,0,0.1);display:inline-block;text-align:center;transition:all 1s ease;opacity:1;background-color:#f8f6f0;background-image:linear-gradient(90deg, rgba(200,180,160,0.03) 1px, transparent 1px),linear-gradient(180deg, rgba(200,180,160,0.03) 1px, transparent 1px),radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);background-size:6px 6px,6px 6px,100px 100px;background-blend-mode:overlay;"><div id="japaneseTimeClock" style="font-size:20px;margin-bottom:2px;transition:opacity 0.3s ease;">読み込み中...</div><div id="japaneseDate" style="font-size:16px;margin-top:2px;transition:all 1s ease;">　</div></div></div><script>(function(){function getJapaneseEra(d){return`令和${d.getFullYear()-2018}年${d.getMonth()+1}月${d.getDate()}日`;}function updateJapaneseTimeClock(){const now=new Date(),h=now.getHours(),m=now.getMinutes();document.querySelectorAll('#japaneseTimeClockContainer').forEach(c=>{const clock=c.querySelector('#japaneseTimeClock'),dateDiv=c.querySelector('#japaneseDate'),box=c.querySelector('#japaneseTimeClockBox');let display='';if(h===0)display='真夜中';else if(h===1)display='深夜';else if(h===2)display='丑三つ時';else if(h===3)display='夜明け前';else if(h===4)display='夜が明けかけ';else if(h===5)display='明け方';else if(h===6)display='朝';else if(h===11&&m>30)display='お昼前';else if(h===12){if(m===0)display='お昼';else if(m>0&&m<30)display='お昼過ぎ';else if(m===30)display='12時半';else display='13時前';}else{if(m===0)display=h+'時';else if(m>0&&m<30)display=h+'時過ぎ';else if(m===30)display=h+'時半';else display=(h+1)+'時前';}clock.style.opacity=0;setTimeout(()=>{clock.textContent=display;clock.style.opacity=1;},300);dateDiv.textContent=getJapaneseEra(now);let bgColor='',borderColor='',textColor='';if(h>=5&&h<10){bgColor='#fffbe6';textColor='#443';borderColor='rgba(255,222,100,0.5)';}else if(h>=10&&h<17){bgColor='#f8f6f0';textColor='#333';borderColor='rgba(0,0,0,0.1)';}else if(h>=17&&h<19){bgColor='#ff9c3f';textColor='#fff';borderColor='rgba(255,160,0,0.6)';}else{bgColor='#1f1e1b';textColor='#f5f5f5';borderColor='rgba(255,255,255,0.2)';}box.style.background=bgColor;box.style.color=textColor;clock.style.color=textColor;dateDiv.style.color=textColor;box.style.borderColor=borderColor;box.style.backgroundImage='linear-gradient(90deg, rgba(200,180,160,0.03) 1px, transparent 1px),linear-gradient(180deg, rgba(200,180,160,0.03) 1px, transparent 1px),radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px)';box.style.backgroundSize='6px 6px,6px 6px,100px 100px';box.style.backgroundBlendMode='overlay';});}updateJapaneseTimeClock();setInterval(updateJapaneseTimeClock,60000);})();
</script>
圧縮版

Ver2

…
　
デモ版
14時31～59分をもうすぐおやつ、15時をおやつに変更
背景をグラデーションにしました

<!-- アバウトな時計 -->
<div class="jClock" style="display:inline-block;text-align:center;font-family:serif;">
  <!-- 時計全体の枠 -->
  <div class="box" style="font-size:20px;padding:6px 20px;width:220px;border-radius:10px;
      border:1px solid rgba(0,0,0,0.1);display:inline-block;text-align:center;
      transition:all 1s ease;opacity:1;">
    <!-- 時刻表示部分 -->
    <div class="time" style="font-size:20px;margin-bottom:2px;transition:opacity 0.3s ease;">…</div>
    <!-- 和暦日付表示部分 -->
    <div class="date" style="font-size:16px;margin-top:2px;transition:all 1s ease;">　</div>
  </div>
</div>

<script>
(function(){
  // --- 和暦（令和）を返す関数 ---
  function era(d){
    return `令${d.getFullYear()-2018}年${d.getMonth()+1}月${d.getDate()}日`;
  }

  // --- 時計更新関数 ---
  function updateClock(){
    const now = new Date(),
          h = now.getHours(),
          m = now.getMinutes();

    // ページ内のすべての時計に対応
    document.querySelectorAll('.jClock').forEach(c=>{
      const t = c.querySelector('.time'),  // 時刻表示
            d = c.querySelector('.date'),  // 日付表示
            b = c.querySelector('.box');   // 時計枠

 // --- 時刻文字列の決定 ---
      let s = '';
      if(h===0) s='真夜中';
      else if(h===1) s='深夜';
      else if(h===2) s='丑三つ時';
      else if(h===3) s='夜明け前';
      else if(h===4) s='夜が明けかけ';
      else if(h===5) s='明け方';
      else if(h>=6&&h<7) s='朝';
      else if(h===11 && m<31) s='お昼前';
      else if(h===12 && m===0) s='お昼';
      else if(h===12 && m>=1 && m<30) s='お昼過ぎ';
      else if(h===14&&m>30&&m<60) s='もうすぐおやつ'; 
      else if(h===15&&m===0) s='おやつ';
      else {
        if(m===0) s=h+'時';
        else if(m<30) s=h+'時過ぎ';
        else if(m===30) s=h+'時半';
        else s=(h+1)+'時前';
      }

      // --- フェードアニメーションで表示 ---
      t.style.opacity = 0;
      setTimeout(()=>{
        t.textContent = s;
        t.style.opacity = 1;
      }, 300);

      // --- 日付更新 ---
      d.textContent = era(now);

      // --- 背景・文字色・枠色の切り替え（時間帯ごと） ---
      let bg='', tc='', bc=''; // 背景・文字色・枠色
      if(h>=5&&h<10){      // 朝
        bg='linear-gradient(180deg,#ffd9a6,#fff4e0)';
        tc='#443';
        bc='rgba(255,222,100,0.5)';
      } else if(h>=10&&h<17){ // 昼
        bg='linear-gradient(180deg,#e6f7ff,#fff)';
        tc='#333';
        bc='rgba(0,0,0,0.1)';
      } else if(h>=17&&h<19){ // 夕方
        bg='linear-gradient(180deg,#f84,#fb9)';
        tc='#fff';
        bc='rgba(255,160,0,0.6)';
      } else {               // 夜
        bg='linear-gradient(180deg,#2e2b4d,#191a30)';
        tc='#f5f5f5';
        bc='rgba(255,255,255,0.2)';
      }

      // --- 適用 ---
      b.style.background = bg;
      b.style.color = tc;
      t.style.color = tc;
      d.style.color = tc;
      b.style.borderColor = bc;
    });
  }

  // 初回更新＆1分ごとに更新
  updateClock();
  setInterval(updateClock, 60000);
})();
</script>
通常版
※追記／２つ設置すると動かない不具合を直しました 


<div class="jClock" style="display:inline-block;text-align:center;font-family:serif;"><div class="box" style="font-size:20px;padding:6px 20px;width:220px;border-radius:10px;border:1px solid rgba(0,0,0,0.1);display:inline-block;text-align:center;transition:all 1s ease;opacity:1;"><div class="time" style="font-size:20px;margin-bottom:2px;transition:opacity 0.3s ease;">…</div><div class="date" style="font-size:16px;margin-top:2px;transition:all 1s ease;">　</div></div></div><script>(function(){function era(d){return `令${d.getFullYear()-2018}年${d.getMonth()+1}月${d.getDate()}日`;}function updateClock(){const now=new Date(),h=now.getHours(),m=now.getMinutes();document.querySelectorAll('.jClock').forEach(c=>{const t=c.querySelector('.time'),d=c.querySelector('.date'),b=c.querySelector('.box');let s='';if(h===0)s='真夜中';else if(h===1)s='深夜';else if(h===2)s='丑三つ時';else if(h===3)s='夜明け前';else if(h===4)s='夜が明けかけ';else if(h===5)s='明け方';else if(h>=6&&h<7)s='朝';else if(h===11&&m>=31)s='お昼前';else if(h===12&&m===0)s='お昼';else if(h===12&&m>=1&&m<30)s='お昼過ぎ';else if(h===14&&m>30&&m<60)s='もうすぐおやつ';else if(h===15&&m===0)s='おやつ';else{s=m===0?h+'時':m<30?h+'時過ぎ':m===30?h+'時半':(h+1)+'時前';}t.style.opacity=0;setTimeout(()=>{t.textContent=s;t.style.opacity=1;},300);d.textContent=era(now);let bg='',tc='',bc='';if(h>=5&&h<10){bg='linear-gradient(180deg,#ffd9a6,#fff4e0)';tc='#443';bc='rgba(255,222,100,0.5)';}else if(h>=10&&h<17){bg='linear-gradient(180deg,#e6f7ff,#fff)';tc='#333';bc='rgba(0,0,0,0.1)';}else if(h>=17&&h<19){bg='linear-gradient(180deg,#f84,#fb9)';tc='#fff';bc='rgba(255,160,0,0.6)';}else{bg='linear-gradient(180deg,#2e2b4d,#191a30)';tc='#f5f5f5';bc='rgba(255,255,255,0.2)';}b.style.background=bg;b.style.color=tc;t.style.color=tc;d.style.color=tc;b.style.borderColor=bc;});}updateClock();setInterval(updateClock,60000);})();</script>
圧縮版


昼夜逆転夜型生活の方は日中が１時間単位

夜を30分単位で作っても面白いよねぇ

時計なのに昼用夜用は別々ってだけで面白い


以上、くだらない時計でした


こんなの作った！！って方は

コメントで教えて頂けると嬉しいです

って誰も作らないか(^^;


ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

BloggerのテーマをZEROからF-liteへ変更、カスタマイズの記事もここにまとめてます

ファビコンkochimountaingo.blogspot.com

その他のBloggerカスタマイズはコチラにまとめてます


WordpressでもOK

試しにWixで作った無料HPにHTML埋め込んだら動きました！！

Your vision. Your goals. Your website. | Wix.com

Your vision. Your goals. Your website. | Wix.com

Get everything you need to create your website, your way. From an intuitive website builder to built-in business solutions and AI tools—try Wix for free.

ファビコンwww.wix.com


って事は、WordPressでも動くって事かな、、、


WordPressテストページ | ビデデジ ホームページ

WordPressテストページ | ビデデジ ホームページ

Wordpressでできるのかを試すためのページ

ファビコンwww.videdegi.com

ビデデジさんがテストしてくれました
WordpressもOKだそうです
ありがとうございます
m(__)m


って事で、HTML編集・埋め込みさえできれば動くっぽいです

この時計が気に入ったらBlogger以外の方も試してみてください

もし動かなくても、ここで公開しているコードをコピペでChatGPTに伝えて、書き換えて！！って言えばいけると思う


Blogger以外で動いた、導入したって方もよろしければコメントでもください m(__)m


新しい投稿はありません 前の投稿
パタゴニア　フランス発祥本格登山ブランド『ミレー(MILLET)』公式オンラインストア