<>

Font Awesome (フォントオーサム) |無料で使えるアイコンの登録と設定【 WordPress 】

Webサイト上に表示する パンくずリンクに使用する ホーム やファイル のアイコン、
いろんなところでアイコンが使用されていますよね。

カテゴリ・見出し・リストなどにアイコンを使用することで コンテンツを見やすくデザイン性もアップします。

そのアイコンの中でも デザインも可愛く 世界中で利用されているのが Font Awesome (フォントオーサム)です。

アイコンツール  Font Awesome

現在、Font Awesome はバージョン6.1.1 ( Font Awesome6 )  新しいアイコンや新機能を追加しアップデートされました。

Font Awesome - icons アイコン検索サイト画面

アイコンスタイルには Solid ( ソリッド )、Regular ( レギュラー )、Light ( ライト )、Duotone ( デュオトーン )と
新しいスタイルの Thin、細いラインで描かれた薄いスタイルのアイコンです。

ただ、無料で使用できるのは基本 ソリッドスタイルと制限はあるのですが
無料のアイコンだけでも2000点以上あり 個人運営のサイトなら
ここからでも十分 サイトのイメージに合うアイコンを見つけることができるのではないでしょうか。

キットコードを使った Font Awesomeの使いかた

Font Awesomeを利用するスタイルはいろいろありますが ツールキットで使用するのが基本のスタイルです。

サイトと Font Awesome を紐付けするキットコードを使用するというものです。

キットコードを利用するためには Font Awesomeサイトにユーザー登録しキットコードを取得する必要があります。

Font Awesome 登録とキットコード作成

公式サイトはこちら → Font Awesome 公式サイト
無料で使える Font Awesome 登録の手順解説 - 1 - Startをクリック
画面左の Start for Free をクリックすると このようなメールアドレスを入力する画面が表示されます。

無料で使える Font Awesome 登録の手順解説 - 2 メールアドレスの登録と送信
メールアドレスを入力して 最初のキット を作成してください。と書かれています。

メールアドレスを入力し 右の Send Kit Code をクリックし送信します。

無料で使える Font Awesome 登録の手順解説 - 3 届いたメールのボタンをクリック

Font Awesomeから届いたメールに Confirm Your Email Address と書かれたボタンがあります。

クリックして登録の続きへ進みます。

無料で使える Font Awesome 登録の手順解説 - 4 パスワード・アカウント情報の登録

パスワード・アカウント情報の登録が済みましたら All set. Let’s go! をクリック
Font Awesomeのアカウントへ ログイン、キットコードを作成します。

キットコード作成 – コピーと貼り付け

Font Awesome キットコードを取得・コピー

作成されたキットコードの画面になります。Copy Kit Code! をクリックしコードをコピーします。

キットコードは Webサイトの Header ファイル記述(貼り付け)するだけの簡単な作業です。

ワードプレスの場合、管理画面からファイルへ移動できます。

テーマによってファイルの場所が違いますのでそれぞれの編集のしかたを

Luxeritas 子テーマの編集から貼り付け

Luxeritasテーマの場合は 子テーマの編集画面から かんたんに編集することが出来ます。

キットコードの設定 - 子テーマの編集-headタグの編集画面

ダッシュボード画面から Luxeritas → 子テーマの編集 をクリック
子テーマの編集画面の Headタグ を開くと ヘッダーファイルが表示されます。

?>以降に書いてください。とあります。この画像でいうと 15行目からということになります。
コードを貼り付けましたら 左上の 保存 をクリックして完了です。

テーマファイルエディターから貼り付け

ルクセリタス以外のテーマで 編集画面がテーマファイルのみの場合、この方法でコードの記述を行います。

キットコードの設定 - テーマの編集画面-header.php-の表示のしかた

管理画面から 外観 → テーマファイルエディター をクリック 編集するテーマを選択します。

テーマヘッダー header.php に記述していきますが 子テーマを利用されている場合 add-header.php 
子テーマなしのテーマを利用されている場合 テーマヘッダー( header.php ) を探します。

キットコードの設定 - テーマの編集画面-header.php-に記述1

<!DOCTYPE html>という宣言から始まるコードが表示されています。

43行目あたりに <head> というコードがあります。
この <head> から次の </head> までの間に先ほどのキットコードを貼り付けます。

キットコードの設定 - テーマの編集画面-header.php-の記述2

179項目あたりに </head> がありました。この手前あたりに貼っておくと
後から編集したい場合なども覚えやすく探しやすいです。

テーマのバージョンなどにより</head> のコードが表示される行目が変わりますので気を付けて探してみてください。

これで設定は完了しましたので サイト内で使用することができます。
Font Awesomeアイコンの使いかたについては こちらを参考にお願いします。

Font Awesome 管理画面 – Your Account –

Font Awesome 管理画面 アカウントナビを開く

Font Awesome にサインイン したら アカウント画面に移動します。
右上の アイコンをクリックして頂くと アカウントナビ を表示することができます。

キットコードの再表示

キットコードは 画面トップのナビゲーションメニュー、 Kits からも開くことができます。

この画面から いつでもキットコードをコピーすることができます。

プラグインを使った Font Awesome

ワードプレスでは キットコードを使わず プラグインを使用することでアイコンを使用することもできます。

プラグインの新規追加から Font Awesome を検索
プラグインの新規追加 - Font Awesome 画面

インストールしましたら 有効をクリックします。

Font Awesomeの設定画面

設定画面は プラグインの画面にある setting をクリックするか 画面左のメニュー一覧から
設定 → Font Awesome をクリックすると Font Awesomeの設定画面へ移動できます。

プラグイン Font Awesome の設定画面 -  バージョンの確認と変更

この画面で現在のバージョンなどを確認・変更することができます。

キットコードとプラグインの違い

プラグインを数多く利用する場合は サイトの 動作が遅くなってしまうというデメリットがあります。

ただ、ルクセリタスのテーマで クラッシクエディタを使用している場合、
エディタ画面から簡単にアイコンを呼び出すことができます。

ルクセリタスで投稿画面から簡単にアイコンが呼び出せる!

Luxeritasでは Font Awesomeのプラグインを使用することで投稿画面上に Font Awesomeのボタンが表示され
ここから簡単にアイコンの検索、投稿画面への表示ができます!

Luxeritas 投稿の編集画面 - Font Awesome のプラグイン使用でできる機能

検索に関しては 事前に Font Awesomeのサイトからアイコンの検索が必要な場合もあります。

テキスト画面とビジュアル画面での Font AwesomeのHTMLコードの表示イメージ

通常、アイコンのHTMLコードはテキスト画面では表示されていますが
ビジュアル画面では表示されていなくて作業がしづらい、というマイナスイメージがありました。

ルクセリタスのFont Awesomeボタンから呼び出したコードの表示イメージ

この Font Awesomeを使用することでビジュアル画面でも独自のコードが表示され
このコードに対して 色を指定したりもできるのでかなり簡単にアイコンの設定ができるようになります!

多くアイコンを使用するような記事を作成する方などは プラグイン使用は かなりメリットがありそうです。