【簡単便利】「残り日数」と「期日後の文言」を表示してくれるjavascript!作者さんありがとうー!

【簡単便利】「残り日数」と「期日後の文言」を表示してくれるjavascript!作者さんありがとうー!

懸賞ブログなどで【締切:20xx年x月xx日【残り○○日】や【締切:20xx年x月xx日【キャンペーンは終了しました」という表示を見かけた事ありませんか。期日前は【残り○○日】、期日後は【キャンペーンは終了しました】と自動で表示してくれるアレです。

 

私はアレを自分のブログにも表示させたくて、グーグル先生に相談しました・・・。すると、とても素晴らしいサイトを教えてくれたんです!!

 

作者様のサイト

サイト名は「はぐれメタルはにげだした」です。

普通のサイトでもレンタルブログでもとりあえずjavascriptさえ動けばコピペだけで導入できます。

はぐれメタルはにげだした」より

ワードプレスに限らず無料ブログでも導入できるみたいです!!すんばらしい!

 

上記サイトに分かりやすく導入方法が載っていますが、私と同じ「ライオンメディア(ワードプレスのテーマ)」をお使いの方向けに、導入方法を載せておきます。

 

キリオ
無料で誰でも使えるように公開してるんだ!なんて心の広い人!
キリコ
ありがたやー、ありがたやー

 

ライオンメディアへの導入方法

①ダッシュボード⇒外観⇒カスタマイズをクリック。

 

 

②画面左側の中段くらいにある「高度な設定[LION用]」をクリック。

 

 

■</head>直前の自由入力エリアに下のコードをコピペ。

≪自由入力エリアに他のコードがある場合≫

コピペする時は、自由入力エリアの一番下にコピペして下さい。他のコードにコピペしたコードが被った場合、サイトの表示が崩れたり真っ白になったりする恐れがあります。念の為、他のコードをメモ帳などに貼り付けておくと良いかもしれません。

≪自由入力エリアにコードが何もない場合≫

そのままコピペでOKです。

 

はぐれメタルはにげだした」よりコード引用
<script>
<!–
function updateStringAfterDeadline(target_day,target_time,str_before,str_after) {
var msg = str_after;
var today = new Date();
var deadline = Math.ceil((Date.parse(target_day + ” ” + target_time)-today.getTime()) / 1000);
if ( deadline > 0 ) {
msg = str_before;
}
days = Math.floor(deadline / 24 / 60 / 60);
days_sec = days * 24 * 60 * 60;
hours = Math.floor((deadline-days_sec) / 60 / 60);
hours_sec = hours * 60 * 60;
minutes = Math.floor((deadline-days_sec-hours_sec) / 60);
minutes_sec = minutes * 60;
secs = deadline-days_sec-hours_sec-minutes_sec;
msg = msg.replace(“%D%”,days);
msg = msg.replace(“%H%”,hours);
msg = msg.replace(“%M%”,minutes);
msg = msg.replace(“%S%”,secs);
document.write(msg);
}
–>
</script>

上のコードを</head>直前の自由入力エリアに貼り付け 公開 ボタンを押します。

これで下準備は終わりです!

 

 

後は記事内やサイドバーなど、表示したい部分に下のコードを貼り付けます。

はぐれメタルはにげだした」よりコード引用
<script>updateStringAfterDeadline(“2030/02/18“,”23:50:00“,”期日前の文章 %D%日 %H%時間 %M%分 %S%秒“,”期日後の文章“);</script>

上のコードを投稿画面のテキストに貼り付けると下の様に表示されます。

 

 

私は「残り○日」と表示したかったので、下のように書き換えました。

<script>updateStringAfterDeadline(“2030/02/18″,”23:50:00″,”残り %D%日”,”キャンペーンは終了しました”);</script>

このように表示されます。

 

 

2030年を2019年にすると・・・

<script>updateStringAfterDeadline(“2019/02/18″,”23:50:00″,”残り %D%日”,”キャンペーンは終了しました”);</script>

このように表示されます。

 

表示設定がわかりにくい場合は、「はぐれメタルはにげだした」記事の下の方にジェネレータがあるので、そこに指定したい日付文言などを入力して、コードを生成してみてください。

ブログで指定した期日を過ぎたら自動で文章を更新させる方法

 

まとめ

コードを導入する際は注意が必要ですが、初心者の私でも導入できた素晴らしいjavascriptです。作者のはぐれんさんありがとうございましたー!はぐれんさんについては、ブログ「はぐれメタルはにげだした」をご覧ください。

 

 

0

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でキリコをフォローしよう!

ブログ運営カテゴリの最新記事