2022年7月現在、はてなブログではサイドバーモジュールやhtml記事内にscriptタグを埋め込んでも動作しない仕様になったりならなかったりしているようです。下記記事内のコードははてなブログの仕様変更により突然使えなくなることもありますのでご了承ください。
「はてなブログのサイドバーにカウントダウンのモジュールを入れたい！」という需要があったのでサクッと作ってみました。
こんな感じになります。
（スクリーンショットです）
試験日や発表日、オフ会などのイベント開催日まで等、ブログに関連した内容のカウントダウンにご利用頂ければと。
はてなブログのサイドバーにカウントダウンのモジュールを追加する方法
デザイン→「カスタマイズ」タブ→サイドバー→「+モジュールを追加」→「HTML」を開いて
「タイトル」のところにお好みのタイトルを入力したらhtml入力欄に下記のコードをコピペ。
<style type="text/css"> #RealtimeCountdownArea1{padding:4px;text-align: center;} .remainday{background: #333;font-size: 24px;border-radius: 8px;padding:4px;line-height: 0px;text-align: center;color: #eee;} </style> <div id="RealtimeCountdownArea1"></div> <script type="text/javascript" language="javascript"> // ※指定日を設定※ var targetDay = new Date(2020,7,24); targetDay.setMonth(targetDay.getMonth() -1); //現在日付を取得 var today = new Date(); // 開催日までの日数を算出 remainDay = Math.floor( (targetDay - today) / (24*60*60*1000) ); remainDay++; //表示 remainDayDisp='<span class="remainday">'+remainDay+'</span>'; if (remainDay > 0) { msg = "開催まであと"+remainDayDisp+"日"; } else if (remainDay < -1) { msg = "お疲れさまです！"; } else { msg = "<big>開催日！</big>"; } document.getElementById("RealtimeCountdownArea1").innerHTML = msg; </script>
以上です。上記サンプルではとりあえず東京オリンピックまでのカウントダウンにしてあります。
内容の変更方法
カウントダウンの期日指定
// ※指定日を設定※
var targetDay = new Date(2020,7,24);
のところにカウントダウンしたい当該日を適宜設定します。
文言の変更
カウントダウンまで
msg = "開催まであと"+remainDayDisp+"日";
当日
msg = "<big>開催日！</big>";
当日以降
msg = "お疲れさまです！";
日本語部分を適宜変更してOKです。このコードだと当日の翌日も当日表示される可能性ありますので、当日以降はとっととこのモジュールを削除した方が良いと思います（適当）。
スタイルの変更方法
<style type="text/css">
#RealtimeCountdownArea1{padding:4px;text-align: center;}
.remainday{background: #333;font-size: 24px;border-radius: 8px;padding:4px;line-height: 0px;text-align: center;color: #eee;}
</style>
文言の箇所に#RealtimeCountdownArea1というid、日付の箇所にspanで.remaindayというclassを埋め込んでありますので適宜変更してください。
カスタマイズが得意な方はこの辺を好きに色々弄って「色々なカウントダウンサイドバーのデザイン」とかの記事を書いて頂いて結構です（他力本願）。
技術解説
JavaScriptのmonthの扱いは罠
jQueryは未使用です。
JavaScriptだと日付は1〜31なのに月の扱いだけ0〜11、という罠がありますので、あらかじめ1を引いた数で指定するか、上記コードのように
targetDay.setMonth(targetDay.getMonth() -1);
と、指定した月だけ1引いてやる必要があります。
実は記事内にも貼れる
お気づきの方もいらっしゃるかと思いますが、これサイドバーだけじゃなく記事上や記事下、ブログ記事のhtml編集欄にも書き込めます。
こんなのを記事中に貼るとか
ちょっと弄ればこんなのとかも可能ですね。
どう弄ったかはこの記事のhtmlソース見てください。
※サイドバー含め、複数貼る場合は#RealtimeCountdownArea1のid名を「#RealtimeCountdownArea2」「#RealtimeCountdownArea3」…など、一意なものに変更する必要があります。
追記：はてなラボにもカウントダウンモジュールあるよ
はてなラボで「はてなカウンティング」というものが提供されていて、作成したカウントダウンやカウントアップをサイドバーなどに貼れるようになっています。
スタイルとか気にしなければこれで。
はてなラボご利用上の注意
- すべてが実験的なサービスです。完成度は総じて50%未満です。
- サービスが突然現れたり、突然無くなったりします。お預かりしたデータの保存は保証いたしません。
突然無くなる、そんなこともありますので。
まとめ
2020年の東京オリンピック開催、楽しみですね！
それではまた…さよならいち！・∀・)ノ
