新しいコンテンツのメニューアイテムに「New」のようなアイコンを表示したり、コンテンツの内容を直感的に理解できるようなアイコンをメニューアイテム表示したいというニーズはあると思います。

Joomla!ではメニューに対しアイコン（画像）を設定する機能を標準で搭載しています。

メニューアイテムに使用する画像をアップロードする

まずメニューアイテムで使用する画像をサーバ上にアップロードします。今回は「0円のWeb素材屋さん」で配布している「New」アイコン（simple_002.gif）を使用しました。

イメージマネージャからファイルをアップロードします。メニューの「サイト」→「メディアマネージャ」をクリックします。

「Stories」ディレクトリをクリックします。使用する画像はこの中に保存します。

「参照」を押してアップロードするファイルを選択します。

「Upload」を押して画像をアップロードします。

メニューアイテムにイメージを割り当てる

メニュー管理画面へ移動し、イメージを割り当てるメニューアイテムをクリックします。ここでは「Joomla!ライセンス」を開いています。

画面右側の「メニューイメージ」からアップロードした画像のファイル名を選択し保存します。

モジュールの設定を変更する

「モジュール」→「サイトモジュール」から、先ほど設定したメニューアイテムを表示するモジュールを開きます。ここでは「メインメニュー」モジュールを開いています。

表示されたパラメータの中から、「メニューアイコン表示」を「Yes」に設定します。また「メニューアイコン位置」は任意で設定します。その後保存します。

サイトを表示するとアイコンが表示されているはずです。

メニューアイコン位置に「左」や「右」を設定したはずなのに、「上」か「下」に表示されているかもしれません（上の例のように）。これは使用しているテンプレートによって、メニューアイテムのCSSクラス「mainmenu」に「display:block」が設定されているためです（HTMLのソースを表示すると、正しく左か右にアイコンが挿入されている事がわかるはず）。解決策としては?、デザインが崩れるのを覚悟の上でdisplay:blockをコメントアウトし、その後正常に表示されるようCSSを記述するか（面倒）、もしくはアイコンの背景をメニューアイテムの背景と同化してしまうか（簡単だが不恰好）、もしくはあきらめる事です

タグ: デザイン