こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回は左メニューのカテゴリーを画像で表示する方法と
左メニューの下の階層のカテゴリーを表示する方法をご紹介します！

こんなお悩みありませんか？

・ショップの左メニューを画像で表示したい
・左メニューのカテゴリー一覧に下階層のカテゴリーも見せたい！

[難易度 ★☆☆ ]
左メニュー
「カテゴリーを画像で表示する」方法と
「下の階層のカテゴリーも見せる」方法！

（1）独自変数タグを削除！

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 左側メニュー管理

左側メニュー管理のエディターエリア内に

 [LIST_?_???_???]  や　 [CATEGORY_MENU_?]

を使ってカテゴリー一覧を表示している場合は削除します。

（2）カテゴリー一覧を ul,li要素で書く！

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 左側メニュー管理

左側メニュー管理のエディターエリアに、下記のように記載してください。

▼左メニューを画像で表示する場合

<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>

→サンプルショップ「メイクデパート」は、左メニューを画像で表示していますのでご参照ください！

▼左メニューに下の階層のカテゴリーを表示する場合

<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）完了！

→できあがり

ショップをみるで確認してみましょう！

いかがでしたでしょうか。
ぜひお試しください！それではまた！