WordPressのカスタムメニューで画像を使う方法

WordPressのカスタムメニューで画像を使う手順

カスタムメニューで画像を使う手順は、以下の4ステップです。

1. カスタムメニューを作成する。
2. 各メニュー項目に設置する画像を用意する。
3. メニューで使う画像をアップロードする。
4. 画像を設置する。
5. 表示確認。

個別にみていきましょう。

手順1：カスタムメニューを作成する

通常の手順でカスタムメニューを作成します。

上記の様にメニュー項目も設定しておきます。

手順2：各メニュー項目に設置する画像を用意する

まずは、メニューで使用する画像を用意してください。

画像のサイズはメニューの横幅から各メニュー項目の横幅を算出し、ピッタリのサイズを作成することをお奨めいたします。

サイズが大きい分には縮小表示できるので良いのですが、サイズが小さいと色々と不具合が出てきます。

・画像間の空白が大きくなってしまう。
・拡大表示すると画像が荒れて見える。

サイズはできる限りピッタリにするか、少なくてもメニュー項目の横幅よりも大きいサイズにしましょう。

あとは、各画像のサイズが縦横比は同じにしておきましょう。
縦横比が異なると、見た目が悪くなる場合があるためです。

手順3：メニューで使う画像をアップロードする

手順1で用意した各メニュー項目の画像をサーバーにアップロードします。

FTPからどこかのフォルダにアップロードしても良いのですが、FTP接続が面倒という方もいると思いますので、今回はWordPressの管理画面からメディアにアップロードします。

メディアにアップロードしたとき、上記赤枠部分にある画像URLを控えておいてください。
ここで控えたURLは、手順4で使用します。

全ての項目の画像をアップロードし、それぞれのURLを控えれば手順3は完了です。

手順4：画像を設置する

最後に各メニュー項目に画像を設置します。

上記の赤枠部分【ナビゲーションラベル】部分を操作します。

まず、以下のコードを作成してください。

【メニュー項目に設置する画像のURL】は、手順3で控えたURLに置き換えます。
【メニュー項目の】横幅は、メニュー項目の横幅（例：200px）に置き換えます。
【代替テキスト】は、メニュー項目に置き換えると良いかと思います。

上記で作成したコードを先ほどの【ナビゲーションラベル】の部分に挿入します。

上記の様に画像タグを挿入してください。
全ての項目ごとに画像タグの設置を行い保存してください。

手順5：表示確認

最後に表示確認をしましょう。

メニューを表示して、上記の様に画像が表示されていれば作業完了です。

画像が表示されていない場合、これまでの手順に誤りがある可能性が高いです。
手順に誤りが無いか再チェックしてください。

どうしても上手くいかない場合は、お問い合わせからご相談下さい。

まとめ

WordPressのカスタムメニューで画像を使う方法をご紹介しました。

1. カスタムメニューを作成する。
2. 各メニュー項目に設置する画像を用意する。
3. メニューで使う画像をアップロードする。
4. 画像を設置する。
5. 表示確認。

上記の4ステップで、簡単にカスタムメニューで画像を使えるようになります。
興味のある方は、ぜひ挑戦してください。