外観テーマにCocoonを使っている皆さん！
Cocoonの設定をしているとき、“全体“タブの下の方にあるこれ↓
Font Awesome？？？
なんだか知っていますか？
これ使うと、さらにサイトのデザインの幅が広がります。
外観テーマのカスタマイズに慣れてきたら、Font Awesomeも使ってみるといいと思います。
このブログもグローバルメニューでFont Awesomeを使っています。
今回の記事ではブログを始めて間もない方向けに、Font Awesomeって何？というところから、初歩の使い方まで紹介していきます。
あ！あの人のページで見た”あれ”はこれ使っているのか…
なんて気がつくかもしれませんよ。ぜひご参考に。
Font Awesomeって何？
Font Awesome is the Internet’s icon library and toolkit, used by millions of designers, developers, and content creators.
（日本語訳）
Font Awesomeは、何百万人ものデザイナー、開発者、コンテンツクリエーターに利用されている、インターネットのアイコンライブラリおよびツールキットです。
ーFont Awesome トップページより－
「Font Awesome」は、Webサイトにアイコンを表示させることができるサービスです。
「Font Awesome」には、たくさんのアイコンが用意されています。
有料プランと無料プランで使える数に違いはありますが、無料で使えるものもかなりたくさんありますよ。
ちなみに有料プランの料金は、$99/年のProと$499/年のPro Maxの２つがあります。
無料から始めてみて、もっともっと使いたい..ということになれば、有料プランに変更するといいでしょう。
アイコン？ふーん、ただの画像じゃん。別に…
確かに、アイコンは“画像“ですよね。
ですが、このFontAwesomeで用意されているものは、使い慣れたjpgやpngとは違うSVGという形式の画像です。
SVGとは、Scalable Vector Graphicsは、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。 －Wikipedia－
ベクター画像（ベクターがぞう、英: vector graphics）は、コンピュータグラフィックスなどにおいて、画像を円や直線などのような解析幾何学的な「図形」の集まりとして表現する表現形式である。平面をスキャンし、その各点の濃淡の集まりによって画像を表現する「ビットマップ画像」（ラスター形式）と対置される。それを描画する操作として（仮想の）絵筆を動かすようなスタイルになることから、ドロー形式、ドローグラフィックなどとも呼ばれる。
つまりこういうこと↓
画像データで馴染みのあるJPGやGIF、PNG形式の画像は、1個１個がピクセルという小さな点の集まりで表現されます。
一方、ベクター形式であるSVGは画像情報を数値化して表現します。
ベクター画像は線や塗りつぶしなどの情報を座標と数式によって表現することが特徴です。
そのため、ピクセルで画像を表現するのに比べ、ベクター画像は拡大縮小を行っても画質が劣化しないという特長があります。
また、SVGファイルはテキスト形式なので、テキストエディタで開くことができ、アイコンのサイズや色の変更が簡単にできます。
SVGは、Webページやデータ可視化、アイコン、ロゴ、イラストなど、さまざまな用途で広く使用されています。
表示サイズを大きくしても画質が劣化しないというかなりのメリットね。
まず無料プランで使ってみてから、足りないなと思ったら有料プランにするのがいいでしょう。
Font Awesomeの使い方
それではここから、Font Awesomeの使い方です。
ここではCocoonでFont Awesomeを使う場合について説明していきます。
事前準備
Cocoon設定の確認
Font Awesomeを使うときは、あらかじめ「Cocoon設定」を確認しておきましょう。
Cocoon設定から全体タブを選び、
サイトアイコンフォントのところで「Font Awesome5」をチェックしましょう。
Font Awesome4ではだめなことはありませんが、新しい方のFont Awesome5をおすすめです。
この設定だけでFont Awesomeを使用することができます。
最新はFont Awesome6ですが、Cocoonで使えるのはFont Awesome5までです。
Font Awesome使用の流れ
CocoonでFont Awesomeを使うときの流れは、
①使いたいアイコンを探す。
②コードをコピー。
③自分のブログの貼りたいところにコードをペースト。
これだけです。
Font Awesomeを使う場合は、ヘッドタグ内（<head>〜</head>）にコードを貼ったり、プラグインをインストールするなど事前準備が必要ですが、Cocoonは最初からFont Awesomeを使用するように設定されているので難しいことを知らなくてもOKです。
それでは順番に説明します。
Font Awesomeのページにアクセスします。→ Font Awesomeのページ
①使いたいアイコンを探す
まず、サイトから使いたいアイコンを探します。
トップメニューの“Icons”をクリック。
続いて表示されたページで、検索窓に関連するキーワードを入力して検索するか、下側にあるいろいろなカテゴリーから使用するアイコンを探します。
◆Cocoon利用者の注意点◆
Font Awesomeでは、2022年にFont Awesome6が正式にリリースされていますが、CocoonではFont Awesome5までしか対応していません。
使えるアイコン数やHTMLコードに違いがあるので注意が必要です。
アイコン検索の際は、必ず画面右に表示される検索バージョンを変更することをお忘れなく。
アイコンは、キーワードを入力して検索するか、ページにあるカテゴリーのボタンをクリックして検索していきます。
今回は、例として”cloud”をキーワードとして、検索からアイコンの挿入の方法まで説明します。
まず、検索窓に「cloud」と入力して検索します。
次に、検索結果一覧の右上に表示されている検索バージョンを変更します。
検索バージョンを変更すると、画面が自動で切り換わります。
無料プランの場合は”FREE”もクリックしましょう。
ここで、左上にある”cloud”を使っていきます。
②コードをコピー
次はアイコンのHTMLコードをコピーします。
使いたいアイコンの画像をクリックします。
クリックすると、アニメーションなどの個別の設定が行えるウィンドウが表示されます。
この画面の下側に表示される紺色のボックスで、”HTML”タブを選択して表示されるコードがこれからページに貼り付けるコードになります。
<i class=”fas fa-cloud“></i>
コードをコピーします。
※コードのところにカーソルを持っていき、左クリックするとコードがコピーされます。
今回は、CDNでFont Awesomeを利用することを想定しているため、HTMLコードを使用します。
なぜならCDNならアイコンデータをFont Awesomeからダウンロードして、あなたの利用しているサーバーにアップロードする必要がないので、サーバーに負担をかけなくて済みます。
それに簡単です。
◆コードの構造
アイコンのカスタマイズを始めると気がつくと思いますが、アイコンのHTMLコードは以下のようになっています。
このコードの””で挟まれた部分「fas fa-cloud」が、今回選んだ「cloud」のアイコンを表しています。
Truck-monster だったら<i class=”fas fa-truck-monster“></i>
Umbrella-beach だったら<i class=”fas fa-umbrella-beach“></i>
③ブログ記事の貼りたいところにコードをペースト
アイコンのコードをコピーしたら、WordPressのエディタ―に戻ります。
アイコンを貼りたい場所にカスタムHTMLのブロックを挿入し、コピーしたコードを貼り付けます。
するとアイコンが表示されます。
← Default Sizeの大きさです。アイコンのカスタマイズ
このアイコンは、個別の設定画面でいろいろカスタマイズすることができます。
具体的には下図の①～⑤のプルダウンメニューで設定することができます。
①スタイル
スタイルの選択肢は４つあるのですが、Cocoonで表示できるのは”Solid”だけのようです。
コードの”fas”のところが変わってしまうと表示できなくなるみたいです。
やってみるとわかると思いますが、”Solid”以外は表示されないか”□”が表示されます。
←Regular、 ←Light、 ←Duotone②アニメーション
アニメーションは”Spin”と”Pulse”があります。
←Spin ←Pulseこの他にもアニメーションの設定ができますが、検索ウィンドウで選べるのは上記２つになっています。（※他のアニメーションの設定については後述）
③カラー
カラーコードを変更することで、自分の好きなカラーを設定することができます。
……④回転
回転させることもできます。
⑤サイズ
アイコンのサイズもプルダウンで選ぶことで変更できます。
・・・xs、 ・・・sm、 ・・・default、 ・・・lg※他のサイズへの変え方についてはこの後の章で解説します。
その他のカスタマイズ方法
カスタマイズについては、他にも方法があります。
もっと大きさを変える。
プルダウンに出てきませんが、コードの”fa-“の後を2x、3x…と変えることで大きさを変化させることが可能です。
※0.75ｘ～10ｘまで可能です。
コードの記述は以下のように、アイコンのコード（”fas fa-cloud”）の後に続けて記入します。
“fa-“のあとを2x、3x・・・というように表示したい大きさに合わせて変更します。
| クラス名 | 実際の表示の大きさ |
| fa-xs | |
| fa-sm | |
| fa-lg | |
| fa-2x | |
| fa-3x | |
| fa-4x | |
| fa-5x | |
| fa-6x | |
| fa-7x | |
| fa-8x | |
| fa-9x | |
| fa-10x |
もっといろいろなアニメーションをつけたい
アイコンのアニメーションは、「Spin」「Pulse」以外にも「Font Awesome Animation」というスタイルシートを読み込むことで、いろいろなアニメーションをつけることができます。
ここからはその設定方法とアニメーションの種類についてご紹介します。
「Font Awesome Animation」を使うための事前準備
以下のコードを<head></head>の部分に貼り付けます。
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.css” type=”text/css” media=”all” />
「Cocoon設定」→「アクセス解析」
上記のコードを貼り付けたら、あとはアイコンのコードにアニメーションを指定するコード（class）を追加して記述するだけです。
アイコン記入例
| <i class=”fas fa-grin-stars fa-2x faa-tada animated”></i> |
「Font Awesome Animation」で表現できるアニメーションを一覧にしてみました。
| 動き | class | |
| 回転 | faa-spin animated | |
| 点滅 | faa-flash animated | |
| 振動 | faa-ring animated | |
| ひねり | faa-wrench animated | |
| バウンド | faa-bounce animated | |
| 横揺れ | faa-horizontal animated | |
| 縦揺れ | faa-vertical animated | |
| パルス | faa-pulse animated | |
| jump out | faa-tada animated | |
| シェイク | faa-shake animated | |
| 浮遊 | faa-float animated | |
| 落下 | faa-falling animated | |
| バースト | faa-burst animated | |
| スライド 左→右 | faa-passing animated | |
| スライド 左←右 | faa-passing-reverse animated |
アニメーションのスピードを変えたい
さらにコードにfaa-fast、faa-slowを追加することでアニメーションの速度を変更することも可能です。
| class | 記入例 | |
| 速い | faa-fast | <i class=”fas fa-heart faa-pulse animated faa-fast“></i> |
| 遅い | faa-slow | <i class=”fas fa-heart faa-pulse animated faa-slow“></i> |
ホバーアニメーションをつけたい
アイコンのところにカーソルを持っていくとアイコンが動く、ホバーアニメーションをつけることもできます。
animatedをanimated-hoverにすることでホバーアニメーションにすることができます。
記入例） <i class=”far fa-flushed fa-5x faa-wrench animated-hover“></i>
←アイコンにカーソルを重ねてみてください。メニューにアイコンをいれる方法
ここで一つ活用例をご紹介します。
私はグローバルメニューにアイコンを使用しています。
アイコンの活用例の一つとしてそのやり方をご紹介します。
WordPressのメニューから「外観」→「メニュー」を選択。
「カスタムリンク」を追加。
Font Awesomeで取得したHTMLコードをナビゲーションラベルにペースト。
このときURLの欄には、メニューの飛び先（トップページ、カテゴリーページなど）のURLを入力します。
| URL | https://bitarog.com |
| ナビゲーションラベル | <i class=”fas fa-home fa-fw”></i>Home |
上記例ではホームアイコンのコード <i class=”fas fa-home”></i>にアイコンの幅を揃えるクラス”fa-fw”を追加、アイコンの後に表記するHomeの文字を記入しています。
この設定でできたのが↓
このブログでは、この方法でグローバルメニューを設定しました。
まとめ
今回の記事では、Cocoonを利用している初心者の方向けに「Font Awesome」の使い方について解説しました。
残念ながら、CocoonではFont Awesome5までの対応となっています。
Font Awesome6では、使えるアイコンの数も増えていますので、Cocoonでも対応してもらえると嬉しいですね。
「Font Awesome」は、ウェブサイトやアプリケーションで利用できるアイコンのライブラリ。
無料プランでも種類が豊富。
いろいろな場所で使うことができます。
サイトの中にアイコンをワンポイントとして使っていくことで、デザインの幅が広がり、より見やすく、目を引くページ作りが可能となるでしょう。
初心者の方もぜひチャレンジしてみてください。
最後までお読みいただきありがとうございました。
コメント
「Font Awesomeの使い方」大変分かりやすかったです。ありがとうございました。