ジユウメモメモ

気になるガジェットや映画のはなしをメモメモ

Font Awesome

簡単!Webフォントを使ってブログをさりげなくリッチにしよう

HTMLとCSSの基礎を知っていれば難しくないWebフォント

 ネットでブログを見ていて「いいなー」と思っていたのがおしゃれなアイコン。あちこちで「アイコンフォント」なるものが流行っているらしいことは知っていて、「でも使うの難しいんでしょう?」なんて思ってたのだけど、いざ使ってみたら簡単だったので導入メモ。HTMLとCSSを自分で打てるくらいの知識があればすぐに導入できる。

いい感じのアイコンが揃ってるWebフォント「Font Awesome」を使う

ブログに導入したのは「Font Awesome」というWebフォント。シンプルなイラストアイコンが揃っていて、使っている人も多いので、情報量が多くて安心(アップデートも行われていて、どんどん新しいアイコンが追加されている)。

Font Awesome THE ICONIC FONT AND CSS TOOLKIT

Font Awesomeのオススメな点は、

  • シンプルでわかりやすいグラフィック
  • CDNから引っ張れてフォントをサーバーにアップロードする必要がない

といったところ。

まずはアイコンのデザインをチェック

 Font Awesomeに収録されているアイコンは、公式Webサイトの「Icons」ページで見ることができる。まずは使いたいデザインのアイコンがあるかチェックする。

Font AwesomeにはといったオフィスソフトやWebサービスでよく見かけるアイコンが充実しているほか、のような、ブログ記事のカテゴリやジャンルを表現するのに使えそうなアイコンも数多く用意されている。

License」ページを見ると、商用サイトにも使用可能とある(”ブランドアイコン”の権利はそのサービスのオーナーに有り、との記載有り。ライセンスは将来変わることもあるかもしれないので使用前にサイトをチェックしてください)。

Bootstrap CDNからcssファイルのリンクを入手する

 Font Awesomeにあるアイコンのデザインが気に入ったら、Bootstrap CDN(Font Awesomeのサイトのフッターにリンクがある)から、自分のサイトのheadタグに入れるコードをコピーする(下記のコードは記事作成時のものです。アップデートされているかもしれないのでコードを入手される際はオフィシャルのサイトを確認してください)。

WordPressの場合は、header.phpのheadタグ内にペーストして保存する。これだけでもうほぼ準備完了。

アイコンを表示したいところにiタグを挿入する

 Font Awesomeのアイコンフォントの呼び出し方は、全てfa fa-から始まるクラス名が与えられたi要素のタグを入力するだけ。例えば先ほどのこのアイコンは、

↑のようなコードになる。各アイコンのクラス名は、Font AwesomeのIconsページのアイコンのリンク先にiタグが表示されているのでそれをコピーアンドペーストすると簡単。

Font Awesomeを使ってWordPressをちょいリッチにする

 アイコンフォントを使ってやってみたかったのが次のこと。

  • メニューバーをわかりやすく
  • 順不同リスト表示の項目の先頭にチェックマークを表示
  • target=”_blank”指定したリンクの後ろにアイコンを表示
  • blockquote内のコンテンツの前後に引用符を表示

メニューバーのカテゴリ名の先頭にアイコンを表示させる

 メニューバーの項目の先頭にアイコンを追加するには、WordPressの管理画面の「外観」>「メニュー」を開いて、「メニュー構造」のメニュー項目の入力欄にある「ナビゲーションラベル」に、メニューの名前と一緒に先ほどのiタグをそのまま挿入する。

WordPressナビゲーションラベル

ナビゲーションラベルにメニューテキストと一緒にiタグを挿入する

リスト表示の項目の先頭にチェックマークアイコンを表示させる

 記事の文章などには都度iタグを入れればいいけれど、過去記事も含めて一括でアイコンを入れたいときがある。そんなときはCSSのcontentプロパティを使う。

アイコンを指定するcontent:の\後ろの文字は、Font AwesomeのIconページに記載されている「Unicode」の後ろの文字を入力する。

”別ウィンドウで開く”設定のリンクテキストの後ろにアイコンを表示させる

 target=”_blank”指定をしたリンクテキストの後ろにアイコンを表示させるのも、cssのcontentプロパティを利用する。

blockquoteタグの中のコンテンツの前後に引用符を表示させる

 記事中の引用テキストの前後に引用符(ダブルクォート)を表示させるのも、同じくcssのcontentプロパティを利用する(今回初めて知ったけどなんて便利なプロパティ!)。

コンテンツ前の引用符

コンテンツ後の引用符

使い方を覚えるとテーマ作成がさらに楽しくなる

 「え、たったこれだけ?」で使えてしまうFont Awesome。うまく使えばブログをアプリっぽい画面にもできそう(フォントサイズが小さいとあまり目立たないので、大きめに使うのが良さそう)。センスのいいデザインのアイコンが使えてcssでサイズ、色、角度の変更だって簡単にできてしまう。これからはWebフォントを積極的に使っていきたい。

タグ:
スポンサーリンク
この記事をシェアする