【Cocoon初心者向け】今さら聞けないFont Awesomeの使い方を解説

Font Awesome外観
びたろー
びたろー

外観テーマにCocoonを使っている皆さん!

Cocoonの設定をしているとき、“全体“タブの下の方にあるこれ↓

Font Awesome???

なんだか知っていますか?

これ使うと、さらにサイトのデザインの幅が広がります。

外観テーマのカスタマイズに慣れてきたら、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の2つがあります。

無料から始めてみて、もっともっと使いたい..ということになれば、有料プランに変更するといいでしょう。

アイコン?ふーん、ただの画像じゃん。別に…

確かに、アイコンは“画像“ですよね。

ですが、このFontAwesomeで用意されているものは、使い慣れたjpgやpngとは違うSVGという形式の画像です。

SVGとは

SVGとは、Scalable Vector Graphicsは、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。 -Wikipedia

ベクター画像

ベクター画像(ベクターがぞう、英: vector graphics)は、コンピュータグラフィックスなどにおいて、画像を円や直線などのような解析幾何学的な「図形」の集まりとして表現する表現形式である。平面をスキャンし、その各点の濃淡の集まりによって画像を表現する「ビットマップ画像」(ラスター形式)と対置される。それを描画する操作として(仮想の)絵筆を動かすようなスタイルになることから、ドロー形式、ドローグラフィックなどとも呼ばれる。

Wikipedia

つまりこういうこと↓

画像データで馴染みのあるJPGGIFPNG形式の画像は、1個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のページ

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コードは以下のようになっています。

cloudの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のブロックを挿入し、コピーしたコードを貼り付けます。

 カスタムHTMLブロック

するとアイコンが表示されます。

 ← Default Sizeの大きさです。

アイコンのカスタマイズ

このアイコンは、個別の設定画面でいろいろカスタマイズすることができます。

具体的には下図の①~⑤のプルダウンメニューで設定することができます。

①スタイル

style

スタイルの選択肢は4つあるのですが、Cocoonで表示できるのは”Solid”だけのようです。

コードの”fas”のところが変わってしまうと表示できなくなるみたいです。

やってみるとわかると思いますが、”Solid”以外は表示されないか”□”が表示されます。

←Regular、 ←Light、 ←Duotone

②アニメーション

animation

アニメーションは”Spin”と”Pulse”があります。

←Spin ←Pulse

この他にもアニメーションの設定ができますが、検索ウィンドウで選べるのは上記2つになっています。(※他のアニメーションの設定については後述)

③カラー

color

カラーコードを変更することで、自分の好きなカラーを設定することができます。

……

④回転

rotation

回転させることもできます。

⑤サイズ

size

アイコンのサイズもプルダウンで選ぶことで変更できます。

・・・xs、 ・・・sm、 ・・・default、 ・・・lg

※他のサイズへの変え方についてはこの後の章で解説します。

その他のカスタマイズ方法

カスタマイズについては、他にも方法があります。

もっと大きさを変える。

プルダウンに出てきませんが、コードの”fa-“の後を2x、3x…と変えることで大きさを変化させることが可能です。

※0.75x~10xまで可能です。

コードの記述は以下のように、アイコンのコード(”fas fa-cloud”)の後に続けて記入します。

例)5倍の大きさで表示するときの記述

“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設定」→「アクセス解析」

access analysis

上記のコードを貼り付けたら、あとはアイコンのコードにアニメーションを指定するコード(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 outfaa-tada animated
シェイクfaa-shake animated
浮遊faa-float animated
落下faa-falling animated
バーストfaa-burst animated
スライド
左→右
faa-passing animated
スライド
左←右
faa-passing-reverse animated

アニメーションのスピードを変えたい

さらにコードにfaa-fastfaa-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を入力します。

URLhttps://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」は、ウェブサイトやアプリケーションで利用できるアイコンのライブラリ。

無料プランでも種類が豊富。

いろいろな場所で使うことができます。

サイトの中にアイコンをワンポイントとして使っていくことで、デザインの幅が広がり、より見やすく、目を引くページ作りが可能となるでしょう。

初心者の方もぜひチャレンジしてみてください。

最後までお読みいただきありがとうございました。

コメント

  1. yoshi より:

    「Font Awesomeの使い方」大変分かりやすかったです。ありがとうございました。

タイトルとURLをコピーしました