【はてなブログカスタマイズ】タイムセールなどで指定の時間だけテキストを表示させる方法

今回は、指定の時間だけ指定のテキストを表示させる方法の紹介です。

例えば、指定の時間にだけ「タイムセール開催中！！」と表示させるとか。

ただし、Markdown編集だとうまくいかないです。みたままモードでHTML編集を使って下さい。はてな記法は多分大丈夫。

あと、見たままモードだと編集画面から文字が消えますが、時間になると表示される（はず）ので安心して下さい。

実装方法

まず、記事の一番下に以下のコードをコピペ。

スタート時間と終了時間は好きな時間に書き換えて下さい。今回はAmazonのサイバーマンデー開催時間を設定しています。

時間は数字だけで記します。半角です。

2017年12月8日18時00分　→　201712081800

<style>
.limited-time {
  display: none;
}
</style>
<script>
(function(){
  var start = 201712081800; // スタート時間
  var stop = 201712112359;  // 終了時間
  var date = new Date();
  var year = date.getFullYear();
  var month = ('0' + (date.getMonth() + 1)).slice(-2);
  var day = ('0' + date.getDate()).slice(-2);
  var hours = ('0' + date.getHours()).slice(-2);
  var min = ('0' + date.getMinutes()).slice(-2);
  var nowTime = year + month + day + hours + min;
  nowTime = parseInt(nowTime, 10);
  var limitedTime = document.querySelectorAll('.limited-time');
  var count = limitedTime.length;
  if(start < nowTime && nowTime < stop){
    for(var i=0; i<count; i++) {
      limitedTime[i].style.display = 'block';
    }
  }
}());
</script>

あとはpタグに「limited-time」というクラスを付与すれば、そのテキストは指定の時間しか表示されません。

<p class="limited-time">タイムセール開催中！</p>

これでわざわざ開始時間と終了時間に記事を編集しなくても大丈夫ですね。

指定時間が過ぎれば表示されることはないので、時間のある時にコードを削除すればOKです。

テスト方法

表示を確認したい場合は、スタートの時間を前の日とかにしてプレビューしてみると良いでしょう。

表示確認後は正しい時間に戻すのを忘れないようにして下さい。

 

他にもこんな記事書いてます。

必見！はてなブログのカスタマイズを一気に紹介する | SHIROMAG