Webフォントを利用した、画像を使わないWebサイトの作り方

calendar

reload

Webフォントを利用した、画像を使わないWebサイトの作り方

当サイト、ひっそりとリニューアルしました。
リニューアルに際して、
『できるだけシンプルに』
『できるだけ軽く』
『できるだけ見やすく』

を信条にデザインしたのですが、テキストばかりになってしまうと、ただの味気ないサイトになってしまいます。
そこで、利用したのが “WebSymbolsRegular” というWebフォント。なんとこれ、英数字がそれぞれ汎用性の高いアイコン画像になっています。
このWebフォントを使うことにより、当サイトは画像を一切使わずに作りました。
※WordPress のテーマとして画像を一切使っていないという意味です。各記事では画像を使っています。
『習うより慣れろ』ということで、まずは使ってみましょう。

Webフォントをダウンロード

以下ページよりフォントをダウンロードします。
http://www.justbenicestudio.com/studio/websymbols/

Webフォントを読み込む

“url”は、ダウンロードしたWebフォントのパスに指定してください。

Webフォントを指定する

Webフォントを指定します。こんな感じ↓。

[:before] について

このサイトでは、主に :before を使って、指定しています。
理由としては、
●HTMLに直接書いてしまうとSEO的に良くない
 (見た目はアイコンでもHTML上は、”S”とか”:”になっているので)
●フォント指定しやすい
 (

の全体フォント指定してしまうと、他の文字もアイコンに変換されてしまう)

まとめ

全体をまとめると以下のようになります。

アイコンの種類

アイコンの種類は、こちらを参照してください。
ph
もちろん色も指定できる(css の color )ので、色々な場面で使えると思います。