こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回は左メニューのカテゴリーを画像で表示する方法と
左メニューの下の階層のカテゴリーを表示する方法をご紹介します!
こんなお悩みありませんか?
・ショップの左メニューを画像で表示したい
・左メニューのカテゴリー一覧に下階層のカテゴリーも見せたい!
[難易度 ★☆☆ ]
左メニュー
「カテゴリーを画像で表示する」方法と
「下の階層のカテゴリーも見せる」方法!
※プレミアムショッププランのみ
(1)独自変数タグを削除!
【ショップデザイン(PC)】> 【トップページ編集】> 左側メニュー管理
左側メニュー管理のエディターエリア内に
1 |
[LIST_?_???_???] や [CATEGORY_MENU_?] |
を使ってカテゴリー一覧を表示している場合は削除します。
(2)カテゴリー一覧を ul,li要素で書く!
【ショップデザイン(PC)】> 【トップページ編集】> 左側メニュー管理
左側メニュー管理のエディターエリアに、下記のように記載してください。
▼左メニューを画像で表示する場合
1 2 3 4 5 |
<ul class="sideNav"> <li><a href="カテゴリーURL"><img src="nav01.gif" alt="カテゴリー1です"></a></li> <li><a href="カテゴリーURL"><img src="nav02.gif" alt="カテゴリー2です"></a></li> ・・・(略) </ul> |
→サンプルショップ「メイクデパート」は、左メニューを画像で表示していますのでご参照ください!
・カテゴリー画像は、【100MBサーバー(ギガプラス10)】からアップロードしましょう!
<img src="画像URL(パス)" alt="カテゴリー名"> ←カテゴリーを画像で表示します。
<a href="カテゴリーURL">カテゴリー名</a> ←リンクしたカテゴリーURLを表示します。
▼左メニューに下の階層のカテゴリーを表示する場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ul class="sideNav"> <li><a href="カテゴリーURL">テーブル</a> <ul> <li><a href="下の階層カテゴリーURL">├ ダイニングテーブル</a></li> <li><a href="下の階層カテゴリーURL">└ サイドテーブル</a></li> </ul> <li><a href="カテゴリーURL">時計</a> <ul> <li><a href="下の階層カテゴリーURL">├ 腕時計</a></li> <li><a href="下の階層カテゴリーURL">└ 目覚まし時計</a></li> </ul> </li> </ul> <style type="text/css"> ul.sideNav li { margin: 0 auto auto 10px; width: 180px; text-align:left; } </style> |
↓↓このように表示することができます!
→サンプルショップ「プレーンホワイト」のリンク先のページでも、同じ書き方で表示していますので
ご参照ください!
(2)完了!
→できあがり
ショップをみるで確認してみましょう!
・カテゴリーのURLは「カテゴリーの設定」カテゴリーの編集で確認することができます!
・カテゴリーを追加したり削除した場合は、自動では更新されません。
左メニューの記述の修正もお忘れなくおこないましょう!
いかがでしたでしょうか。
ぜひお試しください!それではまた!