Joomla! Tips

メニューアイテムにアイコンを表示する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【Joomla!が使えるレンタルサーバー】
 

タグ: デザイン

自分用のリンク

ちょくちょくアクセスするページ。自分用です。

お仕事募集

Joomla!に関するお仕事の依頼、エクステンションの翻訳、トラブルシューティングなどございましたら、こちらからお問い合わせください。