4HTMLとCSSの基礎を知っていれば難しくないWebフォントネットでブログを見ていて「いいなー」と思っていたのがおしゃれなアイコン。あちこちで「アイコンフォント」なるものが流行っているらしいことは知っていて、「でも使うの難しいんでしょう?」なんて思ってたのだけど、いざ使ってみたら簡単だったので導入メモ。HTMLとCSSを自分で打てるくらいの知識があればすぐに導入できる。Awesomeの最新版は「5」です。記事中で紹介しているのは「4」を使う際の使用方法です。「5」では「4」に収録されている一部のアイコンが有料となっていることがあります。「4」を使用する場合は「v4.7.0」のページをご覧ください。Awesome」というWebフォント。シンプルなイラストアイコンが揃っていて、使っている人も多いので、情報量が多くて安心(アップデートも行われていて、どんどん新しいアイコンが追加されている)。Awesomeのオススメな点は、シンプルでわかりやすいグラフィックCDNから引っ張れてフォントをサーバーにアップロードする必要がないといったところ。Awesomeに収録されているアイコンは、公式Webサイトの「Icons」ページで見ることができる。使いたいデザインのアイコンがあるかチェックする。Awesomeには、、といったオフィスソフトやWebサービスでよく見かけるアイコンが充実しているほか、、、のような、ブログ記事のカテゴリやジャンルを表現するのに使えそうなアイコンも数多く用意されている。「License」ページを見ると、商用サイトにも使用可能とある(”ブランドアイコン”の権利はそのサービスのオーナーに有り、との記載有り。ライセンスは将来変わることもあるかもしれないので使用前にサイトをチェックしてください)。Awesomeのサイトのフッターにリンクがある)から、自分のサイトのheadタグに入れるコードをコピーする(下記のコードは記事作成時のものです。アップデートされているかもしれないのでコードを入手される際はオフィシャルのサイトを確認してください)。rel="stylesheet">WordPressの場合は、header.phpのheadタグ内にペーストして保存する。これだけでもうほぼ準備完了。fa-から始まるクラス名が与えられたi要素のタグを入力するだけ。fa-car"></i>↑のようなコードになる。AwesomeのIconsページのアイコンのリンク先にiタグが表示されているのでそれをコピーアンドペーストすると簡単。Awesomeを使ってWordPressをちょいリッチにするアイコンフォントを使ってやってみたかったのが次のこと。メニューバーをわかりやすく順不同リスト表示の項目の先頭にチェックマークを表示target=”_blank”指定したリンクの後ろにアイコンを表示blockquote内のコンテンツの前後に引用符を表示メニューバーのカテゴリ名の先頭にアイコンを表示させるメニューバーの項目の先頭にアイコンを追加するには、WordPressの管理画面の「外観」>「メニュー」を開いて、「メニュー構造」のメニュー項目の入力欄にある「ナビゲーションラベル」に、メニューの名前と一緒に先ほどのiタグをそのまま挿入する。ナビゲーションラベルにメニューテキストと一緒にiタグを挿入するリスト表示の項目の先頭にチェックマークアイコンを表示させる記事の文章などには都度iタグを入れればいいけれど、過去記事も含めて一括でアイコンを入れたいときがある。そんなときはCSSのcontentプロパティを使う。AwesomeのIconページに記載されている「Unicode」の後ろの文字を入力する。”別ウィンドウで開く”設定のリンクテキストの後ろにアイコンを表示させるtarget=”_blank”指定をしたリンクテキストの後ろにアイコンを表示させるのも、cssのcontentプロパティを利用する。content:"f08e";}blockquoteタグの中のコンテンツの前後に引用符を表示させる記事中の引用テキストの前後に引用符(ダブルクォート)を表示させるのも、同じくcssのcontentプロパティを利用する(今回初めて知ったけどなんて便利なプロパティ!)。うまく使えばブログをアプリっぽい画面にもできそう(フォントサイズが小さいとあまり目立たないので、大きめに使うのが良さそう)。センスのいいデザインのアイコンが使えてcssでサイズ、色、角度の変更だって簡単にできてしまう。これからはWebフォントを積極的に使っていきたい。日本で人気の「LINE」のブランドアイコンも収録されるなど、アイコンの数やデザインのバリエーションが増えたが、一部は有料(Free版とPro版に分かれている)となった。CSSの他にJavaScriptと組み合わせて使うSVGも用意される。Awesome4と使い方は変わらないのだが、4で無料で使えていたアイコンのいくつかは5ではPro版にのみ収録されるようになっている。使用頻度の高そうな「external-link」も5では有料アイコンになっている。無料のまま5へ移行する場合は事前に今使っているアイコンが有料になっていないか事前にチェックしておこう。目で見て楽しむデザインの本。ViewedSEOプラグインの変更に便利かも。SC「今なおシンプル」が最大の魅力。reserved.当サイトでは利便性向上や閲覧の追跡のためにGoogle・他提携サービスによりCookieが使用されています。サイトの閲覧を続けた場合、Cookieの使用に同意したことになります。