MENU

ヘッダーメニューの作り方

どのページに切り替えてもサイトの上部にメニュー表示できたら便利ですよね。
メニュー表示させることも、テキストの最初にアイコンを表示させることも、簡単にできます。

※テーマ「COCOON」を利用しています

目次

メニューを作ろう

「外観」→「メニュー」から作成画面にいきましょう。

ここで決めた「メニュー名」はどこにも表示されません。
自分が後から見返したときに分かりやすい名前で作りましょう。

メニュー設定で「ヘッダーメニュー」「ヘッダーモバイルメニュー」「ヘッダーモバイルボタン」にチェックを入れたら、右下の青いボタン「メニューを作成」を押します。

リンクを追加しよう

「メニュー項目を追加」の所から、自由にページを追加していきます。
ここでは試しに「カスタムリンク」を「メニュー構造」の中に追加しています。

ここで階層化すると、右側の画像のようにプルダウン表示が可能になります。
たったこれだけです。便利ですね。

アイコンをつけよう

続いては、このリンクテキストにアイコンをつける方法です。

ナビゲーションラベルのところに以下をそのままコピペしてみてください。

<i class="fa fa-home" aria-hidden="true"></i>

コピペしたあとは右下の「メニューを保存」を忘れずに押してください。
そして自分のサイトを見ると、どうでしょう。
アイコンが表示されていますよね。
アイコンとリンク文字が近すぎる場合はスペースを入れて調整しましょう。

ちなみに「aria-hidden=”true”」というのは、読み上げソフトへの指示です。

<i class="fa fa-home"></i>

これだけでもアイコンフォントが表示されるので見た目的には問題ないんですが、読み上げソフトを使って閲覧すると、アイコンフォントの名前まで読み上げられてしまいます。
これを防ぐための指示、とご理解ください。

自分でアイコンを探そう

アイコンフォントを自分で選ぶ場合は「https://fontawesome.com/」から探しましょう。

小さく「Free Icons」と記載されているリンクを押します。
Font Awesomeは一部有料ですが、無料で使えるアイコンも1000以上あって、使いやすいです。

好みのアイコンを見つけたら、それをクリックします。

上の方に、先ほどコピペした文字列と同じようなものがあるので、クリックしてください。
クリックするだけでコピーされてることになるので、自分が表示させたいリンクのところに追加しましょう。

広告

目次