JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する

JSでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する

このJavaScript関数は、ウェブサイトのフッターに表示される著作権年数(Copyright Year)を、自動的に更新して表示する機能を提供します。HTML要素に現在の年や年数範囲を挿入します。

JavaScriptで著作権年を自動更新する関数

<span id="copyright"></span>
<script>
function autoCopyright(startYear, elementId = 'copyright') {
  if (!startYear || isNaN(startYear)) return;
  const currentYear = new Date().getFullYear();
  const text = (currentYear > startYear)
    ? `© ${startYear} - ${currentYear}`
    : `© ${currentYear}`;
  const el = document.getElementById(elementId);
  if (el) {
    el.textContent = text;
  }
}
autoCopyright(2020);
</script>

コード解説

この関数は、HTMLにある <span id="copyright"></span> 要素へ、例えば「2020 – 2025」のような著作権表示を自動的に反映させます。
ウェブサイトの年次更新作業を自動化することで、運営者の手間を省き、情報の正確性を保てます。

autoCopyright(2020) と書いておけば、2020年から今年(例:2025)までの範囲が自動表示されます。


まとめ

new Date().getFullYear() で現在の西暦を取得

開始年と現在年を比較し、単年または範囲(例:2020 – 2025)を生成

指定のHTML要素(id="copyright" など)に文字列を挿入

例: <span id="copyright"></span> に動的に表示される


なお、このページのフッターのCopyright年はPHP関数によって実装されています。
実装方法については、以下をご覧ください:
「PHPでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する」

関連記事
画像の遅延読み込みはこう変わる!2025年最新版・Lazy LoadとIntersectionObserverの最適解
2025年最新の画像遅延読み込み(Lazy Load)完全ガイド。ネイティブloading="lazy"とIntersectionObserverの使い分け・実装例・SEOやLCPへの最新対応ポイントまで徹底解説。パフォーマンスと検索順位アップのための必読ノウハウ!
aki0o0
aki0o0
1ヶ月前
画像の遅延読み込みはこう変わる!2025年最新版・Lazy LoadとIntersectionObserverの最適解
CSSによる絶対中央寄せ
実用性が高い方法順で7種類の実装方法を紹介 最も推奨されるのは Flexbox と Grid transform を使う方法はどんな要素にも応用可能 line-height や table-cell は特定用途向け JavaScript による制御も紹介されている
Details
Details
1ヶ月前
CSSによる絶対中央寄せ
JavaScript を使って通貨形式を数値に変換する
JavaScriptの正規表現を利用し、通貨表記に含まれる無効な記号を取り除くことで、簡単に通貨文字列を数値に変換できます。これにより、数値計算や金額比較などが容易になります。
Details
Details
1ヶ月前
JavaScript を使って通貨形式を数値に変換する
ページ遷移の一般的な方法
本記事では、Webページにおけるページ遷移(リダイレクト)の一般的な実装方法について紹介しています。JavaScript、HTMLのメタタグ、PHP、ASPを用いたリダイレクト方法をそれぞれ具体的なコード例と共に解説しています。
Details
Details
1ヶ月前
ページ遷移の一般的な方法
【CSS & JavaScript & SVG対応】円グラフ(扇形図)のアニメーション表現まとめ
はじめに 円グラフ(パイチャート)は、比率や構成比を視覚的に伝えるのに最適なUIコンポーネントです。最近、業務で使う機会があり、さまざまな方法でエフェクトをつけて表示する実装を試しました。 この記事では、以下の3パターンで実装する方法を紹介 […]
キウイフルーツ
キウイフルーツ
21日前
【CSS & JavaScript & SVG対応】円グラフ(扇形図)のアニメーション表現まとめ
IT業界の初心者が知っておくべきの用語(2025版)
新しいテクノロジーについて話すとき、時々自分がみんなのペースについていけないと感じることはありませんか?あるいは、その業界にいるのに、自分はまだ十分ではないと感じ、多くの専門用語を理解しなければならないこともあるでしょう。
Details
Details
1ヶ月前
IT業界の初心者が知っておくべきの用語(2025版)
JavaScriptでURL(パス)からファイル名を取得する
window.location.pathname でURLのパス部分を取得。 lastIndexOf('/') で最後のスラッシュ位置を検出。 substring でスラッシュの次から最後までを切り出し、ファイル名を抽出。
Details
Details
1ヶ月前
JavaScriptでURL(パス)からファイル名を取得する
jQuery Sortableがスマホなどのタッチスクリーンで使えない場合の対処法
モバイル端末でのクリックイベントとの競合を避けるため、タップ操作には click より touchstart を使うことを推奨。 jQuery UI のバージョンによっては、内部構造が異なる場合があるため、導入時はテストを行うこと。
Details
Details
1ヶ月前
jQuery Sortableがスマホなどのタッチスクリーンで使えない場合の対処法
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
本コードは典型的なモバイル用サイドナビゲーションの実装例です。ボタンによる表示切替と、メニュー外クリック検知を組み合わせることで、ユーザー体験を向上させています。さらにESCキーでのメニュー閉鎖も可能にし、アクセシビリティも配慮しています。
Details
Details
1ヶ月前
JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる
PHPでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
auto_copyright() 関数は、動的に著作権の年数を出力します。引数として開始年を受け取り、現在の年と比較して、単一年または範囲(例: 2015 - 2025)を表示します。
Details
Details
1ヶ月前
PHPでウェブサイトのフッターにあるCopyrightの年数範囲を自動更新する
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
2025年6月最新版のTIOBEインデックスから、今人気のプログラミング言語を解説。Python、C、C++、Javaなどの注目度や、インデックスの活用方法も紹介します。
解構人
解構人
1ヶ月前
【2025年6月最新版】TIOBEインデックスで見る人気プログラミング言語ランキングとは?
フッターのJavaScriptは画像読み込みに影響する?ブラウザの読み込み順と最適化の基本
はじめに Webサイトの表示速度や操作感は、単にコンテンツの量や見た目だけでなく、ブラウザがリソースをどのように読み込むかによっても大きく左右されます。特にJavaScriptや画像の読み込み順序、そしてそれらがどのように相互作用しているか […]
解構人
解構人
27日前
フッターのJavaScriptは画像読み込みに影響する?ブラウザの読み込み順と最適化の基本