JIN:Rカスタマイズ・新着７日以内の記事カードにNewマークを付ける

JIN:Rのカスタマイズです。新着７日以内の記事にNewマークを付けます。

JSを書いて、CSSで整えます。

JS

document.addEventListener("DOMContentLoaded", function () {
    const articles = document.querySelectorAll(".o--postlist-item");

    articles.forEach(article => {
        const dateElement = article.querySelector(".a--post-date");
        if (!dateElement) return;

        const postDate = new Date(dateElement.textContent.trim().replace(/\./g, "-"));
        const today = new Date();
        const diffTime = today - postDate;
        const diffDays = diffTime / (1000 * 60 * 60 * 24);

        if (diffDays <= 7) {
            const newMark = document.createElement("span");
            newMark.textContent = "NEW";
            newMark.classList.add("new-badge");

            dateElement.appendChild(newMark); // 日付の横に追加
        }
    });
});

CSS

.new-badge {
    display: inline-block;
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px; /* 日付との間に余白を作る */
}

内容です。.o--postlist-item をループで取得 .a--post-date から日付を取得し、Date オブジェクトに変換今日の日付との差を計算し、7日以内なら「NEW」マークを追加

Share This…