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

製作 プログラム

2018/03/27(火)

あなただけのガチャを作ろう♪【無料】

わたガチャ(β版)12月14日リリース!

START!

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

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

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

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

こんなメニューを…

HOME|暮らし|雑貨…

こうする!

|暮らし|雑貨…

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

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

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

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

この一行をheader.phpに追加!

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

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

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

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

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

ナビゲーションラベルにコレを記入!

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

もしくはコレでもOK!

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

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

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

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

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

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