こんにちは、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は「カテゴリーの設定」カテゴリーの編集で確認することができます！
・カテゴリーを追加したり削除した場合は、自動では更新されません。
左メニューの記述の修正もお忘れなくおこないましょう！
いかがでしたでしょうか。
ぜひお試しください！それではまた！
