トップ > 日記 > WordPress Theme Raindrops 1.263

WordPress Theme Raindrops 1.263

日記

先ほど、Raindrops テーマ1.263を、テーマレビューに提出しました。



今回の変更は、Google Fonts のサポートです。



一般的には、

<html>
  <head>
    type="text/css" href="">http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

のように、スタイルシートをリンクする事で、フォントが適用できる仕組みです。



このフォント群は、現時点で680個ぐらいあります。



いわゆるWEBフォントは、Googleだけがやっているわけではなく、Web font hosting services - An Overview等で紹介されているメジャーなものだけでも、たくさんのサービスがあります。



一昔前だと、このようなフォントは英文専用で、「　日本語環境では　使いどころに困る　」という印象でしたが、






などで紹介されているような、日本語環境でも利用できるフォントも利用できるようになってきていて、どのような形でテーマに実装していったらいいのかと、だいぶ長い間考え込んでいました。


http://www.google.com/fonts/earlyaccess

試験的に、日本語フォントファイルが使えるようです。




Raindropsの今回のアップデートでは、対応していません





google fonts　を　使えるテーマは、比較的多いのですが、



投稿タイトルには、○○フォントを使って、フォントサイズは○○pxで、という感じで管理画面で選択するスタイルが主流で、ユーザーが、投稿本文の中で自由に指定するという事が出来るようなテーマには出会っていませんでした。





今回、Raindropsテーマに実装したのは、投稿本文のhtmlに classを記述するだけで、その部分にグーグルフォントが適用されるというものです。





グーグルフォントの中の92%ぐらいのフォントは、クラスを記述する事で　後は自動的に、スタイルを適用出来るだろうと考えています。




実際の記述は、


<h2 class="google-font-oswald font-effect-brick-sign">Font Family Oswald and Effect</h2>

google-font- というプレフィックスをつけて、フォント名を小文字にすれば、OKです（スペースを含むものは　- に置き換える必要があります。）



スペースを含むものは、スペースが一つまでしか対応していません。（　なので、92%なのです。）




font-effect- にも対応しています。


<h2 class="google-font-lato700i">Font Family Lato Font Weight 700</h2>


フォントウェイトの指定や、italicの指定も、OKです。




面白いから、どんどん追加すると、サイトのパフォーマンスに影響が出ると思いますが、そのあたりは、自己責任になります。




xhtmlのメディアタイプも、変更できるようにしました。デフォルトでは、text/htmlですが、'application/xhtml+xml'でも、運用できるようにしました。

詳細は、changelog.txtを見てください



DEMO






Note Sans みやすいフォントですね。





このような機能が、ユーザーに浸透するのか、また機能追加にさえ気づいてもらえないのかもしれませんが、フォントがWEBの表現の中で重要な位置を占めているのは事実です。





はたして、レビュー審査に合格できれば、新しいタイプの、グーグルフォントをサポートしたテーマが産声を上げます。




Download from Github

TOP