2010年9月28日火曜日

「デコもじ」導入実験!

スポンサーリンク

「デコもじ」を試してみます。

お手軽に日本語WEBフォント(WebFont)を導入できるサービス「デコもじ」。
皆さんのブラウザ環境ではどうでしょう?

うまく見えていれば良いのですが。



「デコもじ」


「デコもじ」はシーサー株式会社(Seesaa Inc.)が運営するサービスです。

海外の言語では利用しやすいWEBフォントを、日本語でも使えるように出来る優れものです。

詳細は下記のリンク先にある「デコもじ」のサイトでご確認ください。


なお、今回は無料で使えるフォントを選んでいます。
有料であればもっと代表的で有用なフォントが使えます。

導入方法


導入方法は、ますデコ文字のサイトで会員登録します。
下記のOpenIDが使えるので簡単に登録できます。

  • twitter
  • mixi
  • livedoor
  • はてな
  • Seesaa
  • Google
  • Yahoo! jaopan

対応OSとブラウザは以下の通り。

  • OS:Windows(XP, Vista, 7)/Mac OS X(10.4 以降)/iPad
  • ブラウザ:IE6~/Firefox3.6~/Safari4.0~/Chrome4.0~

今更ですが、iPadでもいけるんですね...。

実際にブログに組み込む方法はサポートページにそれぞれ乗っていますので、ご確認ください。


Bloggerに導入する

じつは、サポートにはBloggerの事は書かれていません。
探しきれていないのかもしれませんが...。

基本的にはJavascriptを埋め込めばいいようです。

Javascriptの埋め込み


Javascriptの埋め込み場所はどこでも良いようなので、この点はあまり悩まずとも問題ありあません。

このブログでは、ダッシュボードから行ける「ページ要素」のところで追加しています。
もちろん選ぶのは「HTML/JavaScript」のガジェット。
とても簡単です。

反映方法


「デコもじ」でフォント選んだ後、反映させる為のシステムが「デコもじ」サイト内にあるので、そこを使います。
方法は簡単でタグやクラスを指定するだけです。

私はこの方法を試していませんが、反映に時間がかかるようです。

今回は記事単位での導入なので、別の方法をとりました。

最初から「デコもじ」側で設定されているクラス名をHTMLタグに追加する方法です。
具体的には<div>で記事本体をくくり、そこにクラスを設定しました。

かなり無理矢理な方法ですが...。
今回の実験的な導入なので、一時的に全体に反映させて消すよりも1記事に対してずっと適用していた方が意義があると考えたからです。
「デコもじ」のフリーフォントに、本文に対して使えるフォントが無いからだと言うのも理由の1つですが。

この方法であれば記事ごとにフォントを変えることも出来ます。
...変える事が良いかどうかは別にして。

結び


どうでしょう?

この記事はちゃんWEBフォントが適用されて表示されているでしょうか?
他の記事に比べて表示速度はおそくないでしょうか?

このブログにはいろいろ突っ込んでいるのでもともと表示が重くなっています。
他のブログさんとは比較するよりは、他の記事と比較して頂いた方がわかりやすいかもしれません。

しかし、このfont-familyを設定した本文はさすがに読みにくいですね。

スポンサーリンク

0 件のコメント :

コメントを投稿