設定

ヘッダー 横メニューにWEBアイコンを表示させる方法

ここでは、ヘッダー 横メニュー「ヘッダーメニュー(横列)」にWEBアイコンを表示させる方法を解説します。

WEBアイコンを表示させためた例

ヘッダー横メニューにWEBアイコンを表示させるには、「Font Awesome」のWEBアイコンを使用します。

そのための準備として、

  1. 「FontAwesome」のアカウント登録
  2. 使用するためのコードをheadに貼り付ける

この2つを終えていないと「Font Awesome」を使用することができません。

※WEBアイコンを使えるようにする手順は、以下の記事を参考にしてください。

「Font Awesome」を使うための準備ができましたら、ヘッダー横メニューにWEBアイコンを表示させる手順を進めていきましょう。

ヘッダー横メニューにWEBアイコンを表示させる手順

ヘッダー横メニューにWEBアイコンを表示させるパターンは3つ。

  • 文字の左側に表示するパターン
  • 文字の右側に表示するパターン
  • WEBアイコンのみ表示するパターン
左にWEBアイコン
右にWEBアイコン
WEBアイコンのみ

それでは手順を解説していきます。

WordPressのメニューのカスタマイズを開く

1.まずはWordPressのダッシュボードメニューの「外観」→「カスタマイズ」の順にクリック。

2.カスタマイズのページが開くので、「メニュー」をクリック。

3.ヘッダー横に表示させるメニューを選択します。

ここでは、あらかじめ作っておいた「PCヘッダーメニュー(横列)サンプル」を使用します。

4.メニューの項目の右にある三角のアイコンをクリックし、「追加設定オプション」を表示させる。

この中にある「ナビゲーションラベル」にWEBアイコンのコードを入力します。

この状態のまま、「Font Awesome」へ行き、コードを取得しましょう。

「Font Awesome」でWEBアイコンのコードを取得する

1.下のURLをクリックし「Font Awesome」を開きます。

https://fontawesome.com/

2.上部に表示されている「Icons」をクリック。

3.左メニューの「Free」をクリック。

「Free」を押すことで、無料のWEBアイコンのみが表示されます。

4.検索ボックスに、「Home」と入力すると、Homeに関連するWEBアイコン候補が表示されるので、使用したいアイコンをクリックします。

5.WEBアイコンの詳細ページが開くので、赤で囲んでいるコードをクリック。

すると、コードがクリップボードに自動でコピーされます。

WEBアイコンのコードをコピーできたら、WordPress側の設定に戻ります。

WEBアイコンのコードを貼り付ける

先ほど開いていたメニューの「追加設定オプション」に戻ります。

1.ナビゲーションラベルに入力してあるテキストの前に、先ほどコピーしたWEBアイコンのコードを貼り付けます。

2.すると、テキストの左側にWEBアイコンが表示されました。

ただ、この状態だとWEBアイコンとテキストの間隔が狭いので、間に半角スペースを入れるとちょうどいいバランスになります。

<表示例>

WEBアイコンを右側に表示させたい場合

WEBアイコンを右側に表示させるのは簡単です。

先ほどはテキストの左側にWEBアイコンのコードを挿入したんですが、これを右側に挿入するだけです。

WEBアイコンとテキストの間に半角スペースを入れるのも同じです。

<表示例>

WEBアイコンのみ表示させたい場合

WEBアイコンの表示させたい場合は、

ナビゲーションラベルに入力しているテキストを削除し、WEBアイコンのコードのみ入力すればOKです。

<表示例>

アイコンだけだとなんだか寂しい…という場合は、タイトル属性にテキストを入力し、サブタイトルを表示させるのもありです。

<表示例>

まとめ

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

手順を簡単にまとめると、

  • 「Font Awesome」を使うための準備をする
  • 使いたいWEBアイコンのコードをコピーする
  • ナビゲーションラベルにWEBアイコンのコードを貼り付ける

たったこれだけです。

「Font Awesome」を使うための準備は少しややこしいので、「参考:ヘッダーメニューにWEBアイコンを使うための方法を2つ解説」を見ながら進めてくださいね。

-設定
-