WordPressカスタマイズ方法が知りたい人
「ヘッダーのグローバルメニューにアイコンが表示されてるサイトがあるな。かっこいいから設定してみたいけど、難しい設定とか必要なのかな？」
このような疑問に答えます。
この記事の内容
- グローバルメニューの横にアイコンを設定する方法
結論ですが、アイコンは簡単に設定できます。
コードをコピペするだけでメニューに表示できるので、さっそくアイコンを選んで視認性の高いメニューにしてみましょう。
それでは、解説していきます。
具体的な設定方法
ざっくりと2手順で設定していきます。
手順1. Font Awesomeで使いたいアイコンを選ぶ
Font Awesomeにアクセスします。
Font Awesome（フォントオーサム）は無料で数百種類のアイコンが使えるサイトです。
ここからグローバルメニュー横に設定したいアイコンを探します。
ポイント
Font Awesomeにはバージョン4と5があります。上記はFont Awesome Ver.4のリンクで、理由としまして僕の使っているテーマ（Affinger5）では、Ver.5に公式対応していない為です。 Ver.5に対応しているかどうかは、テーマによって違うので確認してみて下さい。
Ver.5には4の倍以上のアイコンがあります。対応している場合はVer.5を使用するのをおすすめいたします。
Font Awesome5のページ
トップページから「Icons」をクリックします。
アイコンの一覧が表示されますので、この中から使いたいアイコンを選んでください。
使いたいアイコンが決まったら、クリックします。今回はhomeを使います。
コードが出てきますので、「これをコピー」の部分をコピーしてください。
手順1はこれで完了です。
Alias（エイリアス）とは
アイコンを探しているとaliasと書いてあるアイコンがあるかと思います。これは別名という意味で、同じアイコンに2つ以上名前がありますよということです。
具体的には下記のように「share」と「mail-forward」で同じアイコンが使われていますね。
ただ「同アイコンで複数名前がありますよ」と言っているだけですので、もし使いたいアイコンに(alias)と書いてあっても、気にせず使ってしまって問題ないと思います。
手順2.メニューにコードをペーストする
アイコンを設定したいワードプレスのダッシュボードを開きます。
「外観」→「メニュー」をクリックします。
注意ポイント
メニューは既に作成されていると仮定して解説していきます。
もし作成されていない場合は同じように「外観」→「メニュー」で作成しましょう。
アイコンを設定したいメニューをクリックします。
「ナビゲーションラベル」の部分に手順1でコピーしたコードをペーストし、表示したい言葉を上記のように><の間に入れます。
これでおしまいです。
簡単ですね。
忘れないうちに保存してプレビューなどで確認してください。
補足
保存後に確認の際、表示したい言葉が下記のように太字にならない場合ですが、
下記のとおり<strong>というタグで言葉を囲めば太字になると思います。右側のタグは＜/strong>と/を付けるのを忘れないようにしてください。
裏技
手順1でFont AwesomeにはVer.4と5があるとお話しました。もしお使いのテーマがVer.5に対応していないけど試してみたいという時は、下記のとおりVer.5のコードからfasのsを消してペーストしてみて下さい。
Ver.4のコードとの違いはここだけなので、テーマによってはこれだけで表示できるかもしれません。
まとめ
step
1Font Awesomeで使いたいアイコンのコードをコピー
step
2WordPressのメニューにコードをペースト
たったこれだけの手順で設定できます。
直接テーマのコードをいじったりする必要はないので、気軽に設定できると思います。
雰囲気がよくなればブログのモチベーションも上がります。ワンランク上のカスタマイズをしてみましょう！
以上になります。