MS Access Tips/Sample and VBA and Blog customize etc...

ブログのタイトルを Web Fonts と CSS3 で遊んでみた

前回の記事で、jQuery1.6.1 を導入したのですが、それに伴って、相性が悪いドロップシャドウプラグインを外しました。その結果、タイトルがちょっと、寂しい感じになってしまったので、なんとかしたいなぁ~、、

寂しいブログタイトル

で、フォントを凝ったものにしたいと思ったのだが、通常は、ユーザーの環境に影響されるので選択肢は少ない。しかし、Google Web Fonts API を利用すると凝ったフォントをユーザー環境に影響されずに使うことができるらしい。

さらに CSS3 には text-shadow で簡単にドロップシャドウを付けることができるらしい。

で、それらで、遊んでみたレポートです。。

難易度:

Google Web Fonts API で遊ぶ

Google Web Fonts

上記のページからお好みのフォントをクリックして開いたページの Use this font というリンクをクリックするとHTMLタグとCSSコードが表示されるので、それをコピーしてそれぞれHTMLの<head>内、CSS内に貼り付けるだけです。

CSSのセレクタは適用したいものに変更する必用がありますが、当方のブログのタイトルの属性は h1 なのでそのままでOKでした。

Paytone One というフォントが気に入ったのでそれにしました。色を付けて、下記のコードになりました。

html

CSS

フォントのファイルサイズもページの説明によると24kbぐらいで軽いものです。

しかし、今回のようにタイトルだけに使用する場合は、使う文字種は10字ぐらいなのに全部の文字セットをダウンロードするのも無駄だとちょっと思いますよね。で、下記のページを見つけました。

Google Font APIでフォントのファイルサイズを大幅に削減する方法

すべての文字セットをダウンロードするのではなく、指定した文字のみをダウンロードすることができるそうです。方法は実に簡単で、HTMLで指定したフォントのURLに「&text=フォントを適用したい文字」というオプションを追加するだけです。

注意が必要なのは、空白を使っている場合は、それを含めておかないと文字化けします。PCから見れば、空白も文字の一種ですので当然ですね。

html

IE9でのキャプチャ
WebFontAPIを適用したタイトル

Google Web Fonts は IE6以降、FireFox, Chrome, Opera, Safari と主要プラウザはすべて対応しているというのはうれしいですね。

CSS3 でさらに遊ぶ

CSS3 を使うとさらにいろいろ装飾ができます。が、残念ながら、IEはまだ対応してないのでそれ以外のモダンプラウザのみになります。

当初のjQieryドロップシャドウで表現していた光っているようなイメージを、CSS3 の text-shadow を使って再現してみました。

CSS

text-shadowを3重に重ねて、だんだんぼかしを増やしてくという方法です。

FireFoxでのキャプチャ
text-shadowを適用したタイトル

マウスホパー時の効果でも、単に色を変えるだけでなくもう少し遊んでみました。マウスが来ると光がもう少し広がるようにしてみました。さらに、CSS3の transition を使って、少しずつ変化するようにしてみました。

CSS

transitionの指定項目は、前から、適用するプロパティ、変化にかかる時間、変化の仕方、変化が始まる時間 です。

また、-webkit- -moz- -o- などのプラウザを指定するプレフィックスを付ける必用があります。

CSS

なら、すべてのプロパティに、0.6秒掛けて、一定の速度で変化させるということになります。

参考にしたページでは上記の記述になっていたのですが、なぜかFireFoxでは、まとめて設定するとアニメーションしてくれませんでした。そこで、別々に設定する記述に変更したらアニメーションするようになりました。

CSS

また、Opera は、色はアニメーションで変化しましたが、text-shadow はアニメーションせずにすぐに変化しました。おもしろいことに、FireFox, Chrome, Opera, Safari で変化前と変化後はどのプラウザでも差はほとんどないのですが、変化の途中経過が微妙に違います。同じ webkitペースのchromeとSafariでも違います。FireFoxが一番自然でスムーズな印象です。

transitionを適用したタイトル

この辺は、プラウザによって対応具合が異なっていたり、プラウザ毎に何度も同じ記述しなければならないなど、まだまだ未整備という感じですね。

transition: all 0.6s linear 0; の1行の記述で、どのプラウザでも同じ結果が得られるのはいつなるのでしょうか。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/306-8c1be23d
該当の記事は見つかりませんでした。