In My Circle

せんがんが、よしなしごとをつづります。

Webフォント

Webフォントサービスで有名な「フォントプラス」を運営するソフトバンク・テクノロジーさんのご厚意で、勉強会を開いていただきました。いつもお世話になっているフリーのデザイナーさん2名と、一緒に書籍を書かせていただいた秋葉さん&奥さまのちひろさんと参加!

「Webフォント」については各自調べていただくとして、私はWebフォントの普及を心待ちにしているひとりです。

これまで、ボタンのラベルや文章の見出しなどは画像を使って表現されることがほとんどでした。
CSS3のおかげで、最近では画像に頼らずにボタンなどのビジュアルを効果的に表現できるようになってきました。が、CSS3でどんなに美しいグラデーションを表現したとしても、上に乗っている文字(フォント)がカッコ悪いと台無し、というケースは多々ありそうです。
Webフォントを利用すれば、画像を一切使わずに、洗練されたビジュアルのボタンや見出しを作ることが可能になります。画期的です!

以前より、このサイトのフッタの中の「Please do not reproduce without prior permission.」の文字はGoogle Web fontsを利用して表示していました。見慣れないフォントなので画像のように見えるかもしれませんが、ドラッグすると選択できるので「文字」ということが確認できると思います。

で、せっかく勉強会を開いていただいたので、このたびフッタだけでなく見出しもWebフォントで表示するよう変更してみました。もちろん「フォントプラス」さんのフォントを使って!
このページの上部にあるブログタイトル「In My Circle」や、この記事のタイトル「Webフォント」をよーく見てみてください。
いかがでしょう?テキストとは思えませんよね。おもしろい!

このページを開いたときに、「In My Circle」や「Webフォント」の文字がいったんデバイスフォントで表示され、その後一瞬文字が消えてからWebフォントで表示されることに気づいた方がいらっしゃるかもしれません。
これは「ちらつき」と言われる現象ですが、ちょっと気になりますよね。Webフォントの課題のひとつだそうです。

あともうひとつ、実際に利用して気になったのは、ブラウザによって行内の文字位置(垂直方向)がまちまちになることです。
この画像をご覧ください。


左はIE9+Win7、右はGoogle Chrome+Win7です。フォントの指定をしない状態だと、このように表示されます。

次に 、Webフォントのを指定した状態です。上と同じく、左がIE9+Win7、右がGoogle Chrome+Win7です。

IE9での表示結果で、テキストがずいぶん上の方に寄ったように見えます。Google Chromeでは少々下の方に寄りました。line-heightなどそれらしいプロパティを設定しても調整できませんでした。ちなみに、左側のアイコンは背景画像として表示しており、「background-position:left top」を指定しています。

フォントプラスのサイトで紹介されている事例を拝見しても、同じ現象が起こっているようです。これはどうしたものか…。

このように、Webフォントにはまだいくつかの課題が残っています。
でも、私は恩恵の方がはるかに大きいと考えているので、無理のない範囲で積極的に使っていくつもりです!早くふつうに利用できるようになるといいなあ。

追記(2013年5月8日):上記の問題、解決したようです。スクリプトの再発行→埋め込みの手間はかかりますが、私の環境ではバッチリ直りました。FONT PLUSさん、ありがとうございます!
http://webfont.fontplus.jp/news/view/Q5Ds4~116Hc%3D

カテゴリ:In My Circle, 作った, 参加した Posted by 千貫りこ on 2012年7月24日

リニューアルしました!

地味にバージョンアップしていたとはいえ、2007年からほとんど形を変えていなかったこのサイトをとうとうリニューアルしました。

今回のテーマは…

  • 名刺にあわせたデザインにする
  • 更新しやすくする(CMSで管理する)

で、チャレンジ項目は

  • HTML5とCSS3
  • jQuery
  • WordPress

でした。
デザインは昨秋にできあがっていたのですが、その後あわただしくなってしまってコーディングに手をつけられず。今年に入ってようやく少しずつ時間をつくることができてきたので、ちまちまと進めました。

チャレンジ項目をふりかえると…。HTML5、ちょっとアヤシイです。header,nav,article,section,footer要素を使ったくらいですが、やや混乱しております(笑)。CSS3は、現状で書けるのはこんなもんかなと。ツッコミ大歓迎です。

あ、フッタのコピーライト文言の表示にWebフォント使ってみました。楽しい。
ただ、「お問い合わせ」ページだけはデバイスフォントにしてます。鍵アイコンが表示されなくなってしまうので。ちぇ。

jQeuryは、他のチャレンジ項目にくらべるとすでになじみ深いので、比較的楽しく実装できました。トップページのメインイメージと「Information」の画像出力をWordpressと絡めるのがちょっと難しかったかな。
「Information」はjCarousel Liteというプラグインを利用しました。画像にカーソルを乗せると文言(liのtitle属性値)を表示するスクリプトは自分でせこせこ書いたので、見る人が見たらヘンかも。ヘンだったら教えてください!

ハッキリ言って、全体的に途中段階です。WordpressをちゃんとCMS的に使うのはほとんど初めてのことで、つくり方とかめちゃくちゃな気がしま す…。プラグインはできるだけ使いたくなかったので、地味に条件分岐を書いたりもしましたが、テンプレートのソースは見せられませんよ(キリッ)!

やむを得ず利用したプラグインは

  • WP Multibyte Patch
  • WP No Category Base
  • Google XML Sitemaps

「WP Multibyte Patch」は本家が配布しているプラグイン。マルチバイト文字の取り扱いに関するWordpressのバグを修正するためのもの。「WP No Category Base」はカテゴリページのURLをシンプルにしてくれるプラグインです。
最後の「Google XML Sitemaps」はsitemap.xmlを作成してくれるプラグインですが、設定にコツがありました。hetemlでは、出力する場所の設定を「自動検出」にしてるとダメです。このエラーが出ちゃいました。

There was a problem writing your sitemap file. Make sure the file exists and is writable. Learn more
There was a problem writing your zipped sitemap file. Make sure the file exists and is writable.

hetemlユーザーは「手動配置」にして、「/home/sites/heteml/users/」ではじまるパスを書く必要があります。パスはhetemlの管理画面で確認できます。

未完成項目の中でも特に目立つのは、非JS環境対応、ブログのコメント欄をつけられていないこと、そもそもブログのエントリーが少なすぎること。
問題点は色々ありますが、これからチビチビやっていこうと思います!

カテゴリ:In My Circle, 作った Posted by 千貫りこ on 2011年2月3日