公開日:2017年9月7日PlusersWordPressでテーマを作成するときに、「様々なアイコンを自由に使えたら・・・」と思うことが多々ありますが、FontAwesomeのwebフォントを使用することで簡単にWordPress内でアイコンを使用することができます。今回は、WordPressでのFontAwesomeの実装~使い方までをご紹介します。文字列として呼び出す場合FontAwesomeとはFontAwesomeとは、Webサイトでよく利用されるアイコンをWebフォントという文字として使用することができるようになるツールです。FontAwesomeのアイコンは、画像ではなく文字として扱われるため、サイズやカラーなどもCSSで自由に設定することができます。その手軽さから、世界中の約4000万ものWebサイトが使用している大変すぐれたツールです。完全無料で商用利用も可能なので安心して利用できます。上の画像のようなアイコンが675種類使用できます。WordPressでFontAwesomeを使えるよう設定するWordPressでFontAwesomeを使用できるようにするには、header.phpのheadタグ内にスタイルシートと同じように設定する必要があります。FontAwesomeは、CDNを利用する方法とダウンロードして使う方法の2種類があります。両方の方法についてご紹介しますのでどちらか選択して設定してください。CDNで利用する方法CDNとは、コンテンツデリバリーネットワークの略でインターネット経由で情報を表示します。CDNを利用することで、サーバーへの接続を分散させることができるのでサーバーを安定させることができ、サイトの表示速度も向上させることができます。CDNで利用するためには、専用のリンクをheadタグに書き込みます。rel="stylesheet">上記のコードをheadタグ内のスタイルシートを呼び出すコードの下にでも記述すれば設定完了です。この一行を追加するだけで利用できるようになります。ダウンロードして利用する方法ダウンロード版は、CDNのサーバーダウンやソース変更が行われた場合でも気にすることなく使用できるのでエラーが起こりにくいのが特徴です。FontAwesomeのファイルダウンロードは、公式サイトより行います。http://fontawesome.io/上記のサイトにアクセスしてダウンロードを行いましょう。アクセスして『Download』からダウンロードできます。Awesome』の方を選択しましょう。Awesome』は、有料でオリジナルアイコンセットと作成する機能などが使える会員サービスになります。Zipファイル形式でダウンロードされるので解凍してください。解凍したらまずは不要なファイルを削除しましょう。上の画像のように『css』と『font』フォルダだけ残して他は削除しましょう。CSSフォルダ内の『font-awesome.min.css』も削除して問題ありません。不要なファイルの削除が終わったら、FontAwesomeのフォルダをテーマの任意の場所にアップロードしましょう。アップロードが完了したら、headタグ内にFontAwesomeを呼び出すコードを記述します。rel="stylesheet">私は、テーマフォルダ内にアップロード用の『add』という名前のフォルダを作成しているので下記のようにコードを入力しています。rel="stylesheet">phpでテンプレートフォルダまでのパスを呼び出し、その後にcssが記述されているところまでのパスを付け加えています。phpでテンプレートフォルダまでのパスを出力することで、テーマを変更したときに毎回記述を書き換える必要がなくなりますよ。以上で、FontAwesomeを使用するための設定は終了です。FontAwesomeの使い方FontAwesomeは、HTMLタグもしくは文字列のどちらかで呼び出すことができます。呼び出すためには、FontAwesome独自のコードを記述する必要がありますので公式サイトで使用したいアイコンを探してコードを参照しましょう。http://fontawesome.io/icons/上記のリンク先のサイトに使用できるアイコンの一覧があるので使用したいアイコンを探します。使用したいアイコンを探したら、クリックして詳細を表示しましょう。今回は、デモとして『user-circle』というアイコンで説明していきます。詳細画面の見方は、下画像をご確認ください。HTMLタグで呼び出す場合と文字列として呼び出す場合で参照するコードが違うので注意しましょう。それでは、それぞれの呼び出し方についてご説明していきます。HTMLタグで呼び出す場合htmlタグで呼び出すときはiタグを使って呼び出します。参照したコード"』で呼び出すことができます。このときに頭に『fa』をつけるのを忘れないようにして記述してください。CSSでデザインするときはiで指定することができます。2em;}普通の文字列と同じ扱いでカラーやサイズを変更することができますので、使用する場所に応じて設定しましょう。文字列として呼び出す場合は、実体参照で呼び出します。&\f2bd;参照ページのUnicode:の後の部分が文字コードになります。文字コードの前に『\』を付けて記述しましょう。通常の文字列として組込む場合は、実体参照として記述するため頭に『&』最後に『;』の記述を忘れずに付けましょう。文字列として挿入する場合はfont-familyをCSSで設定しなければアイコンとして表示されません。'FontAwesome';』と指定するようにしてください。こちらの場合はCSSで指定した箇所すべてがFontAwesomeと指定されてしまうので使いどころを選んでしまいますよね。何かのタグや要素の前・後にアイコンを表示したい場合はCSSだけでも要素を追加することができます。要素の前にFontAwesomeを表示させたい場合は下記のようなCSSを記述することで要素の前にアイコンが追加されます。""』の中にコードを追加しましょう。CSSで表示する場合も、コードの前に必ず『\』を記述してください。『&』と『;』は必要ありません。CSSで追加すると上の画像のように要素の前にCSSだけでアイコンを追加することができます。FontAwesomeに関する説明は以上です。使用するケースに合わせて、HTMLタグで呼び出すか文字列で呼び出すかを決めてアイコンを入れたい部分にコードを記述していきましょう。'FontAwesome';』を指定し忘れていたりと記述を忘れている場合が多いので、もう一度確認してみましょう。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。