Hatena::ブログ(Diary)

ミショニポー このページをアンテナに追加 RSSフィード

Feedback

Menu Tags

2014-12-18

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

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/tenman/20141218/p1
TOP
keywordcloud
人力検索はてな はてなアンテナ はてなブックマーク はてなダイアリー はてなフォトライフ はてなグループ はてなグラフ はてなアイデア はてなスター はてなメッセージ はてなワールド はてなハイク Rimo
ページビュー
1095782

サービス

メモや備忘

ナンダーリン カンダリーン

カレンダー
<< 2014/12 >>
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
プロフィール

最近のコメント

砂場