更新日: 2024 / 11 / 15

HTMLでコピーライトを書く方法と年代の自動更新方法

カテゴリー: HTML&CSS 入門ガイド

作成したWebサイトにHTMLで書く方法と2024などの年代を自動更新する方法を解説します。

Webサイトに必ず表示されているコピーライト。仕事柄たくさんのサイトを見ているのですが、たまに表記方法が間違っていたり年度が数年前で止まっていたりするのをよく見ます。

このようなミスは簡単に修正できるのでコピペできるソースコードと合わせて紹介します。

Webサイトに表示するコピーライトとは？

そもそもWebサイトにコピーライトを何故表示するのか、なんの意味があるのかなどをまとめておきます。

Webサイトに表示するコピーライトは、サイトの画像やブログ記事などのオリジナルコンテンツが著作権によって保護されていることを示す目的で表示されます。

コピーライトを表示することで、Webサイト内にあるコンテンツを無断で複製や再配布することが違法であることを表明しています。

次にコピーライトの書き方についてまとめてみます。

HTMLを使ったコピーライトの書き方まとめ

Webサイトで表示されるコピーライトのパターンはいろいろあります。ここではHTMLでコピーライトを書く方法とそのパターンを集めてみました。

一般的なサイトでのコピーライトの書き方

一般的には次のような表示になります。

© 著作権の発効年-現在の年 著作者または権利所有者の名前（または企業名）

実際にHTMLで書くと次のように書きます。

<p>&copy; 2019-2024 Webデザイン株式会社</p>

&copy; はコピーライトを示す特殊文字で、表示は©️のようになります。実際のWebサイトの場合は例えばLINE株式会社の場合次のようになっています。

もっとシンプルに現在の年だけを書く場合もあります。

<p>&copy; 2024 Webデザイン株式会社</p>

以前よく使っていたAll Rights Reserved.というのはあってもなくてもどちらでも良いようです。付け足す場合は次のようになります。

<p>&copy; 2024 Webデザイン株式会社 All Rights Reserved.</p>

書き方は色々ありますが、シンプルに年と社名だけで問題ありません。

個人サイトの場合のコピーライトの書き方

個人サイトでも画像などのコンテンツは著作権保護の対象になるのでしっかりコピーライト表記をしておきましょう。

個人サイトの場合も会社の場合も下記方に違いはありません。個人サイトの場合はWebサイトのドメイン名を入れたり、サイトの名前を入れます。

<p>&copy; 2024 ブログ名</p>

<p>&copy; 2024 my-blog.com</p>

HTMLタグを使ったコピーライトのソースコードと表示位置

HTMLタグを使って書く場合方法を紹介します。通常コピーライトはフッターの位置に配置します。

ナビゲーションメニューなどのないシンプルなフッターの場合は次のようになります。

<footer>
  <p>&copy; 2019-2023 Webデザイン株式会社</p>
</footer>

HTMLタグを使ったコピーライトのソースコードと表示位置

見ればわかるようにとくにデザインをこだわったり強調したりする部分ではないので、シンプルに「小さなテキストをホームページの一番下に入れる」と覚えておくと良いと思います。

smallタグで小さく表示する方法

コピーライトを小さく表示したい場合はHTMLタグのsmallを使ったりCSSスタイルでフォントサイズを小さくします。

smallタグを使う場合は先ほどのソースコードに付け足すだけでOK。

<footer>
  <p><small>©️ 2019-2023 Webデザイン株式会社</small></p>
</footer>

smallタグで小さくならない場合は？

smallタグを入れても小さくならない場合は、可能性として次のようなことが考えられます。

  • CSSでテキストのサイズが指定されている
  • HTMLの不具合

CSSでテキストサイズが指定されている場合、smallを入れてもCSSで上書きされるので小さくなりません。

次の項目で紹介するCSSを使ったフォントサイズの指定を行ってみてください。

また、たまにHTMLタグの設置ミスもあるので正しく設置されているかを確認しておきましょう。

CSSでコピーライトを小さく表示する

CSSでフォントサイズを小さくする場合は、コピーライトのHTMLにセレクタを入れておいて、そのセレクタに対してCSSを指定します。

<footer>
  <p class="copy">&copy; 2019-2023 Webデザイン株式会社</p>
</footer>

CSSコードはこちらのようになります。Webサイトで読み込んでいるCSSファイル(style.cssなど)に追記します。

.copy {
  font-size: 10px;
}

フォントサイズは10pxが最小なので一番小さいサイズやそれに近いサイズを指定しておきます。

コピーライトの年数を自動的に更新する方法

古いWebサイトで更新が止まっているようなサイトだと、コピーライトの年数が以前のままになっていることがあります。

これはHTMLとCSSでは解決しません。コピーライトの年数を自動的に更新するには、JavascriptやPHPなどのプログラミング言語を使用します。

Javascirptを使う場合は次のようなソースコードになります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <footer>
    &copy; <span id="copyright-year"></span> Webデザイン株式会社
  </footer>
  <script src="main.js"></script>
</body>
</html>
// main.js
document.addEventListener("DOMContentLoaded", function() {
  // 現在の年を取得
  const currentYear = new Date().getFullYear();
  // idでHTMLのタグを取得
  const copyrightElement = document.getElementById("copyright-year");

  if (copyrightElement) {
    // 指定したidの場所に現在の年を書き込み
    copyrightElement.textContent = currentYear;
  }
});

HTMLコードにあるcopyright-yearというidの場所に読み込んだJavascriptを使ってテキストを書き込んでいます。

このコードを設置しておけばサイトの更新自体は停止してもコピーライトの年数を自動的に更新し続けることができます。

まとめ

ここまでコピーライトの書き方を紹介しましたが、内容をまとめると次のようになります。

  • コピーライトは著作権の表記のこと
  • Webサイトのコンテンツが著作権によって保護されることを明記するために表示する
  • 書き方はシンプルに©️ 2023 Webデザイン株式会社のように書く
  • コピーライトはフッターに配置、smallタグで小さく表示可能
  • HTMLタグ以外にCSSでフォントサイズや配置を変更できる
  • Javascriptを使って年数を自動更新できる

コピーライトは一度書いておけば何度も修正するようなものではないのでJavascriptを使った自動更新が便利です。