当サイト、ひっそりとリニューアルしました。
リニューアルに際して、
『できるだけシンプルに』
『できるだけ軽く』
『できるだけ見やすく』
を信条にデザインしたのですが、テキストばかりになってしまうと、ただの味気ないサイトになってしまいます。
そこで、利用したのが “WebSymbolsRegular” というWebフォント。なんとこれ、英数字がそれぞれ汎用性の高いアイコン画像になっています。
このWebフォントを使うことにより、当サイトは画像を一切使わずに作りました。
※WordPress のテーマとして画像を一切使っていないという意味です。各記事では画像を使っています。
『習うより慣れろ』ということで、まずは使ってみましょう。
Webフォントをダウンロード
以下ページよりフォントをダウンロードします。
http://www.justbenicestudio.com/studio/websymbols/
Webフォントを読み込む
“url”は、ダウンロードしたWebフォントのパスに指定してください。
@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フォントを指定します。こんな感じ↓。
#site_title:before{ font-family: 'WebSymbolsRegular'; content:'S'; }
[:before] について
このサイトでは、主に :before を使って、指定しています。
理由としては、
●HTMLに直接書いてしまうとSEO的に良くない
(見た目はアイコンでもHTML上は、”S”とか”:”になっているので)
●フォント指定しやすい
(
の全体フォント指定してしまうと、他の文字もアイコンに変換されてしまう) まとめ
全体をまとめると以下のようになります。
アイコンの種類
アイコンの種類は、こちらを参照してください。
もちろん色も指定できる(css の color )ので、色々な場面で使えると思います。