CustomMenuの画像バージョン制作方法

Geeklogのプラグインでdengenさんが開発された
CustomMenu Editor プラグインがあります。
ヘッダーにあるナビゲーションメニューの設定を
簡単に管理画面で出来る優れものです。

さらにナビゲーションメニューの画像バージョンや
階層メニューバージョンを作れてしまいます。
今回はProfessionalCSS簡単画像バージョンの
作り方を案内したいと思います。

インストールの方法などの詳細は同梱されてる
readme_jp_1.5.htmlを見た方が分かりやすいです。
lib-common.phpの追記を忘れずに！

ナビゲーションメニューは通常文字リンクとして表示されるようになってます。
これを画像に差し替える事になるのですが従来の方法だと
直接header.thtmlに書き込む事しか出来ませんでした。

バージョン:  0.4.2 ではナビゲーションメニュー個別に
IDとクラスが振り分けられます、この機能のおかげで
ナビゲーションデザインの幅がぐんと広がりました。

今回の方法はかなり古典的ですが考え方が容易な方法で
ナビゲーションにメニューを直書きしてa要素には透過GIFを表示し、
a:hover時には別の画像をCSSコントロールで表示すると言う考え方です。
（変化が分かり易い手順ですがこの通りでなくてもOKです。）

手順１
解凍したフォルダの中にある
custommenu/bonus/layout/ProfessionalCSS/のcustom.css以外の
ファイルとフォルダをテーマにアップロードします。

手順２
ナビゲーションメニューを書き込んだナビゲーション画像を作ります。
a:hover（ロールオーバー）時の画像を作り、それらを
テーマ/images/customにアップロードします。

手順４
用意したナビゲーション画像をテーマに組み込みます。
（この時は元々の文字リンクが表示されてます。）

手順５
custommenu/bonus/layout/ProfessionalCSS/のcustommenuフォルダにある
menuitem.thtmlを以下のように書き換えます。

<!-- menuitem.thtml { -->

<li id="{menuitem_id}" class="menuitem {menuitem_class}"><a href="{menuitem_url}" class="{menuitem_class}"><img src="{menuitem_icon_url}/blank.gif" alt="{menuitem_text}"></a></li>

<!-- } menuitem.thtml -->

手順６
管理者専用メニュー→コンフィグレーション→カスタムメニューで
メニューレンダラを階層メニューにして保存します。
（この時は文字リンクは消えますが画像未表示の画像が出てます）

手順７
透過GIF画像を作り、テーマ/custommenu/imagesにアップロードします。
（ここではサイズ５px四方のblank.gifとします。）
ここまで完了するとロールオーバーはしなくてもリンク自体は有効になります。

長くなってしまったのでCSSについては次回に持ち越します。