<>

プラグインなし!Font Awesome (フォントオーサム) アイコンを ルクセリタスで使う方法

Webサイトの いろんなところで使用されている アイコン。
 Font Awesome パンくずリストに使用されているアイコン← 例えばこちら 記事上にあります パンくずリンク横のアイコンや メタ情報など
そのアイコンの中でも 世界中で利用されているのが Font Awesome (フォントオーサム)なのです。

Font Awesome は アイコンの ツールキットで 無料のものだけでも1500点以上あり
サイトのイメージに合うアイコンを見つけることができます。

代表的なアイコンはこんな感じ。こちらは 無料のものを集めてみました。

Font Awesome サンプルアイコン-energyエネルギーの画像
energy エネルギー
Font Awesome サンプルアイコン-インターフェースの画像-
インターフェース
Font Awesome サンプルアイコン-インターフェースの画像-
インターフェース 2
Font Awesome サンプルアイコン-スピナーの画像-
スピナー

ほかにも 一度は見たことのある アイコンがたくさんあります。
今回は、この Font Awesomeの 登録から 初期設定のしかたなどを記事にまとめてみます。

Font Awesome

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

Font Awesome サイトの登録と設定

公式サイトはこちら → Font Awesome 公式サイト
Font Awesome 公式サイトの画面
画面左の Start for Free をクリックすると
↓このようなメールアドレスを入力する画面が表示されます。
 Font Awesome メールアドレス登録画面

翻訳すると メールアドレスを入力して 最初のキット を作成してください。
と書かれています。キットコードとは 簡単に言うと
wordpressサイトと Font Awesome を紐付けするコードになります。

作成したキットコードを WordPress テーマの指定された場所に書き込むことで
かんたんなアイコンのコード だけで サイト内にアイコンを表示することができるのです。

キットコードの作成

それでは メールアドレスの入力をし 右の キットコードを送信します。

Font Awesome- -作成された キットコードと編集画面に貼り付けるコード

作成されたキットコードの画面になります。
<script src から始まるこのコードを コピーし WordPressサイトのファイル内に貼り付けます。

キットコードの貼り付け

キットコードを貼り付けるのは WordPress テーマの Header という場所になります。

外観 → テーマエディター もしくは Luxeritasテーマの場合は
子テーマの編集画面から かんたんに編集することが出来ます。

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

ダッシュボード画面から Luxeritas → 子テーマの編集 をクリック

ダッシュボード画面から子テーマの編集

子テーマの編集-headタグの編集画面

子テーマの編集画面の Headタグ を開くと ヘッダーファイルが表示されます。

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

テーマエディターから貼り付ける

管理画面から 外観 → テーマエディター をクリック
テーマファイルの一覧がありますので header.php というファイルを探します。

テーマの編集画面-header.php-の表示のしかた

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

Font-Awesome-キットの記述のしかたの画像

<!DOCTYPE html> という宣言の下にある <html> のあとに <head> の項目があります。
貼り付けるのは <head> ~ </head> の間ですが 項目がたくさんありすぎて 探すのが大変ですね。
私の場合、170項目目に </head> がありました。この手前に貼ると後からも探しやすいと思います。

注意

上の画像はコードを省略しています。

子テーマがある場合は 子テーマに記述することをお勧めしますが

親テーマの場合、コードを記述する場所を間違えないように気を付けてください‼

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

Font Awesome 管理画面 – Your Account –

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

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

キットコードの再表示

 Font Awesome アカウント管理画面からキット画面を表示

キットコード を再表示させたい場合、こちらの Kits をクリック
Font-Awesome-アカウントナビ-Your-Kits画面

キットコードをクリックすると 先ほどの 貼り付け用の HTMLコード が表示されます。

 WordPress  プラグインを利用する場合

プラグインでの利用のしかたについても 少しふれておきます。
こちらは プラグインを インストールするだけですので とても簡単です。

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

インストールしましたら有効をクリックして すぐに利用することができます。

Font-Awesome-プラグイン画面

バージョンなどの セッティングをする場合はこちらをクリックします。

Font-Awesome-プラグイン-settings画面

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

Font-Awesome-プラグイン-バージョン-4.0.0-rc20-

こちらは 最新のバージョンへ更新した後の画面 スタイリッシュになりました!!

バージョンの変更は どちらも Version の項目でバージョンの一覧が表示されます。

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

プラグインの利用はかんたんなのですが、プラグインの入れすぎは
動作が遅くなってしまうというデメリットもあります。

ただ、バージョンアップなどが かんたんにできるので その点では かなり便利だと思います。

また、サイトのテーマ・バージョン・Font Awesome のバージョンによって
CSSカスタマイズで 疑似要素  beforeを使用する場合など、
アイコンによっては プラグインでしか表示できない 事もありますので その際は いろいろ試してみてくださいね。

以上、プラグインなし!Font Awesome (フォントオーサム) アイコンを ルクセリタスで使う方法 でした!