らいちのヒミツ基地

公然のひみつ基地です

トップ > カスタマイズ > はてなブログのサイドバーにカウントダウンのモジュールを追加する方法

はてなブログのサイドバーにカウントダウンのモジュールを追加する方法

カスタマイズ ブログ

広　告

f:id:AzuLitchi:20180902214935j:plain

「はてなブログのサイドバーにカウントダウンのモジュールを入れたい！」という需要があったのでサクッと作ってみました。

こんな感じになります。

f:id:AzuLitchi:20180902214947p:plain

試験日や発表日、オフ会などのイベント開催日まで等、ブログに関連した内容のカウントダウンにご利用頂ければと。

はてなブログのサイドバーにカウントダウンのモジュールを追加する方法

デザイン→「カスタマイズ」タブ→サイドバー→「+モジュールを追加」→「HTML」を開いて

 

f:id:AzuLitchi:20180902215016j:plain

「タイトル」のところにお好みのタイトルを入力したら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編集欄にも書き込めます。

こんなのを記事中に貼るとか

次の寅年まであと1216日

 

ちょっと弄ればこんなのとかも可能ですね。

アンゴルモアの大王降臨から約6974日経過

どう弄ったかはこの記事のhtmlソース見てください。

※サイドバー含め、複数貼る場合は#RealtimeCountdownArea1のid名を「#RealtimeCountdownArea2」「#RealtimeCountdownArea3」…など、一意なものに変更する必要があります。

まとめ

2020年の東京オリンピック開催、楽しみですね！

f:id:AzuLitchi:20180902215033j:plain

AKIRA 〈Blu-ray〉
posted with カエレバ
岩田光央 ジェネオン・ユニバーサル 2011-06-22
Amazon
楽天市場
 

それではまた…さよならいち！・∀・)ノ