javascript.jsに以下を追加
(function($) { var new_span = 7; //newを表示する期間 /* * 今日の日付から投稿(更新)日の差を計算して返す * return int */ function diff(checkDate) { var d1 = new Date(), d2 = new Date(checkDate), d_diff = d2.getTime() - d1.getTime(), daysDiff = Math.floor(d_diff / (1000 * 60 * 60 * 24)); return ++daysDiff; } /* * 表示する期間の日付差から期間中かを返す * return 0 now * return 1 new * return -1 それ以外 */ function check(diffday) { var diff_absoluteValue = Math.abs(diffday); if (diff_absoluteValue === 0) { return 0; } else if (diff_absoluteValue < new_span) { return 1; } else { return -1; } } $(function() { /* * 各post-meta内の投稿(更新)日よりnew等をつける処理 * updateがある場合は更新日よりチェック * それ以外は投稿日からチェック */ $(".entry .post-meta").each(function() { var p = $(this).find(".post-date .published").text(), u = $(this).find(".post-update .updated").text(), insertTarget = $(this).closest(".entry").find(".entry-card-content h2"); if (u.length > 0) { //更新日がある時 if (check(diff(u)) == 0) { insertTarget.prepend("now"); } else if (check(diff(u)) > 0) { insertTarget.prepend("new"); } } else { if (check(diff(p)) == 0) { insertTarget.prepend("now"); } else if (check(diff(p)) > 0) { insertTarget.prepend("new"); } } }); }); })(jQuery);
style.cssに以下を追加
.now, .new { display: inline-block; padding: 0 4px; margin-right: 4px; border: 1px solid #ccc; border-radius: 5px; color: #fff; } .now { background-color: red; -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .new { background-color: #c89600; } @-webkit-keyframes shake { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes shake { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } }
コメント