menu-image09

Word Pressのメニューを画像にした。

menu-image01

カスタムメニューの作成

まず設定画面の〔外観〕→〔メニュー〕から新規メニューを作成する。
メニューの名前を入れて〔メニューを作成〕のボタンを押す。

menu-image02

カテゴリの追加

これで新しく作ったメニュー(カスタムメニュー)ができる。
カスタムメニューに表示させたいカテゴリにチェックをいれて、作ったカスタムメニューに追加する。

menu-image03

カスタムメニューの完成

カスタムメニューにカテゴリが追加された。
カテゴリの並び順を変えたい場合は、ここで順番を変えたいカテゴリをドラッグしながら上下に移動されば、カテゴリの表示の順番もかえられるみたいだ。

カスタムカテゴリの移動

カスタムメニューの設定1

次に〔外観〕→〔ウィジェット〕のページに移動して、〔カスタムメニュー〕を〔サイドバー〕のところにドラッグする。

 

メニュー名

カスタムメニューの設定2

次に、作成したカスタムメニュー名を選択して保存する。これでワードプレスのサイドバーに作成したカスタムメニューが表示されたはずだ。

メニューの追加

カスタムメニューの追加

よし、これで左のサイドバーにテキストリンクのカスタムメニューが追加された。

メニューをアップロード

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

このままだとメニューはテキストになっているから、メニューに表示させる画像をワードプレスにアップロードしよう。新しい記事を新規追加して、作っておいたメニューの画像をうpする。

menu-image07

画像のタグのコピーをする

そして、アップロードしたメニューの写真を記事作成のエディタ(テキストモード)に追加する。んで、imgタグのとこだけコピーする。
わしのブログだと以下

 

menu-image08

タグの貼り付け

そしてはじめにメニューをつくった画面に戻る。
〔外観〕→〔メニュー〕
はじめに作成したカスタムメニューの〔カテゴリ〕の〔ナビゲーションラベル〕のところに、コピーしたimgタグを貼りつける。
左にある〔タイトルの属性〕は〔alt=””〕みたいだから、関連キーワードをいれておいたほうがいいかもしれない。

blog-menu-image

メニュー画像の追加

これでテキストで表示されてた部分が画像にかわった。
メニューを画像にする方法は色々あるみたいだけど、この方法が一番簡単だった。

WordPressのプラグインに感謝

ちなみに下記の神ページを参考にして作った。(わかりやすい)

●WordPressのプラグインに感謝
http://milkveil.com/archives/2029