- webサイトのメニューや見出しを可愛く装飾したい！
- 記事の中でもかわいいアイコンを使いたい！
- 無料で使えるアイコンが欲しい！
上の「こんな方に読んで欲しい！」を見てください。「こんな方に～」の前に人型の絵がありますよね？ これが「アイコン」です。アイコンは「物事を簡単な絵柄で記号化して表現するもの」と言われています。webサイトで使うと、
これが「アイコン」です。
アイコンは「物事を簡単な絵柄で記号化して表現するもの」と言われています。webサイトで使うと、
- 単純にかわいい
- そこに何があるか、何が書かれているか
- クリック（タップ）するとどのような内容が表示されるか
などが直観的にわかり、webサイトが見やすくなります。
例えば、「 」このマークは、直観的にタブレットやスマホのメニューが表示されることがわかりますよね？
また、例えば見出しにアイコンを入れると、（使うアイコンによりますが）全体的にやわらかいイメージになり、記事が読みやすくなります。
今回の記事は、こうしたアイコンを自由に使うことができるようになるプラグイン「Font Awesome」を徹底解説します！
今回の記事は、こうしたアイコンを自由に使うことができるようになるプラグイン「Font Awesome」を徹底解説します！Font Awesome は無理やりカタカナで書けば「フォント オーサム」となります。「Awesome」は「素晴らしい」とか「印象的な」というような意味ですね。
「Font Awesome」のメリット
「Font Awesome」の初回リリースは2012年で、ユーザー数は世界的に見てもかなり多く、日本人が作成したwebサイトでもよく使われています。
そんなにたくさんの人が使っていたら、かぶらない？
アイコンの役目は「直観的にわかる」ことなので、みんなが同じ意味（意図）で使っていればいるほど、わかりやすくなるわけです。そういう意味ではかぶった方が良いのです。
とは言え「少しはオリジナリティを出したい！」という方もいるでしょう。2020年6月時点では、無料アイコンが1,598、有料を含めると7,848ものアイコンが準備されていますので、好みのアイコンを探すこともできます。
Font Awesome を使うメリットとしては、
- 大量のアイコンが準備されている
- 年に数回、数十個単位で追加されている
- 読者が直観的に理解できるようになり、文章がより読みやすくなる
- WordPressでは、プラグインをインストールするだけでOK
などがあります。
今回はhtmlを編集しないで済むプラグインを使いますが、実はheadタグ（<head>〜</head>）に次の1行を追加するだけでプラグインは不要になります。
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
プラグインを使う方法でもどちらでもOKです！
「Font Awesome」プラグインの導入方法
Font AwesomeはWordPress公式プラグインなので、「WordPress管理画面 > プラグイン > 新規追加」から簡単にインストールできます。
右側のキーワード検索テキストボックスで「 Font Awesome 」と検索すると１番目にヒットしますので、「今すぐインストール」をクリックし、有効化します。
インストール済みプラグイン一覧にFont Awesome が表示されていればインストール完了です。初期設定など行わずにそのまま使用が可能です。
「Font Awesome」プラグインの設定方法
このプラグインは設定しなくても使うことができます。初めての方は「「Font Awesome」プラグインの使い方」に飛んでください。
「Font Awesome」プラグインの設定画面
Font Awesomeの設定は、「WordPress管理画面 > 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にしておきましょう。
Icons
Freeは無料、Proは有料です。Proは、2020年6月時点では初年度$79、２年目以降$99となっています。無料でも1,600くらいあるので十分ですが、ちょっとデザインが良いのはやはり有料の方が多いです。
Technology
これも基本的に「Web Font」のままで構いません。
- SVG … 「Scalable Vector Graphics」バージョン５から導入された技術でJavaScriptを使用
- Web Font … バージョン４から引き続き使われている技術でCSSを使用
Version
バージョン５のマイナーバージョンを選択可能です。最新版（latest)で問題ありません。
Version 4 Compatibility
バージョン４との互換性の項目です。Onで問題ありません。
「Font Awesome」プラグインの使い方
今回は、このインターネットビジネスラボのメニューにアイコンを追加してみます。追加前のメニューはこんな感じです。このメニューにアイコンを追加します！
「ホーム」にアイコンを追加してみよう
Font Awesome 公式サイトでアイコンを探す
まずは、Font Awesome公式サイトで必要なアイコン探しましょう！
上のリンクを、新しいタブで開いてください。開いたら、まず左側のメニューにある「Free」をクリックしましょう。無料アイコンに絞って表示させます。
「Home」アイコンを探す
まずは「Home」アイコンをさがします。検索窓に「Home」と入力して、エンターキーを押します。すると「無料」アイコンで「Home」に関するアイコンが表示されます。
今回は、１つ目に表示されたアイコンにしましょう。選んだアイコンをクリックします。
いろいろ表示されますが、アイコンの上（赤い四角部分）をクリックすることで、コード（<i>と</i>で囲まれたところ）を自動でコピーすることができます。
WordPress の「メニュー」を表示し、コードを追加する
「WordPress管理画面 > 外観 > メニュー」の順にクリックし、メニューの編集画面を表示させます。
①メニューを複数作っている場合は、「編集するメニューを選択」で、アイコンを追加したいメニューを選んでください。
②アイコンを追加したいメニュー項目の逆三角形（▼）をクリックします。
下の画像だと「ナビゲーションラベル」に「ホーム」と入力されています。ここに入力された文字が、実際のwebサイトのメニューに表示されます。
この「ホーム」の前に、コピーしたコードを貼り付けます。以下のようになります。
<i class="fas fa-home"></i> ホーム
アイコンのコードと「ホーム」の間に、半角スペースを1つ入れると見栄えが良くなります。本当はCSSで設定すべきですが、今回はhtmlもCSSも変更せずに作りこんでいきます。
ホームを表示させてみましょう！以下のようにアイコンが追加されているはずです！
他のメニューにもアイコンを追加してみよう
同じ操作で他のメニューにもアイコンを追加してみます。
「起業」メニュー
「起業」は英語で「Start-up」ですが、検索しても出てこなかったので、よく使われている「ロケット」にします。
「インターネット戦略」メニュー
「インターネット戦略」は英語で「Internet」「strategy」ですね。ですが、無難にパソコンアイコンを使います。
「WordPress」メニュー
「WordPress」はそのままでOKですね。
「お問い合わせ」メニュー
「お問い合わせ」は英語で「contact」ですが、良いアイコンが出てこなかったので、「mail」で調べて決めました。
できあがったメニュー
インターネットビジネスラボのメニューにアイコンを追加しました！
まとめ
今回はメニューを例に解説しましたが、例えば「見出し（<h2>、<h3>など）」や、サイドバーのウィジェットのタイトルなど、いろいろな場所でアイコンは活躍します。
もしCSSが扱えるのであれば、特に見出しであればCSS側で入れ込んでしまえれば手間がなくて良いですね！
１つ１つのアイコンは小さいのですが、要所に入れることでwebサイト全体を柔らかいイメージにしたり、大事な部分の強調、注意をうながすことなどができるようになります。
使い過ぎはNG！適度に入れて、見やすいwebサイトを作りましょう！