さあ、フォントの数をかぞえろ！
ささやかですが、KAYAC DESIGNER'S BLOGがリニューアルしました。
せっかくのリニューアルなので、どうせなら遊んでみようと思いまして、
表示するたびにフォントが変わる仕掛けを盛り込んでみました。
このページをリロードしてみてください。
ロゴやナビゲーションのフォントが変わってると思います。
ということで、今回はその解説をしたいと思います。続きからどうぞ！
Google Font API
今回はGoogle Font APIを使って外部フォントを読み込んでいます。
使い方
使いたいフォントを選びます。
詳細画面でいろいろチェックできて便利ですね。
使いたいフォントが見つかったら「Get the code」をクリックしましょう。
この画面に書いてあるCSSを設定すればフォントが適用されます。
簡単すぎてびっくりしますね。
フォントをランダムで変更する
要するにランダムでスタイルを一つ選ぶ、という処理ができれば良いので
phpをインクルードする形で実現してみました。
あ、ぼくはプログラマー的な素養はまったくないので、温かい目で見ていただけたらと思いますヾ(*´∀｀*)ﾉ
なんとなくphpファイルを作ってみました。
<?php
$flag = mt_rand(1, 10);
switch ($flag) {
case 1:
echo "
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold'>
<style type='text/css'>
.googleFont{ font-family: 'Droid Sans', sans-serif; }
</style>";
break;
case 2:
echo "
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Josefin Sans Std Light', sans-serif; }
</style>";
break;
case 3:
echo "
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Molengo', sans-serif; }
</style>";
break;
case 4:
echo "
<link href=' http://fonts.googleapis.com/css?family=Vollkorn:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Vollkorn', sans-serif; }
#siteHeader h1 .googleFont{ font-weight: normal; }
</style>";
break;
case 5:
echo "
<link href=' http://fonts.googleapis.com/css?family=Old+Standard+TT:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Old Standard TT', sans-serif; }
#siteHeader h1 .googleFont{ font-weight: normal; }
</style>";
break;
case 6:
echo "
<link href=' http://fonts.googleapis.com/css?family=Cantarell:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Cantarell', sans-serif; }
</style>";
break;
case 7:
echo "
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Crimson Text', sans-serif; }
</style>";
break;
case 8:
echo "
<link href=' http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Droid Serif', sans-serif; }
</style>";
break;
case 9:
echo "
<link href=' http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Tangerine', sans-serif; }
</style>";
break;
case 10:
echo "
<link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style type='text/css'>
.googleFont{ font-family: 'Yanone Kaffeesatz', sans-serif; }
</style>";
break;
}
?>
ランダムで1から10からひとつ選んでそれを出力するっていう、ただそれだけのphpファイルです。
これをhtmlのヘッダ部分にインクルードしています。
ちなみにインクルードの書き方はこんな感じ。
<!-- [ font ] --> <?php include($_SERVER['DOCUMENT_ROOT'].'/stylesheet/font.php');?> <!-- /[ font ] -->
適用したい箇所にclassを付けて完成！
今回は「.googleFont」という名前にしたので適用したい箇所にclassを付けていきます。
ロゴやナビゲーション周りに適用してみました。
ということで、まとめです。
- Google Font APIで使いたいフォントを選ぶ
- ランダムで表示するためのphpファイルを作ってインクルードする
- 適用したい箇所にclassをつける
そんなに難しくないので、ぜひぜひ試してみてくださいね！
（どんな時に使えるのかわかんないけど！笑）
おしらせっ
カヤックではフォント萌えなデザイナー＆コーダー大募集中です！
タレコミ情報も募集中です.｡ﾟ+.(・∀・)ﾟ+.ﾟ
「イケメンですね」「好きです」「一人くらいなら養えるけど？」等なんでもどうぞ！