ブログ画像・動画 ワードプレス

ヘッダーメニューにWEBアイコンを使うための方法を2つ解説【アフィンガー6】

WEBアイコン

「あれ? アフィンガー6に変えてから、ヘッダーメニューに表示させていたWEBアイコンが消えてる……」

「え、なんで? どうすればいいの?」

という悩みに答えます。

実際に僕もこの問題に直面してけっこう悩みました。

一応「ACTION(AFFINGER6)」のマニュアルにはFont Awesomeについて書いてあるんですが、それでも「え、どういうこと?」ってなったからです。

そこで解決策を調べまくりました。

結論からいうと、ヘッダーメニューにWEBアイコンを表示させる方法は2つあります。

  1. アフィンガー管理メニューの設定を変える
  2. Font Awesome5を使えるようにする

今回は、この2つの方法の解説と手順について書いていきたいと思います。

使えない原因は

今まで使えていたWEBアイコンが使えなくなっている原因は単純に、FontAwesomeIcons4.7.0の読み込みがオフになっているからです。

なぜこのような仕様になっているのかというと、アフィンガー6は「FontAwesome4.7」ではなく、「FontAwesome5」の仕様を前提にしているというのがあります。

新しいバージョンの「FontAwesome5」のほうがWEBアイコンの種類がたくさんあるので、さまざまなサイトテーマにあったアイコンを使えると考えているんでしょうね。

「え~、じゃあ今まで使っていたWEBアイコンは使えないってこと?」

という声が聞こえてきそうですが、「FontAwesome4.7」を完全に使えなくなるわけではないので安心してください(手順については「手順1」で解説します。)。

「今までと同じ「FontAwesome4.7」が使えればいいです」

という方は「手順1」に進んでください。

「いや、どうせならバージョンアップした『FontAwesome5』を使ってみたい!」

という方は「手順2」に進んでください。

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

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

という少しめんどくさい手順が必要です。

ACTION MANUALを見ても「FontAwesome5」へのアカウント登録については書いてなかったので、どうやればいいのかわからない人は多いと思います(僕もはじめは戸惑いました)。

  • まずは「FontAwesome4.7」を使えるようにする方法
  • 次に「FontAwesome5」を使えるようにする方法
  • 最後に、実際に使えるかどうかを確認する

という流れで詳しく解説していきます。

<手順1>「FontAwesome4.7」を使えるようにする

まずは、ダッシュボードの左メニューにある「AFFINGER管理」を開きます。

次に「その他」を開き、「FontAwesome4.7.0の読み込み」にチェックを入れ、「Save」をクリックすれば完了です。

AFFINGER6にアップデートしていれば、ここのチェックが外れているはず。

手順はたったこれだけです。

これで「FontAwesome4.7」が表示されるようになっているはずです。

続いて「FontAwesome5」を使えるようにする手順を解説します。

<手順2>「FontAwesome5」を使えるようにする

「FontAwesome5」を使えるようにするために必要なのは、

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

この2ステップです。

アカウント登録する

まず、「Font Awesome」のトップページを開きます。

https://fontawesome.com/

次に「Start for Free」(無料ではじめる)をクリック。

赤枠で囲ったところに メールアドレスを入力し、「Create & Use This Kit →」をクリック。

「What's the name of your project or site?」←直訳すると、「あなたのプロジェクトやサイトの名前は何ですか?」ですが、ここはメールアドレスを入力すればOKです。

「Check Your Email」と表示されているので、先ほど入力したメールアドレスの受信箱を確認します。

「Confirm Your Font Awesome Account Email Address(FontAwesomeアカウントのメールアドレスを確認する)」という件名でメールが届いているはずです。

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

パスワードを設定するページに飛ぶので、Font Awesomeのアカウント用パスワードを入力、確認のため下にも同じパスワードを入力し、「Set Password & Continue →」(パスワードを設定して続行)をクリック。

名前を登録します。

とりあえず、(名前)と(苗字)だけ入力して「All set. Let's go! →」をクリック。

は「Unknown」ままで、は空白のままでも大丈夫でした。

これでアカウント登録は完了です。

コードを設定する

まずは「Font Awesome」のトップページを開きます。

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

するとサイドメニューが開くので、「Font Awesome CDN」をクリック。

次にコードが表示されるので、右下にあるコピーアイコンをクリック。

もしくはコードを選択してマウスを右クリックし、コピーを選択する。

アフィンガー管理に戻ります。

左メニューにある「その他」をクリック。

「上級者向け」の中に「コードの出力」という項目があります。

赤で囲んだ「headに出力するコード」の欄に、先ほどコピーしたコードを貼り付けて「Save」をクリック。

これですべての手順は完了しました。

WEBアイコンが使えるかを確認する

実際にWEBアイコンが使えるようになっているのかを確認したいと思います。

「Font Awesome」のトップページを開き、上のメニューにある「Icons」をクリック。

アイコンのページが開きます。

この状態だと有料アイコンも一緒に表示されているので、数が多すぎるし見にくい!

これをスッキリさせるために、フリーのアイコンだけを表示させます。

左メニューにある「Free」をクリック。

するとフリーアイコンだけが表示されてスッキリしました♪

とりあえず、ワードプレスのアイコンを設定しようと思います。

アイコンはローマ字順に並んでいるので、ワードプレス(WordPress)は下のほうになりますよね。

スクロールするのがめんどくさいので、検索窓に「word」と入力して表示させましょう。

メニューアイコンいしたい方のアイコンをクリックします。

赤で囲んだコード<i class="fab fa-wordpress"></i>をクリックするとコピーされます。

次に、アフィンガーのメニュー設定を開きます。

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

形としては、「WEBアイコンのコード」+「メニュー名」です。

実際にアイコンが表示されていれば、無事完了です♪

お疲れさまでした(*^^*)

まとめ

今回は、メニューにWEBアイコンを表示させる方法について解説しました。

「Font Awesome」のHPはぜんぶ英語だし、アカウント登録がめんどくさいですけど、手順さえわかれば簡単だったと思います。

アフィンガー5のときは大丈夫だったのに、アフィンガー6にアップデートしたとたん表示されなくなったよ~~~(ぴえーーーん ( ノД`)シクシク…)

という方は一度この記事で解説した方法を試してみてください。

  • この記事を書いた人
  • 最新記事

KAZU

管理人「KAZU」

人間のメカニズムを追求するのが大好きなアラフォー。

楽するためにしか努力できないタイプ。

いろんなツールを試すのが好き。

-ブログ画像・動画, ワードプレス