アイコン、使いたいですよね。
Fontawesomeというアイコン表示サービスが有名ですが、Fontawesomeは、ページ読み込みのたびにアクセスが増え、結果的にサイトの表示スピードを落とす原因の一つになっています。
ここでは、そのFontawesomeを使用不可にして、代わりにJINで用意されている独自アイコンフォントを設定する方法をご紹介します。
Fontawesomeはスピード遅読の原因
JIN公式サイトにも記載されていますが、Fontawesomeを利用すると、ページの表示スピードが著しく低下します。
JINを利用するのであれば、JINのオリジナルアイコンフォントを利用するのが良いです。
Fontawesome設定の解除
【外観】→【カスタマイズ】→【その他の設定】
独自アイコンフォントの設定方法
JINが用意している独自アイコンフォント一覧をご確認ください。
次に、使いたいフォントの文字列をコピーしてブロックに貼り付けます。
このアイコンを利用したい場合は、
または、
とブロックへコピーします。
↓表示される例がこちら。
１．ショートコードブロックに入れた場合
２．段落ブロックにいれた場合
このような文章ブロックの中（）にペーストします。
アイコンの色と大きさについて
最初のアイコン色は、
【カスタマイズ】→【カラー設定】の【記事中のアイコンの色】
で決めている１色が表示されます。
個別に色と大きさを変更する
ショートコードに大きさや色を記入することで、個別に変更することもできます。
↓表示の結果
色と大きさの参考先
CSSで指定するだけで簡単に変更できます。
例文のように、コードや数値以外でも入力できますよ。
■色指定表（W3C標準 基本16色）
| カラー名 | 16進数 |
| black | #000000 |
| gray | #808080 |
| silver | #C0C0C0 |
| white | #FFFFFF |
| blue | #0000FF |
| navy | #000080 |
| teal | #008080 |
| green | #008000 |
| lime | #00FF00 |
| aqua | #00FFFF |
| yellow | #FFFF00 |
| red | #FF0000 |
| fuchsia | #FF00FF |
| olive | #808000 |
| purple | #800080 |
| maroon | #800000 |
Web Color は基本以外に216色あります。
■文字のサイズ指定について
・数値で指定します。
→サイトの標準文字サイズから相対的な大きさを表します。1.8なら1.8倍という感じです。pxで決めると大きさが固定されてしまい、小さな画面で確認するときなど問題があります。
→わかりにくい場合は、pxを指定しましょう。一番大きさがイメージしやすいかもしれません。
よくつかうものはパターン登録
毎回同じ指定をするのは面倒、という場合は【パターン登録】していつでも使えるようにしておくこともできます。
オリジナルアイコンをもっと簡単に使いたい
WordPressの【パターン登録】は、既存のものがあったり、順番やカテゴリーわけなどできなくて使いにくいですよね。
そんな場合は、文字入力IMEの単語登録機能を使って、簡単に呼び出せるようにしてみましょう。
まとめ
いかがでしたか？
Fontawesomeは大変便利なサービスです。
しかし、利用するためにページのスピードを犠牲にしていては元も子もありません。
JINがオリジナルフォントを用意したのは、少しでもページスピードを向上するため。
運用もとても簡単なので、必要であればオリジナルアイコンを使ってみましょう！
Download素材
このページで紹介したカラーガイドを画像にしました。ダウンロードしてお使いください。
