ナビゲーション・メニューやカテゴリー・リストをアイコン画像で簡単に変更できるプラグイン。文字だけのメニュー横に SNS のアイコンを設置する方法

2015年5月3日 맹조 コメントする

Views 523
Likes
Rating 12345

この記事を読むのに必要な時間は約 1

Facebook や Twitter は文字よりも, 表示が認識が容易ですよね。カテゴリーを『鍋物』、『魚料理』、『ケーキ』などでがシンボルマークが使えれば、レストランのメニューのように種類の違いがすぐに分かる。🍴, 🐟, 🍰, の絵文字が WordPress 4.2 から自由に使えるようになったとはいっても活用できるものは限られる。
これまではアイコンフォントを半ば強引的にメニューに指定してみたり、スタイルシートで画像と置き換えたりしてきました。今回のプラグインは、それを簡単に設置することが出来ます。

Menu Image – サイトの文字だけのメニューにアイコン画像を追加できる WordPress プラグイン

Menu Image プラグインを使うと、WordPress で構築した Web サイトのページ上部のグローバル・ナヴィゲーションや、サイドバー・ウィジェットのカスタム・メニューにアイコン画像を追加で表示できます。

このプラグインを利用すると、メニューの文字の前にでも、後ろにでも任意の画像の表示が簡単に指定できるし、画像だけを表示させることも当然、容易に設置を出来ます。これを活用して、文字だけのメニューをアイコンで視覚的にしましょう。

ダッシュボードから外観＞メニューでラベルの内容と関連するアイコン画像を登録することで、 Web サイトの内容がサイト閲覧者に対して視覚的に分かりやすくなります。

登録するアイコンの画像サイズは「24 x 24 、36 x 36 、48 x 48」ピクセルのどれかを選べます。そして、PNG や GIF 形式の背景を透過した画像を利用すると調度良い感じになります。

当サイトではナビゲーション・メニューとサイドバーのメニューで、アッパーサイトのサイトアイコンを付けてみました。いずれ、ナビゲーションの項目が増えていった時には、随時メニューをアイコンに置き換えていくことにします。

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

WordPress 管理画面＞プラグイン＞新規追加＞「 Menu Image 」で検索
WordPress.org からダウンロード

インストールしてプラグインを有効化します。しかし、設定項目のようなものは増えません。
では、どこから設定すればよいのでしょう。

管理画面の場所

このプラグインの管理画面は「メニュー」にあります。プラグインを有効化すると、メニューの設定項目の中にアイコンの設定が追加されます。

WordPress 管理画面＞外観＞メニュー
メニューを編集して設置します。

Menu image : Set image で画像ファイルをアップロードします。

Image on hover : マウスをメニューに載せた時に変化させる画像ファイルをアップロードします。

Image size : アイコンの画像サイズは「24 x 24 、36 x 36 、48 x 48」や「大中小のサムネイルサイズ」に対応しています。わたしは、ナビゲーションで 36 × 36 を、サイドバーのカスタム・メニューで 24 x 24 サイズを指定しています。

Title Position : ラベルの表示位置を指定します。

Before : 文字の後ろに画像アイコンを表示する。
Hide : 文字を隠して、画像アイコンだけを表示する。
After : 文字の前にに画像アイコンを表示する。

WordPress シンプルスタイルカフェサイトおしゃれなお店のWebページを作ろう

Fancier Author Box　記事下表示の場合に回答中

About
Latest Posts

Follow me

맹조

WordPress 日本語フォーラムで回答をしています。
職場は熊本の老舗で日本全国的に知られている。その筋ではとても有名な店です。そういうこともあってかオーナーはWebサイトを持つことに関心はない。それでも、私たちスタッフがネット活動をするスペースは有る。個人個人のブログ、SNSは自由に出来る。その私達の自由な活動が店のアピールになっているのです。商品は頑張っている私達の魅力だから。

Follow me