『Extended Menu』で画像を使ったメニューを作る

サイトのデザインをより美しくするため、メニューも画像で作りたいという要望は多いようです。画像化する事で自由にフォントを使用できたり、より細部までこだわってデザインすることが可能になります。

メニューの画像化はJoomla!標準の機能では難しいですが、エクステンション『Extended Menu』を使えば結構簡単にできてしまいます。

Extended Menuのダウンロードとインストール

こちらの記事を参考に、あらかじめExtended Menuをインストールしておきます。

メニュー画像の作成とアップロード

メニューに使用する画像を作成します。今回はデフォルトテンプレートの「rhuk_solarflare_ii」を使用しますので、メニューモジュールに正しく収まるよう幅157px、高さ27pxの画像を3つ作成しました（高さは自由に決めても大丈夫）。
menuimage_home.gif
menuimage_license.gif
menuimage_news.fig

これらをサーバ上へアップロードします。「サイト」→「メディアマネージャ」を選択後、「Stories」ディレクトリへ移動し、メニューに使用する画像を全てアップロードして下さい。

メニューアイテムへの割り当て

メニューアイテムへ先ほどアップロードした画像を割り当てます。「メニュー」→「設定するメニュー名（mainmenuなど）」を選択し、設定するメニューアイテムを選択します。次の図では「Home」を選択しています。

「メニューイメージ」からメニューアイテムに使用する画像を選択します。今回は「ホーム」の画像「menuimage_home.gif」を選択しました。

設定できたら保存します。同様に他のメニューアイテムにも画像を割り当てて下さい。

Extended Menuの設定

「モジュール」→「サイトモジュール」から「Extended Menu」を選択します。

「公開」を忘れずに「はい」に設定しましょう。その後「Menu Name」から画像を設定したメニュー名を選択し、「Source Type」は「Menu」を選択します。

ここがキモです。「Show Menu Icons」というパラメータがありますので、「Image Only（Linked）」を選択します。これを選択するとメニューの文字列は表示されず、リンクが設定されたメニュー画像だけが表示されるようになります。

全て設定できたら保存します。

サイトで確認するとデザインが崩れています。これはメニューアイテムに設定されているCSSが有効なためです。

再度Extended Menuの設定画面を表示し、「Menu Class Suffix」に適当なサフィックス（接尾句）を入力します（ここでは「-imagemenu」としました）。これを設定することで、メニューアイテムに設定されたCSSが無効になります。

サイトを表示し確認します。メニュー画像をクリックし、正しくリンクが設定されている事を確認してください。

メニューアイテム名が画像のAlt属性になります。