【初心者向け】はてなブログで記事内に指定日までの残り日数を表示する方法

こんにちは。

やまこうです。

ゲーム攻略記事を書いている時に、イベントの残り日数を自動で表示したいと思って調べました。

ブログに指定日までの残り日数を表示する方法

イベントまであと何日！とかを表示したい時ってありますよね。

自分で毎日更新するのは手間がかかるので、自動で更新する方法を調べてみました。

参考にさせていただいたのは、下記のサイトです。

指定日までの残り日数を表示する - JavaScript

ヘッダ部分へのソース記述

はてなブログでは、以下の手順でヘッダ部分に記述が可能です。

「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」

以下のソースを追加。

<SCRIPT LANGUAGE="JavaScript">
<!--
// 指定日までの残り日数を表示する
function apDay(y,m,d) {
today = new Date();
apday = new Date(y,m-1,d);
dayms = 24 * 60 * 60 * 1000;
n = Math.floor*1/dayms) + 1;
// 指定日から何日たったかを表示するには、"n"を"-n"にする
document.write(n);
}
//-->
</SCRIPT>

記事中へのソース追加

「見たまま編集」→「HTML編集タグ」

表示したい部分に、以下のソースを追加。

次回ワールドカップ開幕の2006年6月9日まで、あと
<FONT color="#ff0000" size="6">
<SCRIPT LANGUAGE="JavaScript">
<!--
// 以下のように年、月、日の順に書きます
apDay(2006,6,9);
//-->
</SCRIPT></FONT>
日です。

表示内容は、赤い部分を修正すればOKです。

また、青い部分は文字の色とサイズを指定しているので、他と一緒でよければ削除可能です。 

最後に

指定日を過ぎたら、マイナス表示されます。

JavaScriptとか詳しくなくても、参考にさせて頂くことで実現できるのはありがたいですね。

家族の記念日とかをカウントダウンしてもいいかも？？？

取り敢えず、東京オリンピックまでの日数をカウントするとこんな感じになります。

東京オリンピック開催の2020年7月24日まで、あと 日です。

あ、これって、記事内だけじゃなくて、トップとかサイドとかでもいけるんじゃないですかね？

それでは。

*1:apday.getTime()-today.getTime(