フッター年月のお手軽自動取得化

1. まえおき
2. HTML
3. JavaScript
1. 3.1. プレーンな JavaScript でやるなら
2. 3.2. jQuery が使える環境なら
4. 余談

タイトルの通りの記事ですｗ
興味のある方はどうぞ。(以前からあるわりと有名な方法です)

まえおき

今日はホームページ制作の超小ネタです。

WEB サイトを見ていると、最下部にこんな表示をよく見かけないでしょうか？

Copyright(c) 2006 - 2019 MyWebSite

ホームページを作ったことのある方はご存知かとおもいますが、これは フッター と呼ばれるものです。

フッタ【 footer 】フッター - IT用語辞典 e-Words

フッタとは、文書の各ページの内部を役割やデザインで分割した領域の一つで、ページの下端部のこと。本文など主な内容以外の補助的な内容を記すために設けられるもので、具体的に何が記載されるかは文書の種類によって異なる。

Webページの場合には広告や運営者の情報、サイト内の別のコーナーやページへのリンクを並べたローカルナビゲーション、著作権表示などが記載されることが多い。

だそうです。

WordPress などの動的システムを使っていれば、2019 みたいな年の表記は、基本的にシステム側が自動的に現在の数値を出してくれるのであまり意識することはないのですが、以前の私のサイトのように Yahoo ジオシティーズの無料プランのような動的システムを使えないサイトの場合は、年が変わったら全部自分で更新する必要がありました。

今日はそれを JavaScript でどうにかする方法を書いてみます。冒頭にも書いたとおり、わりと有名な方法で特に珍しいものではないです。

HTML

例えばさきほどの例ならこんなふうにしておきます。

<p>Copyright(c) 2006 - <span id="year"></span> MyWebSite</p>

id の値は適当です。class でもできますが、id のほうがあとで作業が楽なので特に理由がなければ id をおすすめします。

JavaScript

こんな感じのスクリプトを書いておきます。すると、先ほどの <span id="year"></span> に現在の年が挿入されます。

プレーンな JavaScript でやるなら

(function(d){
  d.addEventListener("DOMContentLoaded", function(e){
    d.getElementById("year").innerHTML += new Date().getFullYear();
  });
})(document);

jQuery が使える環境なら

もし jQuery をサイトで使っているならもっと簡単に書けます。

$(function(){
  $("#year").text(new Date().getFullYear());
});

地味にこの作業だけで僕は毎年やってたフッターの年月更新がいらなくなったので大きかったです。

もしご存知なかった方は機会があればためしてみてはいかがでしょうか？

余談

ちなみに現在のウチのサイトでは以下のようなかんじで Hexo 先生が generate 時に動的に年を出してくれてます。上記の作業は Yahoo ジオシティーズ時代につかってました。

<span class="copyright">
  &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
  Modify from <a href="https://sanographix.github.io/tumblr/apollo/" target="_blank">Apollo</a> theme, designed by <a href="https://www.sanographix.net/" target="_blank">SANOGRAPHIX.NET</a><br>
  Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
</span>

ソース
hexo-theme-apollo/footer.ejs at master · Jpsern/hexo-theme-apollo

それでは〜