MENU

メニューに画像を表示する【Menu Image, Icons made easy】

2020 5/26

テキストだけのメニューでは、ちょっと味気ないし、ぱっと見でどんなメニューなのかが分かりづらい。
『Font Awesome』を使用してアイコンフォントを表示するという手もありますが、自分の好きな画像を使いたいというときもあるでしょう。

Menu Image, Icons made easy】は、メニュー項目に画像を表示することができるプラグイン。

マウスオーバーで画像を切り替えて表示することもできます。

こんな場合におススメ
  • メニューに画像を表示したい
プラグインを使ってできること
  • メニュー項目に画像を表示することができる
目次

インストール

Menu Image, Icons made easy インストール
Menu Image, Icons made easy インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. Menu Image, Icons made easyで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

メニューに画像を表示する方法

STEP
メニューを開く

管理画面 > 外観 > メニュー をクリックし、メニュー画面を開きます。

Menu Image, Icons made easy 使用方法
STEP
メニュー画像の設定

プラグインを有効化すると、メニュー項目内に画像を選択する項目が表示されますので、そこから画像の設定を行います。

Menu Image, Icons made easy 使用方法
STEP
メニュー画像の設定

画像を設定をクリックし、メディアライブラリからメニュー画像に設定したい画像を選択します。

Menu Image, Icons made easy 使用方法
Menu Image, Icons made easy 使用方法
マウスオーバーしたときにメニュー画像を変更したい場合はマウスオーバー時の画像を設定をクリックし、同様に画像の設定を行います。
STEP
画像サイズの選択

メニュー画像のサイズを選択します。

Menu Image, Icons made easy 使用方法
STEP
タイトル位置の選択

ナビゲーションラベルを表示する位置を選択します。

Menu Image, Icons made easy 使用方法
STEP
保存
項目を設定したらメニューを保存します。
STEP
使用イメージ
Menu Image, Icons made easy 使用イメージ

【Menu Image, Icons made easy】の設定

STEP
Menu Imageを開く

プラグインを有効化すると、管理画面 内に『Menu Image』項目が表示されるので、そこから設定を行います。

Menu Image, Icons made easy 設定
STEP
項目の設定
Menu Image, Icons made easy 設定
Menu image Hoverマウスオーバー時の画像を使用できるようにするかの選択
1st Menu Image size1つめの画像サイズを指定
2nd Menu Image size2つめの画像サイズを指定
3rd Menu Image size3つめの画像サイズを指定
STEP
保存
項目を設定したら変更を保存します。

動作確認環境

  • バージョン 2.9.6
  • WordPress 5.4.1

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【Menu Image, Icons made easy】は、メニューに画像を追加表示するプラグイン。
  • テキストだけのメニューよりも画像が表示されていた方が、どのようなメニューなのか視覚的に分かりやすくなります。
目次
閉じる