【ワードプレス】メニューにアイコンだけ表示する方法

メニューにアイコンだけ表示する！

ワードプレスでブログやホームページを運営していると、カテゴリがどんどん増えていったりしてメニューがごちゃごちゃすることってありますよね。記事やカテゴリが増えていくのはうれしい事なんですができればずっときれいな見た目も維持したいはず。

例えばメニューに表示させているサイトトップへのリンクである「HOME」とか「TOP」とかいう文字を「」みたいなアイコンに変えられたらその分スペースが空いてメニューがシンプルに。

今回はワードプレスでメニューにアイコンのみを表示させる方法を紹介しますね。

1. メニューにアイコンだけ表示する！
2. ①まずはアイコンフォントを準備！
3. ②ワードプレスのメニューを編集
4. メニューにアイコンのみ表示：まとめ

①まずはアイコンフォントを準備！

ワードプレスにしろなんにしろまずは表示したいアイコンを手に入れなくちゃいけません。「アイコンフォント」っていうんですが、いろいろ種類があってだいたい無料で使えます。「アイコンフォント」とか「WEBアイコンフォント」で検索するとズラズラ出てくるので好きなのを使ってみてくださいね！

ちなみにアイコンフォントはファビコンや普通の画像、jpgやらpngやらと違って、どれだけ大きく拡大してもぼやけたり画質が悪くなったりしないので選ぶときサイズは気にしないでくださいね。

「えらぶのめんどくさ！」という人のためにもっともポピュラーな「FontAwesome」というアイコンフォントを使う手順を。手順と言ってもheader.phpに一行追加するだけ！

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

②ワードプレスのメニューを編集

さあアイコンフォントを使う準備ができたら、あとはワードプレスの設定をしていきます。手順はこれで終わりですので簡単です。

ワードプレスの管理画面に行き「外観→メニュー」をクリック。

アイコンに変えたいメニューの項目の「ナビゲーションラベル」をぜんぶ消して、そこに下の一文を追加。

<span class="〇〇"></span>

<i class="〇〇"></i>

※〇〇には使いたいアイコンフォントの名前（クラス名）が入ります。FontAwesomeを使っているならここから各アイコンの名前がわかります。

例）家の形（ホームのアイコン）を使いたい場合なら「fas fa-home」を〇〇に入れる。

メニューにアイコンのみ表示：まとめ

ワードプレスのメニューにアイコンだけを表示する方法を紹介しました。

「HOME」とか「ホーム」とか文字で書かれているよりもアイコンでシンプルに表示されていた方が洗練されたデザインに見えてカッコいいですよね！ぜひ試してみてくださいね。