はじめに
今回はWordPressにおいて、アイコンフォントを手軽に使用する方法を紹介します。
また、テーマにはおなじみの「Cocoon」を利用しています。
アイコンフォントとは当ブログのトップメニューで使用しております。
以下のようなものになります。
表示例
今回、アイコンフォントを設定する際「FontAwesome5」というサービスを利用します。
「FontAwesome5」では無料から利用できるアイコンも多数用意されており、ライセンスにより商用利用も許されています。
上で示したのはほんの一部ですが、これらのアイコンはシンプルかつ分かりやすいデザインとなっています。
ちなみにAwesomeとは日本語で「驚くような」「素晴らしい」と言う意味があります。
使い方次第でサイトやブログのビジュアルが大幅にグレードアップすること間違いありません。
この記事で基本的な利用法だけでも覚えて、いざと言うときに役立てていただければ幸いです。
前準備
FontAwesomeのバージョンの関係で、WordPress側で確認しておくことがあります。
確認する箇所は以下に示す画面になります。
サイトアイコンフォント設定
まずWordPressの編集画面の左の黒い帯より「Cocoon設定」を選択します。
すると、右側のスペースにタブが表示されるので、その中から左上の「全体」を選択します。
そして、下にスクロールしていくと以下のような「サイトアイコンフォント」という項目が見つかると思います。
「Font Awesome 4」と「Font Awesome 5」がラジオボタンで選択できるようになっています。
今回はバージョンが新しい方の「Font Awesome5」を利用していきますので、こちらのラジオボタンを選択します。
手順
それでは、前準備で「FontAwesome5」を使用するための設定を終えたら、フォントアイコンのコードを導入していきます。
本番はここからになります。
難しくはないので、是非軽い気持ちでご覧ください。
「FontAwesome5」の公式サイト
サイトでアイコンフォントを利用する際は「FontAwesome5」のWebサイトよりHTMLコードをコピーしてくる必要があります。
「FontAwesome5」の公式サイトは下のリンクより(別ウィンドウで開きます)↓
FontAwesome5のサイトのホームページは以下のようになっています。
画面の左上に検索フォームが現れているはずです。
ここに利用したいアイコンのキーワードを入れて検索するとそれに沿ったアイコンを一覧で表示してくれます。
アイコンの検索の仕方
今回は試しにホーム画面へのリンクに使用するアイコンを探す想定で「home」と入力します。
キーワード「home」で検索すると以下のように検索結果が表示されます。
「home」では552件ヒットしました(2022/01/29現在)。
今回はフリープランなので利用できるアイコンが限られていますが、基本的なデザインは最低限利用できるようです。
ざっと見たところ。キーワードごとにそれぞれ無料で利用できる数が一定数ある感じです。
ですので、有料でないと全く利用できない特定のキーワードが存在するようには見受けられません。
つまり、有料プランでは利用できるデザインのバリエーションが増えるという認識です。
HTMLコードのコピー
検索一覧より利用したいアイコンをクリックすると以下のような画面に移ります。
デフォルトで背景が無地、アイコンカラーが黒の状態になっています。
なので、特にこの画面では何も変更せずに右下の「Start Using This Icon」をクリックします。
すると、以下のようにHTMLコードが表示されますので、これをコピーします。
WordPressへコードを貼り付ける
今回は「home」のアイコンのHTMLコードをコピーしたのでこれを試しにトップメニューに反映させていきます。
WordPressの編集画面に戻ります。
左の黒帯のメニューから「外観」→「メニュー」の順に選択します。
すると、右側にメニューが現れますので、下の図にも示したように、編集したい項目の中から「逆矢印」をクリックします。
すると編集画面が下に伸びてくるので、「ナビゲーションラベル」の欄に先ほど「FontAwesome5」のサイトでコピーしたHTMLコードを貼り付けます。
以上で一通りの作業は終了です。
一番最初に示した画像と同じですが、以下のようにHTMLコードを貼り付けた部分にアイコンが表示されるはずです。
もちろんこのアイコンを表示できるのがトップメニューだけではありません。
サイドバーや記事中にも取り入れることができます。
お好みに合わせて、サイトのカスタマイズをしてみてください。
