当サイト、ひっそりとリニューアルしました。
リニューアルに際して、
『できるだけシンプルに』
『できるだけ軽く』
『できるだけ見やすく』
を信条にデザインしたのですが、テキストばかりになってしまうと、ただの味気ないサイトになってしまいます。
そこで、利用したのが “WebSymbolsRegular” というWebフォント。なんとこれ、英数字がそれぞれ汎用性の高いアイコン画像になっています。
このWebフォントを使うことにより、当サイトは画像を一切使わずに作りました。
※WordPress のテーマとして画像を一切使っていないという意味です。各記事では画像を使っています。
『習うより慣れろ』ということで、まずは使ってみましょう。
Webフォントをダウンロード
以下ページよりフォントをダウンロードします。
http://www.justbenicestudio.com/studio/websymbols/
Webフォントを読み込む
“url”は、ダウンロードしたWebフォントのパスに指定してください。
|
1 2 3 4 5 6 7 8 9 10 |
@font-face{ font-family: 'WebSymbolsRegular'; src: url('/fonts/websymbols-regular-webfont.eot'); src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/websymbols-regular-webfont.woff') format('woff'), url('/fonts/websymbols-regular-webfont.ttf') format('truetype'), url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); } |
Webフォントを指定する
Webフォントを指定します。こんな感じ↓。
|
1 2 3 4 5 6 |
#site_title:before{ font-family: 'WebSymbolsRegular'; content:'S'; } |
[:before] について
このサイトでは、主に :before を使って、指定しています。
理由としては、
●HTMLに直接書いてしまうとSEO的に良くない
（見た目はアイコンでもHTML上は、”S”とか”:”になっているので）
●フォント指定しやすい
（
の全体フォント指定してしまうと、他の文字もアイコンに変換されてしまう）
まとめ
全体をまとめると以下のようになります。
|
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 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> @font-face{ font-family: 'WebSymbolsRegular'; src: url('/fonts/websymbols-regular-webfont.eot'); src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/websymbols-regular-webfont.woff') format('woff'), url('/fonts/websymbols-regular-webfont.ttf') format('truetype'), url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); } #site_title:before{ font-family: 'WebSymbolsRegular'; content:'S'; } </style> </head> <body> <div id="site_title"><a href="http://biboroku.watanabehiroki.net">Webデザイナーの備忘録</a></div> </body> </html> |
アイコンの種類
アイコンの種類は、こちらを参照してください。
もちろん色も指定できる（css の color ）ので、色々な場面で使えると思います。