AFFINGER6でFont Awesomeのアイコンを使いたいんだけど、設定方法を教えてほしい。
元々AFFINGER6でFont Awesomeのアイコンを使ってたんだけど、アイコンが表示されなくなっちゃった。。
こんなお悩みを解決します！
本記事はこんな方向け
- Font Awesomeの登録方法を知りたい
- AFFINGER6でFont Awesomeのアイコンを使いたい
- 元々AFFINGER6でFont Awesomeのアイコンを使ってたのに、アイコンが表示されなくなった
＼当ブログテーマ／
もくじ
そもそもFont Awesomeとは？
Font Awesomeとは、Webサイトでアイコンのコードを取得することができるサービスです。
有料版もありますが、無料版でも1000種類以上のアイコンがあります。
【無料版】Font Awesomeのアカウント作成方法
Font Awesomeはアカウントを作成しないと使えないので、まずはアカウントを作成しましょう。
今回は無料版のFont Awesomeのアカウント作成方法を解説します。
▼ここから手順
まずはFont Awesomeの公式ページにアクセスしましょう。
アクセスができたら、「Start for Free」をクリックします。
続いて、下記赤枠①にメールアドレスを入力し、「Send Kit Code」をクリックします。
すると入力したアドレス宛に以下のようなメールが届くので、「Confirm Your Email Address」をクリックします。
以下の画面でパスワードを入力し、「Send Password &Continue」をクリックします。
以下の画面に遷移するので、以下のような操作でアカウント作成を完了させましょう。
①：必須（名前を入力）
②：必須（苗字を入力）
③④：空欄でOK
これでアカウント作成は完了です！
AFFINGER6とFont Awesome6を連携する
それではAFFINGER6とFont Awesome6を連携して使えるようにしていきましょう。
まず、Font Awesomeにログインができていない方はこちらからアクセスしましょう。
ホーム画面にて、「Your Kits」をクリックします。
続いて、以下の赤枠の部分をクリックします。
以下の画面で赤枠の部分をクリックし、kitsコードをコピーしましょう。
kitsコードをコピーしたら、WordPress管理画面に張り付けていきます。
WordPress管理画面で、
「AFFINGER管理」→「その他」
をクリックします。
上級者向け項目で以下の操作を行いましょう。
①：「headに出力するコード」に、先ほどコピーしたkitsコードを貼り付け
②：「Save」クリック
▼『閲覧できません（Forbidden access）』というエラーが出た時
閲覧できませんエラーが出た時
kitsコードを張り付けて「Save」をクリックすると、『閲覧できません（Forbidden access）』というエラーが表示されるケースがあります。
実際に僕も表示されて焦りました…
原因として、ConohaWINGのセキュリティ装置が作動していることが考えられます。
僕の場合は以下の方法で解決したので、もし同じエラーが発生した方は試してみてください。
まずはブラウザバック（画面左上の「←」で戻る）してWordPress管理画面に戻りましょう。
次に、ConohaWINGのマイページにアクセスします。
アクセスができたら以下の手順でサイトセキュリティ画面を表示させましょう。
「サイト管理」→「サイトセキュリティ」→「WAF」
WAFの設定を一時的に「OFF」にします。
WAF設定をOFFにしている間に、再度kitsコードを張り付けて「Save」をクリックします。
これで保存できるはずです…！
保存できたら、必ずWAF設定を「ON」に戻しておきましょう（本来大事なセキュリティです）
Font Awesomeアイコンの使い方
最後にFont Awesomeの使い方を解説していきます。
まずはFont Awesomeのホーム画面で検索アイコンをクリックします。
アイコンの一覧が表示されるので、任意のアイコンをクリックします。
HTMLになっていることを確認し、アイコンコードをクリックしてコピーしましょう。
ここからは、
- 投稿の中で使う方法
- スマホフッターメニューで使う方法
の2通りの方法を解説します。
投稿の中でFont Awesomeのアイコンを使う方法
前提
前提として、2023年3月現在、Font Awesomeのバージョンが「6.0.0」だと投稿画面でのアイコン使用ができない状態です。
そのため、投稿にFont Awesomeのアイコンを挿入したい場合はバージョン5.15.4のアイコンを使用しましょう。
バージョンの切り替えは以下の画像を参考にしてください。
今回は「STINGER: マイボックス」でFont Awesomeのアイコンを使う方法を解説します。
まずはWordPress管理画面で投稿画面を開きましょう。
「STINGER: マイボックス」を表示させたら、「アイコンクラス」に先ほどコピーしたアイコンコードを張り付けます。
アイコンコードを張り付けたら、「””」で囲まれた部分以外は削除します。
以下のコードを例にすると、マーカー以外の部分だけ残す感じです。
<i class="fas fa-home"></i>↓
fas fa-home
これで投稿画面にFont Awesomeのアイコンを表示させることができます。
スマホフッターメニューでFont Awesomeのアイコンを使う
上記のようにスマホフッターメニューにFont Awesomeのアイコンを表示させることもできます。
表示方法は以下の記事の中で紹介しているのでぜひ参照ください。
近日公開予定：スマホフッターメニューにFont Awesomeのアイコンを表示させる方法
まとめ：Font Awesomeのアイコンを使ってブログをおしゃれに装飾しよう
AFFINEGER6とFont Awesomeを連携すれば、より一層おしゃれなブログを作ることができます。
本記事を参考にぜひFont Awesomeのアイコンを活用していきましょう。
まだAFFINEGER6を導入していない方はこちらかどうぞ！
