PR AFFINGER6

【裏技あり】AFFINGER5でFontAwesome5を使う方法

2021年3月27日

【裏技あり】AFFINGER5でFontAwesome5を使う方法

こんな方におすすめ

  • AFFINGER5でFontAwesome5を使いたい
  • FontAwesomをAFFINGER5で表示させたい

今回は、AFFINGER5でFontAwesomeのバージョン5を使う方法を解説します。

AFFINGER5でFontAwesome5を使う

それでは、以下の2つを順番に解説します。

  • AFFINGER5はFontAwesome5に対応していない
  • FontAwesome5を使う2つの方法

ぜひ参考にしてください。

使用するバージョン

AFFINGER:バージョン5
FontAwesome:バージョン4.7

AFFINGER5はFontAwesome5に対応していない

AFFINGER5でFontAwesome5を使おうとすると、以下のように表示されないことがあります。

HTML:<i class="fab fa-500px"></i>

PCの表示↓

スマホの表示↓

このように表示されてしまう原因は、バージョンがあっていないからです。

AFFINGER5は、FontAwesomeのバージョンが5に対応していないので、表示することができません。

AFFINGER5が対応しているアイコンのバージョンは、FontAwesome4.7です。

中には対応しているアイコンもありますが、FontAwesome5のサイトではあまり対応していません。

AFFINGER5の次のバージョン「AFFINGER6」ではFontAwesome5がデフォルトで使えるそうです。

FontAwesome5を使う2つの方法

AFFINGER5でFontAwesome5を使う方法は以下の2つです。

FontAwesome5を使う方法

  • アイコンのHTMLを書き換える
  • header.phpにコードをコピペする

それでは順番に解説します。

方法①:アイコンのHTMLを書き換える

まず、いつも通りFontAwesome5のサイトからコードをコピーしましょう。

「Version5.0.0」で、アイコンのバージョンが確認できます。

次に、好きな場所にコピーしたHTMLを貼り付けてください。

今回は投稿記事のカスタムHTMLに以下のコードをコピーしました。

<i class="fab fa-500px"></i>

しかし、このままだとアイコンのバージョンが5なので表示されません。

なので、コードを以下のように書き換えましょう。

<i class="fa fa-500px"></i>

『fab fa-500px』➡︎『fa fa-500px』に変えました。

すると、無事表示させることができました。↓

しかし、この方法は一部のアイコンしか表示できないので注意が必要です。

方法②:header.phpにコードをコピペする

続いて、2つ目の方法です。

header.phpにコードをコピペする方法で、全てのアイコンが使えるようになります。

この方法はAFFINGER5のデフォルトのアイコンが表示されなくなる可能性があり、サイト全体のアイコンが崩れるかもしれないので自己責任でお願いします。

step
1
header.phpを子テーマにコピーする

親テーマを書き換えても、テーマをアップデートしたときに元に戻ってしまいます。

なので、親テーマのheader.phpを子テーマにコピーしてください。

まず『(ドメイン名)➡︎public_html➡︎wp-content➡︎themes➡︎affinger5』からheader.phpをを子テーマ(affinger5-child)にコピーしましょう。

step
2
header.phpを開く

それでは、管理画面を開いてください。

次に『外観➡︎テーマエディター』を表示すると、以下のような画面になります。

テーマヘッダーが追加されているので、『WING-AFFINGER5 Child: テーマヘッダー (header.php)』を開いてください。

step
3
header.phpにコードをコピペする

それでは、header.phpから『</header>』の直前に以下のコードをコピペしてください。

<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet">

FontAwesomeがアップデートしたら『…v5.15.3』の部分が変わることがあります。

一応、公式サイトから確認しておきましょう。

まとめ

今回は、AFFINGER5でFontAwesome5を使う方法について、以下の2つを解説しました。

FontAwesome5を使う方法

  • アイコンのHTMLを書き換える
  • header.phpにコードをコピペする

FontAwesome5を使うならこちらからどうぞ↓

FontAwesomeを使う

というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。

おすすめ記事
【商用&加工OK】Unsplash(アンスプラッシュ)の使い方【フリー素材】
【禁止事項】Unsplash(アンスプラッシュ)の注意点や使い方【商用利用・加工は?】

続きを見る

-AFFINGER6
-