「AFFINGER」ヘッダーメニューにWEBアイコン(Font Awesome)の表示方法を解説

2021年10月17日

 

WordPressテーマ「AFFINGER」のアップデートをしたら、ヘッダーメニューに表示させていたWEBアイコンが消えてしまった!

 

今回はこういった問題について、解決していこうと思います。

 

また、「AFFINGER」の編集においても、マニュアルに記載してある「Font Awesome」の設定方法などについても解説していきますので、参考にしてみてください。

 

ヘッダーメニューにWEBアイコンを表示させるだけで、かなりそれっぽいブログが出来上がります。

 

自分好みにカスタマイズしていきましょう!

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

「Font Awesome4.7」のWEBアイコンが使えなくなってしまった原因

今まで使えていたWEBアイコンが使えなくなってしまった原因は、「Font Awesome4.7」の設定読み込みがOFFになっていたからです。

 

原因となるのは「AFFINGER」のアップデートを行うことで、その設定が外れてしまっているケースが挙げられます。

 

解決策としては、

  • 「Font Awesome4.7」の設定を再度行う
  • 「Font Awesome5.0」を使用する

 

以上の方法があります。

 

なぜ、このような方法になるかというと、「AFFINGER6」では、「FontAwesome4.7」から「FontAwesome5」を使用していくことが前提になっているからです。

 

新しい「FontAwesome5」では、WEBアイコンの種類もたくさんあり、幅広くサイトのカスタマイズが行えるので、どんどん使っていくことをおすすめします。

 

「Font Awesome4.7」を使えるようにする設定について

それでは、従来使用していた「Font Awesome4.7」を再び使えるようにする設定を行なっていきます。

 

WordPress管理者画面より、「AFFINGER管理」→「その他」を選択します。

 

 

設定画面に移動したら、「その他の設定」の項目より、「FontAwesomeIcons4.7.0の読み込み」にチェックを入れて、「Save」をクリックするだけで、設定完了です。

AFFINGER6をアップデートの際に、ここのチェックが外れてしまっているかと思いますので、確認してみましょう!

 

 

次は「FontAwesome5」の設定を行なっていきます!

 

「Font Awesome5.0」を使えるようにする設定について

「FontAwesome5」を使えるようにするためには、

 

ポイント

  1. Font Awesome」のアカウント登録
  2. Font Awesome CODE」コードをheadに貼り付ける

以上の2ステップが必要となってきます。作業自体はそこまで難しいものではありません。

 

「Font Awesome」のアカウントの登録

まず初めに「Font Awesome」のトップページを開きます、登録画面に進んでいきましょう。

 

 https://fontawesome.com/ よりサイト移動、「Start for Free」を選択してください。

 

 

次に赤枠で囲ったところに メールアドレスを入力しましょう。メールアドレスが入力できたら「Create & Use This Kit」を選択して次に進みましょう。

 

 

 

「Check Your Email」と表示されます。先ほど登録したメールアドレスに登録が行えている場合には、メールが送られているので確認します。

 

 

メールを開き「Click to Confirm Your Email Address + Set Things Up」をクリックすると、設定画面へ移動できます。

 

 

パスワードを設定するページに移動します。「Font Awesome」のアカウント用パスワード設定するため、「New Password」と「Confirm New Password」を入力しましょう。

 

これはどちらも同じ自分が設定したい新しいパスワードを入力しましょう!

 

 

続いて、名前の登録を行います。①の「名前」と②「苗字」だけ入力OKです。入力が完了したら、「All set. Let's go!」を選択しましょう!

 

③、④は空白のままでも大丈夫です!

 

 

以上で、アカウント登録は完了です。引き続きコードの設定を行いましょう!

 

コードの設定を行う

まずは「Font Awesome」にアクセスし、トップページへ移動してください。

 

次に、右上にある人型のアイコンをクリック。

 

 

サイドメニューから、「Font Awesome CDN」を選択し、コードの確認画面を開きましょう。

 

 

以下の方法でコードのコピーを行いましょう。

  • コードが表示されている右下にあるコピーアイコンをクリック

  • コードを選択してコピーをする

 

 

コードのコピーが行えたら、WordPress管理者画面に戻り、「AFFINGER管理」→「その他」にて、設定画面に移動します。

 

 

上級者向け」の項目にて、「コードの出力」よりコードの記入項目があるので、そこに先ほどコピーしたコードを貼り付けます。

 

貼り付けが行えたら、「Save」をクリックしましょう。これで、「Font Awesome5」を扱えるようになります。

 

 

これですべての作業完了です!

 

WEBアイコンの使用方法について

それでは早速WEBアイコンが使えるようになったので、使用方法について解説していきます。

 

「Font Awesome」のトップ画面より上にあるメニュー「Icons」を選択しましょう。

 

 

有料登録は行なっていないため、「Free」にある項目のアイコン使用になります。有料アイコンも合わせるとかなりの数のアイコンが存在し、カスタマイズのしがいがありますね!!

 

左の「Free」のボタンを選択すると無料のみのアイコンに絞ることができるので、そこから選択すると選びやすくなります

 

 

使用したいアイコンを選択すると、以下のような画面に。

 

あとはアイコン上(赤枠の項目のコード)をコピーしましょう。

 

 

アイコンのコードのコピーが行えたら、WordPressの管理画面に戻ります。

 

WEBアイコンを表示させたい「メニュー」を選択し、「ナビゲーションラベル」に、先ほどコピーしたコードを貼り付けます。

 

 

以上の作業にて、以下のようなヘッダーメニューなどの文字横にWEBアイコンの表示が行えます。

 

 

以上の作業で、WEBアイコンの作業の全行程終了になります。お疲れ様でした!

 

WEBアイコンを使用するだけで、グッと見え方が変わりますね!

 

以上。ヘッダーメニューにWEBアイコンの設定方法でした。ヘッダーメニューだけでなく、様々な要素に応用可能なものになっているので、あとは自分の好きなところに使ってみてください。

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-, ,