Font Awesome明日から簡単に表示させることが出来る。
ブログの中で目印のアイコンを表示させたい。
文章の先頭にチェックマークがあれば分かり易くなるのに……。 なんて思った事ありませんか。
ブログを運営していると投稿記事やサイトの構築にアイコンを導入したくなります。
どうやって表示させるのと疑問に思った事があるでしょう。SNSやtwitter(X)では良く見かけますよね。
WordPressでも表示出来るのですが、Font Awesomeの設定が初心者には難しいです。また、挿入の仕方さえ分かりませんよね。せっかくFont Awesomeのアカウントを取得してもそこから行き詰まってしまいます。
でも大丈夫今夜にはTEST表示出来、明日から使えるようになります。
Font Awesomeとは、Webサイトにアイコンフォントを簡単に表示させることができるWEBサービスです。無料・有料とありますが先ず無料版でも利用できるアイコンフォントは多くあるので、まずは本記事で無料のアイコンを使ってみましょう。
提供されているアイコンフォントは商用利用可能となっていますので、個人開発されているWebサイトやブログに導入できます！
また、Font Awesomeのアイコンフォントはサイズ・色の変更ができるだけでなく、サイズを大きくしても画質が悪くならないといったメリットがあります。
簡単な導入と画像とポイントを分かりやすく説明して行きます。
Font Awesome」プラグインの導入方法
簡単に導入。Font Awesomeのアカウントでは無くプラグインを使います。
テーマエディター、header.phpにコードを貼らずに済むので簡単です。
Font AwesomeはWordPress公式プラグインなので、「WordPress管理画面 > プラグイン > 新規追加」から簡単にインストールできます。
右側のキーワード検索テキストボックスで「 Font Awesome 」と検索するとFont Awesomeが表示されますので、「今すぐインストール」をクリックし、有効化します。
インストール済みプラグイン一覧にFont Awesome が表示されていればインストール完了です。初期設定など行わずにそのまま使用が可能です。
「Font Awesome」プラグインの設定方法
このプラグインは設定しなくても使うことができます。初めての方は飛んでも大丈夫です。
「Font Awesome」プラグインの設定画面
Font Awesomeの設定は、「WordPress管理画面 > Font Awesome」から入力します。
もしくはインストール済みプラグインFont Awesomeに設定があります。
✓How are you using Font Awesome
アイコンを自分のサーバーにアップロードして使う場合は、「Use A Kit」に変更してください。今回は「Use CDN」のままでOKです！
・Use A Kit … アイコンを自分のサーバーにアップロードして使う方法
・Use CDN … Font Awesomeに登録されたファイルを参照する方法（初期値）
CDNとは、「Content Delivery Network」の略称です。
Font Awesomeアイコンは、Font Awesome のサーバーから直接配信されています。アイコンデータの配布元（どっちにあるデータを使っているのか）が変わるだけで、パっと見は一緒です。
簡単なCDNで紹介です。Use A Kitは設定が違います。
✓Icons
Freeは無料、Proは有料です。Proは、2023年8月時点では初年度$99、２年目以降$99となっています。無料でも1,600くらいあるので十分ですが、ちょっとデザインが良いのはやはり有料の方が多いです。
✓Technology
これも基本的に「Web Font」のままで構いません。
・SVG … 「Scalable Vector Graphics」バージョン５から導入された技術でJavaScriptを使用
・Web Font … バージョン４から引き続き使われている技術でCSSを使用
✓Version
バージョン５のマイナーバージョンを選択可能です。最新版（latest)で問題ありません。
✓Version 4 Compatibility
バージョン４との互換性の項目です。Onで問題ありません。
投稿記事に CDNアイコンを挿入してみましょう。
Font Awesome 公式サイトでアイコンを探す
https://fontawesome.com/icons?d=gallery
ログインすると
メールアドレスを入れてreturn、するとメールアドレスにFont Awesomeから通知がきます。
メールアドレスの確認だけです。英語なので分かりません(mm)。とりあえずメールはクイック。
下部のボタンでアイコンサイトに移動します。
まずは「目次」アイコンをさがします。検索窓に「list」と入力して、エンターキーを押します。すると「無料」アイコンで「目次」に関するアイコンが表示されます。検索窓は英語で入れて下さい。
PROと黄色で表示されている物は有料です。
アイコンの上（赤い四角部分）をクリックすることで、コード（<i>と</i>で囲まれたところ）を自動でコピーすることができます。別に保存しておくと再度アイコンサイトに行かなくて済みます。
投稿画面で挿入したい箇所に を置き、ビジュアルからテキストを選び、 のある位置にペースト。<i>と</i>の前後に半角スペースを入れると綺麗に揃いますよ。
プレビューで見てみると挿入されています。
TESTはうまくいったでしょうか。
「ホーム」にアイコンを追加してみよう
今度は、このサイトのヘッダーメニューにアイコンを追加してみます。追加前のメニューはこんな感じです。このホームメニューにアイコンを追加します！
Font Awesome 公式サイトでアイコンを探す
https://fontawesome.com/icons?d=gallery
まずは、Font Awesome公式サイトで必要なアイコン探しましょう！
またメールアドレスを入力、returnします。
上のリンクを、新しいタブで開いてください。開いたら、まず上部のメニューにある「Free」をクリックしましょう。無料アイコンに絞って表示させます。
「Home」アイコンを探す
まずは「Home」アイコンをさがします。検索窓に「Home」と入力して、エンターキーを押します。すると「無料」アイコンで「Home」に関するアイコンが表示されます。検索窓は英語で入れて下さい。
今回は、１つ目に表示されたアイコンにしましょう。選んだアイコンをクリックします。
いろいろ表示されますが、アイコンの上（赤い四角部分）をクリックすることで、コード（<i>と</i>で囲まれたところ）を自動でコピーすることができます。カラーで表示させたい場合、先にカラーを選びます。
<i class=”fa-solid fa-house-chimney” style=”color: #ff2600;”></i>
WordPress の「メニュー」を表示し、コードを追加する
「WordPress管理画面 > 外観 > メニュー」の順にクリックし、メニューの編集画面を表示させます。
①メニューを複数作っている場合は、「編集するメニューを選択」で、アイコンを追加したいメニューを選んでください。
②アイコンを追加したいメニュー項目の逆三角形（▼）をクリックします。
下の画像だと「ナビゲーションラベル」に「ホーム」と入力されています。ここに入力された文字が、実際のwebサイトのメニューに表示されます。
この「ホーム」の前に、コピーしたコードを貼り付けます。以下のようになります。
アイコンのコードと「ホーム」の間に、半角スペースを1つ入れると見栄えが良くなります。
ホームを表示させてみましょう！以下のようにアイコンが追加されているはずです！
他のメニューにもアイコンを追加してみましょう。
同じ操作で他のメニューにもアイコンを追加出来ますよ。
まとめ
今回はメニューを例に解説しましたが、例えば「見出し（<h2>、<h3>など）」や、サイドバーのウィジェットのタイトルなど、いろいろな場所でアイコンは活躍します。
１つ１つのアイコンは小さいのですが、要所に入れることでwebサイト全体を柔らかいイメージにしたり、大事な部分の強調、注意をうながすことなどができるようになります。
ただ一つ一つ作業しなければならないので、大事な所だけにしましょう。
使い過ぎはNG！適度に入れて、見やすいwebサイトを作りましょう！
お疲れ様でした。根を詰めた作業の後は、目のリフレッシュをしましょう。気持ち良くて寝落ちしないで下さい。
PR Eaimiuアイウォーマー amazon参考： 7,880円
