≫ Amazon 5日間のBigSale ▶ブラックフライデ-&サイバーマンデ-

【Cocoon】アイコンフォントの使い方|アニメーション効果もOK|Font Awesome

web-icon-font-awesomeWordPress
この記事は約13分で読めます。
初心者
初心者

ブログで文章の中にアイコンが入ってるのをたまに見るけど、自分のブログでもやりたい!

よしてっく
よしてっく

それならFont AwesomeWEBアイコンフォントを使いましょう!

サイトでたまに見かける文章内にアイコンが表示されている表現、やってみたいですよね。

こんな感じ↓(画像ではありません)
Twitter  始めました~!

 

今回は、WordPressのCocoonでFont AwesomeWEBアイコンフォントを使用する方法をご紹介します。動き(アニメーション効果)も追加できます。

この記事は、サルワカさんのサイトを参考にさせて頂きCocoonユーザー向けの解説にアレンジしました。(お世話になってます)

 

 

スポンサーリンク

Font Awesome(フォント オーサム)とは

Font Awesomeとは

Font Awesome(フォント オーサム)は、Webサイトにアイコン型のフォント(Webアイコンフォント)を提供しているサイトです。

よしてっく
よしてっく

無料(Free)と有料(Pro)で扱えるアイコンのレパートリーに差が出ますが、無料版でも種類が豊富なので充分使えます。

■Webアイコンフォントの特徴

  • テキストと同様に文中に挿入できる
  • 拡大してもボヤけない
  • 色の変更ができる
  • サイズの変更ができる
  • 動きも追加できる(アニメーション効果)

 

ちなみにProのラインセンス料金は調べた時点では$99(年間)でした。(変動する可能性あり)
Font Awesome_proの料金

 

 

Font Awesome4と5⇒バージョン5を推奨

バージョン5を推奨

現状Font Awesomeにはバージョン4と5があり、使用ルールが異なります。

よしてっく
よしてっく

Cocoonはバージョン4と5を設定で切り替える方式で初期設定は4です。

バージョン4を使用していると、5に移行するのにコード書き換えの面倒な作業が発生するので、Font Awesomeを初めて使う人は新しいバージョン5がオススメ。

※Cocoonでのバージョン切り替え手順は後で紹介します。

 

Font Awesome5はスタイル・カテゴリーで5分類

スタイルカテゴリーで5分類

Font Awesome5のアイコンは、スタイル・カテゴリーとして大きく5種類に分類されています。(Font Awesome4ではスタイル・カテゴリー分類は無し)

  1. Solid(ソリッド:fas系)
  2. Regular(レギュラー:far系)
  3. Light(ライト:fal系)※Proのみ
  4. Duotone(デュオトーン:fad系)※Proのみ
  5. Brands(ブランド:fab系)

 

❶ Solid(ソリッド:fas系)

・塗りつぶし部分が多いアイコン。※無料アイコンの種類が一番多い。

例:   …など。

 

❷Regular(レギュラー:far系)

・線の太さが標準スタイルのアイコン。※無料アイコンの種類は少なめ。

例:    …など。

 

❸Light(ライト:fal系)

・線が細いスタイルのアイコン。※Proのみ。

Font Awesome_Light

 

❹Duotone(デュオトーン:fad系)

・色の濃さを2パターン使っているアイコン。※Proのみ。

Font Awesome_Duotone

 

❺Brands(ブランド:fab系)

・有名メーカーなどのロゴアイコン。

例: Google、 Twitter、 Amazon、 YouTube …など。

 

無料の範囲だとLight(ライト系)とDuotone(デュオトーン系)は扱えません。

スタイル・カテゴリー分類によって気を付ける事は、

コードの先頭が、  far~ fal~ fad~ fas~ fab~と、違うということです。

トラブル防止の為、予備知識として覚えておいて下さい。

 

 

Cocoon:Font Awesome5の使い方[基本編]

CocoonFont Awesome5の使い方基本編

Cocoonは初めからFont Awesomeが使えますが、初期設定ではバージョンが4になっているので5に切り替えてから使用します。

■CocoonのFont Awesome利用手順

  1. Font Awesomeバージョン切替え(4⇒5)
  2. Font Awesome5でアイコンのコードを取得
  3. サイトにコードを貼り付け(HTML)

 

❶Cocoon:Font Awesomeバージョン切替え(4⇒5)

(1)WordPress管理画面(ダッシュボード)で、Cocoon設定をクリックします。

Cocoon-setting

 

(2)タブメニューの全体をクリックします。

Whole Cocoon settings

 

(3)少し下にスクロールし、サイトアイコンフォントの項目でFont Awesome 5にチェックを入れます。

Font Awesome 5 settings

 

(4)変更をまとめて保存をクリックします。

Save changes together

 

これで、Font Awesome5を利用する準備は完了です。

 

 

❷Font Awesome5でアイコンのコードを取得

(1)Font Awesomeのサイトにアクセスします。

>>> https://fontawesome.com/

Font Awesomeのホームページ

 

(2)ページ上部メニューのIconsをクリックします。

Font AwesomeのIconsをクリック

 

(3)アイコンの一覧ページが表示されます。
Font Awesomeのアイコン一覧ページ
 
 
アイコンは色が濃いのが無料版色が薄いのは有料版です。
※無料ユーザーは有料アイコンは使用できません。

アイコンの無料と有料
 
 
(4)左サイドメニューのFreeをクリックしてチェックを入れます。(表示される候補が無料版アイコンだけになる)
アイコン表示をFreeに切り替え
 
 
 
(5)ほしいアイコンをキーワードで探します。上部の検索ボックスに名称を英語で入力。
※日本語には非対応。
 アイコンを検索
 

 

(6)使用したいアイコンを選んでクリックします。

選んだアイコンをクリック

 

(7)アイコンの詳細ページが表示されます。

アイコンの詳細ページ

 

(8)上部の<i class●●●><i>となっているテキストをクリックするだけでコードのコピーができます。

コードのコピー

 

↓拡大

コードのコピー拡大

↑この場合は  <i class=”fas fa-laptop“></i> というコードです。

 fas fa-laptop の部分がアイコンによって違います。

これで、アイコンフォントのコードが取得できました。(コピーした状態になっている)

 

❸サイトにコードを貼り付け(HTML形式)

★前項でコピーしたアイコンフォントのコードを投稿画面で貼り付けます。

 

(1)投稿画面をHTMLモード(テキストエディター)に切り替えます。

テキストモードに切替

 

★ブロックエディター(グーテンベルグ)の場合
+(ブロックの追加)カスタムHTML
ブロックエディターのHTMLモード
 
 

(2)アイコンを挿入したい場所にカーソルを置いてCtrl+Vなどでコードを貼り付けます。

コードの貼り付け

 

(3)エディターを通常(ビジュアルモード)に戻すとアイコンが確認できます。

アイコンフォントの表示例

 

これで、アイコンを文章の一部として表示できました。

 

 

Font Awesome5の使い方[応用編]

Font Awesome5の使い方応用編

応用編として、アイコンフォントに様々な効果を追加する編集方法をご紹介します。

■アイコンフォントの編集項目

  1. サイズの変更
  2. 色の変更
  3. 角度の変更
  4. 反転
  5. 動き(アニメーション効果)

 

✅アイコンフォント編集の基本ルール

Font Awesomeから取得したコード内のアイコン分類コードの後ろに編集用のコードを追記します。

基本のコード:<i class=”fas fa-laptop”></i>

↓ 例えば編集用コード●●●●を追記

追記後の状態:<i class=”fas fa-laptop ●●●●“></i>

●●●●の前には半角スペースを入れる。
※ただし色コードの追記ルールだけは違います(後で解説)

 

❶サイズの変更

記入例:<i class=”fas fa-laptop fa-xs”></i> など。

サイズコード見た目
1倍(基本)追記コード無し 
0.75倍fa-xs 
0.875倍fa-sm 
1.33倍fa-lg 
2倍fa-2x 
3倍fa-3x 
4倍fa-4x 
5倍fa-5x 
6倍fa-6x 
7倍fa-7x 
8倍fa-8x 
9倍fa-9x 
10倍fa-10x 

※10倍より上は設定無し。

 

❷色の変更

色の編集用コードだけは、追記する場所が他と違います。

基本のコード:<i class=”fas fa-laptop”></i>

↓ 例えばの編集用コード●●●●を追記

追記後の状態:<i class=”fas fa-laptop” ●●●●></i>

 

記入例
<i class=”fas fa-laptop” style=”color: red;”></i> 

カラーコード見た目
style=”color: red;” 
style=”color: yellow;” 
style=”color: blue;” 
style=”color: green;” 
ピンクstyle=”color: pink;” 
※カラー番号指定(6ケタ)style=”color:#528fff;” 

※カラー番号は色見本サイトなどから入手して下さい。

 

❸角度の変更

記入例
 <i class=”fas fa-laptop fa-rotate-90“></i> 

角度コード見た目
基本追記コード無し 
90°fa-rotate-90 
180°fa-rotate-180 
270°fa-rotate-270 

※45°などの間の角度は指定できません。

 

❹反転

記入例
<i class=”fas fa-aws fa-flip-horizontal“></i> 

反転方法コード見た目
基本追記コード無し 
水平方向で反転fa-flip-horizontal 
垂直方向で反転fa-flip-vertical 

 

❺動き(アニメーション効果)

アニメーション効果を使うためには、<head>タグに下記のFont Awesome Animation用のコードを追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

 

✅Cocoonで<head>タグにコードを追加する手順

(1)Cocoon設定 アクセス解析・認証ヘッド用コードの枠内にコピペします。

Cocoonでheadタグにコードを貼り付け

※枠内に既に他のコードがある場合は、その下に1~2行、改行してから貼り付けて下さい。

↓拡大

Cocoonでheadタグにコードを貼り付け拡大

 

(2) 変更をまとめて保存をクリックします。

Save changes together

これで、アニメーション効果のコードが有効になります。

 

✅アニメーション効果の一覧

記入例
<i class=”fas fa-redo fa-spin“></i> 

動きコード見た目
回転fa-spin 
8コマ回転fa-pulse 
レンチfaa-wrench animated 
ブルブルfaa-ring animated 
横揺れfaa-horizontal animated 
縦揺れfaa-vertical animated 
点滅faa-flash animated 
跳ねfaa-bounce animated 
浮遊faa-float animated 
パルスfaa-pulse animated 
シェイクfaa-shake animated 
ジャジャーン風faa-tada animated 
通過faa-passing animated 
バックfaa-passing-reverse animated 
バーストfaa-burste animated 

 

✅マウスホバーした時だけアニメーション効果

コードの  animated の部分を
 animated-hover に変更する。(-hoverを追加)

↓マウスカーソルを置いてみて!(タップ)

  

 

複数の効果を追加したコードの記入例

の基本コード <i class=”fas fa-ad”></i>に、

サイズ回転のコードを追加した場合は下記のようになります。

  • サイズ(3倍) ⇒ fa-3x
  • 回転 ⇒ fa-spin
  • 色(緑) ⇒ style=”color: green;”

<i class=”fas fa-ad fa-3x fa-spinstyle=”color: green;”></i>

⇒ 

 

よしてっく
よしてっく

それぞれのコードを上手く組み合わせて、自分だけのユニークな表現をしてみましょう

 

アイコンを日本語で探せる便利サイト

日本語で探せる便利サイト

Font Awesomeサイトでのフォントアイコン検索は英語にしか対応していません。

よしてっく
よしてっく

日本語を変換して英語で検索するのが面倒な人は下記のサイトがオススメです!

 

検索ボックスで検索するとアイコンの絞り込みができます。

Font Awesome日本語検索

 

テキストリンクをクリックでダイアログボックスが出ますので、コードのコピーもクリックだけでOK。

Font Awesome日本語検索コードコピー

初心者
初心者

日本語で探せるのはかなり便利!
親切すぎる~♥

まとめ:アイコンフォントで表現の幅を広げよう

今回は、Font AwesomeのアイコンフォントをCocoonで使う方法をご紹介しました。

CocoonにはFont Awesomeを使う機能が初めから装備されていますので設定も比較的簡単です。

よしてっく
よしてっく

アイコンフォントを取り入れると表現のバリエーションが格段にアップし、他サイトとの差別化にもなります!

HTML(テキストモード)の理解も深まるので、新しい機能にも是非チャレンジしてみて下さい。

コメント