ホーム、企業概要、サービス、お問い合わせ・・・
ホームページのメニューは、ほとんどが文字で作られます。

これを画像に置き換えると・・・

だいぶイメージが変わりました。

メニューを画像に変える手順

1.メニュー個々の画像を作る

画像作成アプリ（フォトショップやインクスケープ等）で制作してみて下さい。
ちなみにホーム画像（150×56px）その他画像（121×45px)
で作ってみました。色の組み合わせのセンスが悪く、文字が少々読みにくいのは今回無視します。

2.メニュー画像をアップロード

作成した画像をメディアに新規追加します。

追加した画像をそれぞれクリックします。

画像のURLをコピーします。

外観 > メニューのメニュー構造に移ります。

各メニュー▼を開き、先ほどコピーした画像のURLを貼り付けますが、URLだけ貼り付けても画像は表示されないので、以下のタグに挿入した状態でナビゲーションラベルに貼り付けます。

　　　　　<img src=”ここにURLを入れます”>

貼り付けたら右上のメニューを保存を押します。

これでメニューの画像化は完了です。

貼り付けた後のメニュー同士の隙間が気になる方は、CSSを追記してください。

.global-nav__menu>.menu-item {
margin: 1px;
}

上記のタグを追記して、1pxの数値を変えると隙間が変わります。

※ワードプレスのテーマによっては、同じことをやっても画像の貼り付けが出来ないテーマもありますので注意が必要です。