あと味

たくさん情報を食べて、たくさん発信すると、あとになって味わい深い。

Google Font API でWebサイトのCopyrightを書く

JavaScript

という記事を読んで、copyrightくらいだったら画像用意しなくても別に良い気がしたし、最近発表されたGoogle Font APIで少し見た目を整えるだけで十分実用的かなと思ったのでエントリーに起こしてみました。

Google Font APIとは？

19日のGoogleI/Oにて発表された、APIで、Google Font API で提供するフォントであれば、インストールしていなくてもブラウザで表示できるようになる優れものです。

使い方が超簡単なので、今日からでもJavaScriptが書けないデザイナさんが使い始めることもできるので、結構イケてるツールなんじゃないかなと思います。

Google Font APIの使い方

font Directoryで使いたいフォントをクリックして、「Get the Code」タブをクリックすると、link要素とcssのサンプルが表示されます。

link要素をhead要素に組み込んで、後はcssのfont-familyで指定されたキーワードを入れるだけです。font-sizeはもちろん、font-weightとかtext-decorationとかも有効みたいです。

超簡単ですね。

Copyrightのサンプル

こんな感じです。

<!doctype>
<html>
<head>
  <meta charset="utf-8">
  <title>Google Font Test</title>
  <link href="http://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
  <style type="text/css">
    #copyright {
      font-family: 'Crimson Text';
      font-size: 14px;
      font-style: normal;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- ここにいろいろコンテンツがあると仮定 -->
  <address id="copyright">Copyright&nbsp;&copy;&nbsp;taiju</address>
  <script type="text/javascript">
    (function() {
      var copyright = document.getElementById('copyright');
      copyright.innerHTML = 'Copyright&nbsp;' + (new Date()).getFullYear() + '&nbsp;&copy;&nbsp;taiju';
    })();
  </script>
</body>
</html>

HTML上には年を除いたcopyrightの記述を書いておいて、JavaScriptで年が含まれたcopyrightに置換します。JavaScriptが有効でなければ、最初に書いてあった年を除いたcopyrightの記述が表示されるだけです。

こう書いておけば、年数の部分を毎年アップデートする必要がありません。

copyright部分に、アンチエイリアスの効いたテキストを使いたいだけなら、Google Font APIで書くようにしてもいいんじゃないかなと思います。

ただ、デザインの中で使用するフォントのポリシーとかがあるといろいろ面倒かもしれませんね。