Font Awesome (ﾌｫﾝﾄｵｰｻﾑ) ｜無料で使えるアイコンの登録と設定【 WordPress 】
Webサイトでは記事のタイトルの上などに パンくずリンク、 ホーム画面から
今開いているページまでを分かりやすく表示してくれるリンクがあります。
このパンくずリンクに表示されている ホームやフォルダなどのアイコン、
いろんなところでこのアイコンが使用されていますよね。
このアイコンの中で代表的なのが Font Awesome (ﾌｫﾝﾄｵｰｻﾑ)です。
デザインも可愛く 世界中で利用されているアイコンなのです。
アイコンを使用することで コンテンツを見やすくデザイン性もアップしますので
カテゴリ・見出し・リストなどに ぜひとも取り入れてみたいですよね。
アイコンツール Font Awesome
現在、Font Awesome はバージョン6.1.1 ( Font Awesome6 ) 新しいアイコンや新機能を追加しアップデートされました。
アイコンスタイルには Solid ( ソリッド )、Regular ( レギュラー )、Light ( ライト )、Duotone ( デュオトーン )と
新しいスタイルの Thin、細いラインで描かれた薄いスタイルのアイコンです。
ただ、無料で使用できるのは基本 ソリッドスタイルと制限はあるのですが
無料のアイコンだけでも2000点以上あり 個人運営のサイトなら
ここからでも十分 サイトのイメージに合うアイコンを見つけることができるのではないでしょうか。
キットコードを使った Font Awesomeの使いかた
Font Awesomeを利用するスタイルはいろいろありますが ツールキットで使用するのが基本のスタイルです。
サイトと Font Awesome を紐付けするキットコードを使用するというものです。
キットコードを利用するためには Font Awesomeサイトにユーザー登録しキットコードを取得する必要があります。
Font Awesome 登録とキットコード作成
公式サイトはこちら → Font Awesome 公式サイト
画面左の Start for Free をクリックすると このようなメールアドレスを入力する画面が表示されます。
メールアドレスを入力して 最初のキット を作成してください。と書かれています。
メールアドレスを入力し 右の Send Kit Code をクリックし送信します。
Font Awesomeから届いたメールに Confirm Your Email Address と書かれたボタンがあります。
クリックして登録の続きへ進みます。
パスワード・アカウント情報の登録が済みましたら All set. Let’s go! をクリック
Font Awesomeのアカウントへ ログイン、キットコードを作成します。
キットコード作成 – コピーと貼り付け
作成されたキットコードの画面になります。Copy Kit Code! をクリックしコードをコピーします。
キットコードは Webサイトの Header ファイル記述（貼り付け）するだけの簡単な作業です。
ワードプレスの場合、管理画面からファイルへ移動できます。
テーマによってファイルの場所が違いますのでそれぞれの編集のしかたを
Luxeritas 子テーマの編集から貼り付け
Luxeritasテーマの場合は 子テーマの編集画面から かんたんに編集することが出来ます。
ダッシュボード画面から Luxeritas → 子テーマの編集 をクリック
子テーマの編集画面の Headタグ を開くと ヘッダーファイルが表示されます。
?>以降に書いてください。とあります。この画像でいうと 15行目からということになります。
コードを貼り付けましたら 左上の 保存 をクリックして完了です。
テーマファイルエディターから貼り付け
ルクセリタス以外のテーマで 編集画面がテーマファイルのみの場合、この方法でコードの記述を行います。
管理画面から 外観 → テーマファイルエディター をクリック 編集するテーマを選択します。
テーマヘッダー header.php に記述していきますが 子テーマを利用されている場合 add-header.php
子テーマなしのテーマを利用されている場合 テーマヘッダー（ header.php ） を探します。
<!DOCTYPE html>という宣言から始まるコードが表示されています。
43行目あたりに <head> というコードがあります。
この <head> から次の </head> までの間に先ほどのキットコードを貼り付けます。
179項目あたりに </head> がありました。この手前あたりに貼っておくと
後から編集したい場合なども覚えやすく探しやすいです。
テーマのバージョンなどにより</head> <のコードが表示される行目が変わりますので気を付けて探してみてください。
これで設定は完了しましたので サイト内で使用することができます。
Font Awesomeアイコンの使いかたについては こちらを参考にお願いします。
Font Awesome 管理画面 – Your Account –
Font Awesome にサインイン したら アカウント画面に移動します。
右上の アイコンをクリックして頂くと アカウントナビ を表示することができます。
キットコードの再表示
キットコードは 画面トップのナビゲーションメニュー、 Kits からも開くことができます。
この画面から いつでもキットコードをコピーすることができます。
プラグインを使った Font Awesome
ワードプレスでは キットコードを使わず プラグインを使用することでアイコンを使用することもできます。
プラグインの新規追加から Font Awesome を検索
インストールしましたら 有効をクリックします。
Font Awesomeの設定画面
設定画面は プラグインの画面にある setting をクリックするか 画面左のメニュー一覧から
設定 → Font Awesome をクリックすると Font Awesomeの設定画面へ移動できます。
この画面で現在のバージョンなどを確認・変更することができます。
キットコードとプラグインの違い
プラグインを数多く利用する場合は サイトの 動作が遅くなってしまうというデメリットがあります。
ただ、ルクセリタスのテーマで クラッシクエディタを使用している場合、
エディタ画面から簡単にアイコンを呼び出すことができます。
ルクセリタスで投稿画面から簡単にアイコンが呼び出せる！
Luxeritasでは Font Awesomeのプラグインを使用することで投稿画面上に Font Awesomeのボタンが表示され
ここから簡単にアイコンの検索、投稿画面への表示ができます！
検索に関しては 事前に Font Awesomeのサイトからアイコンの検索が必要な場合もあります。
通常、アイコンのHTMLコードはテキスト画面では表示されていますが
ビジュアル画面では表示されていなくて作業がしづらい、というマイナスイメージがありました。
この Font Awesomeを使用することでビジュアル画面でも独自のコードが表示され
このコードに対して 色を指定したりもできるのでかなり簡単にアイコンの設定ができるようになります！
多くアイコンを使用するような記事を作成する方などは プラグイン使用は かなりメリットがありそうです。