JavaScriptで現在の年を自動更新!フッターの著作権表示を常に最新に保つ方法
Webサイトのフッターに表示される現在の年を自動的に更新することは、実装としては非常に簡単です。しかし残念ながら、多くのサイト運営者は現在の年を表示することの重要性を理解していません。著作権表示としての役割だけでなく、訪問者に対して「このサイトは最新の状態が保たれている」という印象を与えるためにも、年表記は重要な要素です。
古いWebサイトの多く、そして一部のモダンなサイトでも、フッターのHTMLは次のように記述されています。
<span>© 2018 Company Name</span>
- © 記号による著作権表示
- 現在の年
- 会社名
このような静的なタイムスタンプ方式では、サイト運営者は毎年手動で表示される年を編集し直さなければなりません。これは非常に非効率です。
さらに、すべてのWebサイトがフッター情報を簡単に編集できる使いやすい管理画面(ダッシュボード)を備えているわけではありません。そのため、サイト運営者は自分でHTMLファイルを編集するか、外部の業者や担当者に依頼して修正してもらう必要があります。
これは時間とリソースの大きな無駄です。
古い年表記はブランドイメージを損なう
残念ながら、現在の年が表示されていないと、実際には最新の状態でもWebサイト全体が古びて見えてしまいます。今日あるWebサイトを訪れたとき、そこに「2015年」という表記があったら、あなたはどう思うでしょうか?
そうです。「このサイトはまだ運営されているのだろうか?」と不安や疑問を抱いてしまうのです。
この記事を読み終える頃には、自分のサイトでもクライアントのサイトでも、この問題について二度と悩む必要がなくなります。
JavaScriptのgetFullYear()メソッドで現在の年を表示する
先ほどのHTMLで見た静的なタイムスタンプの代わりに、JavaScriptの標準日付メソッドである getFullYear() をフッターに組み込んで、動的に表示してみましょう。
まず、以下のコードをブラウザの開発者コンソール(またはコンソール付きのテキストエディタ)に入力して、動作を確認します。
document.write(new Date().getFullYear());
Enterキーを押すと、ブラウザウィンドウの左上に現在の年が表示されます。
CodePenのサンプルでもコードの動作を確認できます。コンソールウィンドウをご覧ください。
正しく動作することが確認できたら、先ほどの getFullYear() のコードを、最初に紹介したフッターのHTMLの中に組み込みます。
<span>
©<script>document.write(new Date().getFullYear());</script> Company Name
</span>
結果は次のようになります。
おめでとうございます!これで年表記を毎年手動で更新する必要はありません。以降はJavaScriptが自動的に処理してくれます。
設立年と現在の年を両方表示する
場合によっては、現在の年と会社の登録年(設立年)の両方を表示したいこともあります。これは著作権の主張を強調するためによく使われる表記方法です。ご安心ください。開始年を2016年にしたい場合は、上記のコードに 2016- を追加するだけで実現できます。
<span>
© 2016-<script>document.write(new Date().getFullYear());</script> Company
Name
</span>
このように表示すると、「© 2016-2025 Company Name」のように、設立年から現在まで継続して事業を行っていることがひと目で伝わります。
補足:より現代的で安全な書き方
document.write() は手軽ですが、ページの読み込み完了後に実行するとドキュメント全体が上書きされてしまう危険があるため、現在では非推奨とされています。より安全な方法としては、textContent を使うのがおすすめです。
<span>© <span id="year"></span> Company Name</span>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
どちらの方法を選んでも、フッターの年表記は自動的に最新の状態へと更新され続けます。数行のコードで実現できるので、まだ静的な年表記を使っているサイトをお持ちの方は、ぜひ今すぐ導入してみてください。
-
JavaScriptでテキストを切り替える(トグルする)方法を解説
JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える(トグルする)処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>
-
JavaScriptでクリックした要素にアクティブクラスを追加する方法
Webページのボタンやタブメニューなどでは、現在選択されている要素を視覚的に強調表示したいケースがよくあります。JavaScriptを使えば、クリックされた要素に「active」クラスを動的に追加し、それまでアクティブだった要素からクラスを外すことで、この処理を簡単に実装できます。実装のポイント基本的な流れは以下のとおりです。querySelectorAll() ですべてのボタン要素を取得する各ボタンに addEventListener() でクリックイベントを登録するクリック時に、既存の「active」クラスを持つ要素からクラスを削除するクリックされた要素に「active」クラスを追加するサ