グループ機能追加 ~旧テンプレートをご利用の方へ~

グループ機能追加 ~旧テンプレートをご利用の方へ~
このページでは旧テンプレートへのグループ機能追加方法を説明しています。

機能を追加するには … パソコンショップの場合

対応方法は以下の二通りございます。どちらかの対応をお願いします。

再度テンプレートを追加する 【※推奨】

テンプレートの該当箇所を修正する

テンプレートの編集を行う場合は、【共通】HTML・【共通】CSS の計2箇所を編集します。 使用するテンプレートを確認し、以下の指定箇所の編集を行ってください。
【共通】HTML に、グループ表示用のHTMLを追記します。 【共通】HTML の編集内容はこちら
【共通】CSS に、【共通】HTML の追記部分に対応するCSSを追加します。 【共通】CSS の編集内容はこちら

※上記タグを変更する位置が分からない場合は、再度ご利用のテンプレートをを追加していただき、上記変更後のタグが記述されている位置をご確認ください。

機能を追加するには … モバイルショップの場合

対応方法は以下の二通りございます。どちらかの対応をお願いします。

再度モバイルショップ用テンプレートを追加する 【※推奨】

テンプレートの該当箇所を修正する

テンプレートの編集を行う場合は、【カテゴリ一覧】のHTMLを編集します。 使用するテンプレートを確認し、以下の指定箇所の編集を行ってください。
【カテゴリ一覧】HTMLに、グループ表示用のHTMLを追記します。 【カテゴリ一覧】HTMLの編集内容はこちら

※上記タグを変更する位置が分からない場合は、再度ご利用のモバイルショップ用テンプレートを追加していただき、上記変更後のタグが記述されている位置をご確認ください。

【共通】HTML 編集内容

使用しているテンプレートを確認

【共通】HTML に追加するタグは各テンプレート毎に異なります。

タグの挿入箇所を確認

【テンプレート別挿入タグ一覧表 】の、 <!-- 黄色いマークの文字列 --> が挿入箇所の目安となりますので、 文字列を【共通】HTML 内にて検索します。

指定タグをコピー、挿入

検索後、検索文字列の上部へ ピンクエリアの追加タグ を挿入してください。
■テンプレート別挿入タグ一覧表 【共通】HTML
メモリー <!-- 商品カテゴリー -->
<dl id="cat_list"> <dt><img src="http://img.shop-pro.jp/tmpl_img/20/no_<{counter start=1 skip=1}>.gif" width="25" height="40" alt=" ;" /> <img src="http://img.shop-pro.jp/tmpl_img/20/r_catlist.gif" width="116" height="40" alt="ジャンルから選ぶ" /></dt> <dd> <ul> <{section name=num loop=$category}> <li>
<a href="<{$category[num].link_url}>"><{if $category[num].img_url != ""}><img src="<{$category[num].img_url}>" /><br /><{/if}><{$category[num].name}></a> </li> <{/section}> </ul> </dd>
<!-- グループ --> <dd> <div id="group-list"> <ul> <{section name=num loop=$group}> <li> <a href="<{$group[num].link_url}>"><{if $group[num].img_url != ""}><img src="<{$group[num].img_url}>" /><br /><{/if}><{$group[num].name}></a> </li> <{/section}> </ul> </div> </dd> <!--// グループ -->
</dl> <!--// 商品カテゴリー -->
オレンジノート <!-- カテゴリーリスト --> <dt><img src="http://img.shop-pro.jp/tmpl_img/17/dt_category.gif" width="85" height="13"></dt> <{section name=num loop=$category}> <dd> <{if $category[num].img_url != ""}><a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a><br /><{/if}><a href="<{$category[num].link_url}>"><{$category[num].name}></a> </dd> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><dd id="group-list" style="background-image:none;"><br /></dd><{/if}> <dd class="group-list-link"> <{if $group[num].img_url != ""}><a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /></a> <br /><{/if}><a href="<{$group[num].link_url}>"><{$group[num].name}></a> </dd> <{/section}> <!--// グループ -->
<!--// カテゴリーリスト -->
スカイノート <!-- カテゴリーリスト --> <dt><img src="http://img.shop-pro.jp/tmpl_img/24/dt_category.gif" width="85" height="13"></dt> <{section name=num loop=$category}> <dd> <{if $category[num].img_url != ""}><a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a><br /><{/if}><a href="<{$category[num].link_url}>"><{$category[num].name}></a> </dd> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><dd id="group-list" style="background-image:none;"><br /></dd><{/if}> <dd class="group-list-link"> <{if $group[num].img_url != ""}><a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /></a> <br /><{/if}><a href="<{$group[num].link_url}>"><{$group[num].name}></a> </dd> <{/section}> <!--// グループ -->
<!--// カテゴリーリスト -->
レタスノート <!-- カテゴリーリスト --> <dt><img src="http://img.shop-pro.jp/tmpl_img/25/dt_category.gif" width="85" height="13"></dt> <{section name=num loop=$category}> <dd> <{if $category[num].img_url != ""}><a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a><br /><{/if}><a href="<{$category[num].link_url}>"><{$category[num].name}></a> </dd> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><dd id="group-list" style="background-image:none;"><br /></dd><{/if}> <dd class="group-list-link"> <{if $group[num].img_url != ""}><a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /></a> <br /><{/if}><a href="<{$group[num].link_url}>"><{$group[num].name}></a> </dd> <{/section}> <!--// グループ -->
<!--// カテゴリーリスト -->
プレーン <!-- 商品カテゴリー--> <h2>Category</h2> <ul> <{section name=num loop=$category}> <li> <a href="<{$category[num].link_url}>"><{$category[num].name}> <{if $category[num].img_url != ""}> <img src="<{$category[num].img_url}>" /><br /> <{/if}></a> </li> <{/section}> </ul>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><{/if}> <p class="group-list-link"> <a href="<{$group[num].link_url}>"><{$group[num].name}> <{if $group[num].img_url != ""}><img src="<{$group[num].img_url}>" /><br /><{/if}></a> </p> <{if $smarty.section.num.last }></div><{/if}> <{/section}> <!--// グループ -->
<!--// 商品カテゴリー-->
シンプル(レッド) <!-- Item category area --> <div><img src="http://img.shop-pro.jp/tmpl_img/4/title_category.gif" width="150" height="35" border="0" alt="商品カテゴリー" /></div> <div class="list"> <ul> <{section name=num loop=$category}> <li> <a href="<{$category[num].link_url}>"> <{$category[num].name}> <{if $category[num].img_url != ""}> <div style="margin:0px 0px 0px -10px; text-align:center;"><img src="<{$category[num].img_url}>" /></div> <div><img src="http://img.shop-pro.jp/tmpl_img/4/sp_clear.gif" width="100" height="5" /></div> <{/if}> </a> </li> <{/section}> </ul>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><ul><{/if}> <li class="group-list-link"> <a href="<{$group[num].link_url}>"> <{$group[num].name}> <{if $group[num].img_url != ""}> <div style="text-align:center;"><img src="<{$group[num].img_url}>" /></div> <{/if}> </a> </li> <{if $smarty.section.num.last }></ul></div><{/if}> <{/section}> <!--// グループ -->
</div>
<!-- // Item category area -->
シンプル(ブルー) <!-- Item category area --> <div><img src="http://img.shop-pro.jp/tmpl_img/7/title_category.gif" width="150" height="35" border="0" alt="商品カテゴリー" /></div> <div class="list"> <ul> <{section name=num loop=$category}> <li> <a href="<{$category[num].link_url}>"> <{$category[num].name}> <{if $category[num].img_url != ""}> <div style="margin:0px 0px 0px -10px; text-align:center;"><img src="<{$category[num].img_url}>" /></div> <div><img src="http://img.shop-pro.jp/tmpl_img/7/sp_clear.gif" width="100" height="5" /></div> <{/if}> </a> </li> <{/section}> </ul>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><ul><{/if}> <li class="group-list-link"> <a href="<{$group[num].link_url}>"> <{$group[num].name}> <{if $group[num].img_url != ""}> <div style="text-align:center;"><img src="<{$group[num].img_url}>" /></div> <{/if}> </a> </li> <{if $smarty.section.num.last }></ul></div><{/if}> <{/section}> <!--// グループ -->
</div>
<!-- // Item category area -->
シンプル(グレー) <!-- Item category area --> <div><img src="http://img.shop-pro.jp/tmpl_img/8/title_category.gif" width="150" height="35" border="0" alt="商品カテゴリー" /></div> <div class="list"> <ul> <{section name=num loop=$category}> <li> <a href="<{$category[num].link_url}>"> <{$category[num].name}> <{if $category[num].img_url != ""}> <div style="margin:0px 0px 0px -10px; text-align:center;"><img src="<{$category[num].img_url}>" /></div> <div><img src="http://img.shop-pro.jp/tmpl_img/8/sp_clear.gif" width="100" height="5" /></div> <{/if}> </a> </li> <{/section}> </ul>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><ul><{/if}> <li class="group-list-link"> <a href="<{$group[num].link_url}>"> <{$group[num].name}> <{if $group[num].img_url != ""}> <div style="text-align:center;"><img src="<{$group[num].img_url}>" /></div> <{/if}> </a> </li> <{if $smarty.section.num.last }></ul></div><{/if}> <{/section}> <!--// グループ -->
</div>
<!-- // Item category area -->
シンプル(ラベンダー) <!-- Item category area --> <div><img src="http://img.shop-pro.jp/tmpl_img/9/title_category.gif" width="150" height="35" border="0" alt="商品カテゴリー" /></div> <div class="list"> <ul> <{section name=num loop=$category}> <li> <a href="<{$category[num].link_url}>"> <{$category[num].name}> <{if $category[num].img_url != ""}> <div style="margin:0px 0px 0px -10px; text-align:center;"><img src="<{$category[num].img_url}>" /></div> <div><img src="http://img.shop-pro.jp/tmpl_img/9/sp_clear.gif" width="100" height="5" /></div> <{/if}> </a> </li> <{/section}> </ul>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><ul><{/if}> <li class="group-list-link"> <a href="<{$group[num].link_url}>"> <{$group[num].name}> <{if $group[num].img_url != ""}> <div style="text-align:center;"><img src="<{$group[num].img_url}>" /></div> <{/if}> </a> </li> <{if $smarty.section.num.last }></ul></div><{/if}> <{/section}> <!--// グループ -->
</div>
<!-- // Item category area -->
ミニ <!-- カテゴリタブとメニューの部分 --> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="category_tab"> <tr> <td valign="top" > <table cellpadding="0" cellspacing="0" border="0"> <tr> <{section name=num loop=$category}> <td class="tab_left" width="9" nowrap><img src="http://img.shop-pro.jp/tmpl_img/10/sp.gif" width="9"></td> <td class="tab" nowrap> <div> <a href="<{$category[num].link_url}>"> <{$category[num].name}> <{if $category[num].img_url != ""}> <div><img src="<{$category[num].img_url}>" /></div> <{/if}> </a> </div> </td> <td class="tab_right" nowrap><img src="http://img.shop-pro.jp/tmpl_img/10/sp.gif" width="9"></td> <td style="width:4px;" nowrap><img src="http://img.shop-pro.jp/tmpl_img/10/sp.gif" width="4"></td> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <td class="tab_left" width="9" nowrap><img src="http://img.shop-pro.jp/tmpl_img/10/sp.gif" width="9"></td> <td class="tab" nowrap> <div> <a href="<{$group[num].link_url}>"> <{$group[num].name}> <{if $group[num].img_url != ""}> <div><img src="<{$group[num].img_url}>" /></div> <{/if}> </a> </div> </td> <td class="tab_right" nowrap><img src="http://img.shop-pro.jp/tmpl_img/10/sp.gif" width="9"></td> <td style="width:4px;" nowrap><img src="http://img.shop-pro.jp/tmpl_img/10/sp.gif" width="4"></td> <{/section}> <!--// グループ -->
<td style="width:100%;" align="right" class="umenu" nowrap> <a href="<{$home_url}>"><img src="http://img.shop-pro.jp/tmpl_img/10/home.gif" align="absmiddle" width="24" height="24">ホーム</a> | <a href="<{$view_myaccount_url}>"><img src="http://img.shop-pro.jp/tmpl_img/10/acc.gif" align="absmiddle" width="24" height="24">マイアカウント</a> | <a href="<{$view_inq_url}>"><img src="http://img.shop-pro.jp/tmpl_img/10/inq.gif" align="absmiddle" width="24" height="24">お問い合わせ</a> | <a href="<{$rss_url}>"><img src="http://img.shop-pro.jp/tmpl_img/10/rss.gif" width="57" height="15" align="absmiddle" /></a> <a href="<{$atom_url}>"><img src="http://img.shop-pro.jp/tmpl_img/10/atom.gif" width="57" height="15" align="absmiddle" /></a> </td> </tr> </table> <div class="line_top"><img src="http://img.shop-pro.jp/tmpl_img/10/sp.gif" height="1"></div> </td> </tr> </table> <!-- // カテゴリタブとメニューの部分 -->
ヘンプ <!-- Item category area --> <div class="side_cat_bg"> <table cellpadding="0" cellspacing="0" border="0" width="190" style="text-align:left;"> <tr><td class="side_cat_title">カテゴリー</td></tr> <{section name=num loop=$category}> <tr><td class="side_cat_text"> <a href="<{$category[num].link_url}>"> <{$category[num].name}> <{if $category[num].img_url != ""}> <div><img src="<{$category[num].img_url}>" style="margin:0px 0px 5px 5px;" alt="" /></div> <{/if}> </a> </td></tr> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <tr><td class="side_cat_text"> <a href="<{$group[num].link_url}>"> <{$group[num].name}> <{if $group[num].img_url != ""}> <div><img src="<{$group[num].img_url}>" style="margin:0px 0px 5px 5px;" alt="" /></div> <{/if}> </a> </td></tr> <{/section}> <!--// グループ -->
</table> </div> <!-- // Item category area -->
ビター <!-- カテゴリーリスト --> <dl id="category_list"> <dt>Category</dt> <dd> <ul> <{section name=num loop=$category}><li><{if $category[num].img_url != ""}><a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a><br /><{/if}><a href="<{$category[num].link_url}>"><{$category[num].name}></a></li> <{/section}> </ul>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><ul><{/if}> <li class="group-list-link"><a href="<{$group[num].link_url}>"><{if $group[num].img_url != ""}><img src="<{$group[num].img_url}>" /></a><br /><{/if}><a href="<{$group[num].link_url}>"><{$group[num].name}></a></li> <{if $smarty.section.num.last }></ul></div><{/if}> <{/section}> <!--// グループ -->
</dd> </dl> <!--// カテゴリーリスト -->
アクア <!-- 商品カテゴリー --> <div id="category" style="margin-top:25px;"> <div style="margin:0px 0px 5px 0px;"><div class="title_middle">CATEGORY</div></div> <{section name=num loop=$category}> <ul> <li style="padding:5px 5px 0px 5px"> <a href="<{$category[num].link_url}>"><{$category[num].name}></a> </li> </ul> <{if $category[num].img_url != ""}> <div><a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a></div> <{/if}> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><ul><{/if}> <li class="group-list-link"> <a href="<{$group[num].link_url}>"><{$group[num].name}></a><br> <a href="<{$group[num].link_url}>"><{if $group[num].img_url != ""}><img src="<{$group[num].img_url}>" /><{/if}></a> </li> <{if $smarty.section.num.last }></ul></div><{/if}> <{/section}> <!--// グループ -->
</div> <!-- //商品カテゴリー -->
ブロック <!-- 商品カテゴリーエリア --> <div class="left_menu">商品カテゴリー</div> <{section name=num loop=$category}> <div class="left_category"> <div class="left_category_name"><a href="<{$category[num].link_url}>"><{$category[num].name}></a></div> <{if $category[num].img_url != ""}> <div class="left_category_img"><a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a></div> <{/if}> </div> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><br /></div><{/if}> <div class="left_category"> <div class="left_category_name"><a href="<{$group[num].link_url}>"><{$group[num].name}></a></div> <{if $group[num].img_url != ""}> <div class="left_category_img"><a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /></a></div> <{/if}> </div> <{/section}> <!--// グループ -->
鹿の子 <!-- 商品カテゴリー --> <dl id="cat_list"> <dt>商品カテゴリー</dt> <dd> <ul> <{section name=num loop=$category}> <li> <{if $category[num].img_url != ""}><a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a><br /><{/if}> <a href="<{$category[num].link_url}>"><{$category[num].name}></a> </li> <{/section}> </ul>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><ul><{/if}> <li class="group-list-link"> <{if $group[num].img_url != ""}><a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /></a><br /><{/if}> <a href="<{$group[num].link_url}>"><{$group[num].name}></a></li> <{if $smarty.section.num.last }></ul></div><{/if}> <{/section}> <!--// グループ -->
</dd> </dl> <!--// 商品カテゴリー -->
レース <!-- カテゴリーリスト --> <div class="title"><img src="http://img.shop-pro.jp/tmpl_img/16/sp.gif" alt="Category" class="img_category" width="132" height="26"></div> <ul> <{section name=num loop=$category}><li class="cat"><a href="<{$category[num].link_url}>"><{if $category[num].img_url != ""}><img src="<{$category[num].img_url}>" /></a><br /><{/if}><{$category[num].name}></a></li> <{/section}> </ul> <!--// カテゴリーリスト -->
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><ul><{/if}> <li class="cat"> <a href="<{$group[num].link_url}>"> <{if $group[num].img_url != ""}> <img src="<{$group[num].img_url}>" /><br /> <{/if}> <{$group[num].name}> </a> </li> <{if $smarty.section.num.last }></ul></div><{/if}> <{/section}> <!--// グループ -->
ビューティ <!-- Category --> <img src="http://img.shop-pro.jp/tmpl_img/15/linktitle_category.gif" class="linktitle" alt="商品カテゴリー" /> <ul class="link"> <{section name=num loop=$category}> <li><a href="<{$category[num].link_url}>"><{if $category[num].img_url != ""}><img src="<{$category[num].img_url}>" /><br /><{/if}><{$category[num].name}></a></li> <{/section}> </ul> <!--// Category -->
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><ul class="link"><{/if}> <li> <a href="<{$group[num].link_url}>"> <{if $group[num].img_url != ""}> <img src="<{$group[num].img_url}>" /><br /> <{/if}> <{$group[num].name}> </a> </li> <{if $smarty.section.num.last }></ul></div><{/if}> <{/section}> <!--// グループ -->
ナチュラル <!-- CategoryArea --> <div class="linktitle">商品カテゴリー</div> <div class="category"> <ul> <{section name=num loop=$category}> <li> <a href="<{$category[num].link_url}>"> <{if $category[num].img_url != ""}> <img src="<{$category[num].img_url}>" /><br /> <{/if}> <{$category[num].name}> </a> </li> <{/section}> </ul> </div>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><div class="category"><ul><{/if}> <li> <a href="<{$group[num].link_url}>"> <{if $group[num].img_url != ""}> <div class="group-listImg"><img src="<{$group[num].img_url}>" /></div><{/if}> <{$group[num].name}> </a> </li> <{if $smarty.section.num.last }></ul></div></div><{/if}> <{/section}> <!--// グループ -->
エレガント <div class="category"> <{section name=num loop=$category}> <div class="category_box_box"> <a href="<{$category[num].link_url}>"> <{$category[num].name}> <{if $category[num].img_url != ""}> <div><img src="<{$category[num].img_url}>" style="margin:3px;" /></div> <{/if}> </a> </div> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><{/if}> <div class="category_box_box"> <a href="<{$group[num].link_url}>"> <{$group[num].name}> <{if $group[num].img_url != ""}> <div><img src="<{$group[num].img_url}>" style="margin:3px;" /></div> <{/if}> </a> </div> <{if $smarty.section.num.last }></div><{/if}> <{/section}> <!--// グループ -->
</div>
フラワー <!-- CategoryArea --> <div class="linktitle_left">商品カテゴリー</div> <div class="category"> <ul> <{section name=num loop=$category}> <li> <a href="<{$category[num].link_url}>"> <{if $category[num].img_url != ""}> <img src="<{$category[num].img_url}>" /><br /> <{/if}> <span class="category_mark">■</span><{$category[num].name}> </a> </li> <{/section}> </ul> </div>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><div class="category"><ul><{/if}> <li> <a href="<{$group[num].link_url}>"> <{if $group[num].img_url != ""}> <img src="<{$group[num].img_url}>" /><br /> <{/if}> <span class="category_mark">■</span><{$group[num].name}> </a> </li> <{if $smarty.section.num.last }></ul></div></div><{/if}> <{/section}> <!--// グループ -->
ペーパー <!-- Category --> <div class="link"> <div class="top"><img src="http://img.shop-pro.jp/tmpl_img/14/spacer.gif" width="10" height="10" /></div> <div class="middle" style=""> <div class="title_gr">Category</div> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr><td> <ul> <{section name=num loop=$category}> <li> <a href="<{$category[num].link_url}>"><{$category[num].name}></a> <{if $category[num].img_url != ""}> <div><a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" style="margin-bottom:5px;" /></a></div> <{/if}> </li> <{/section}> </ul> </td></tr> </table> <br class="clear">
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><{/if}> <div class="group-list-link"> <a href="<{$group[num].link_url}>"><{$group[num].name}></a> <{if $group[num].img_url != ""}><br /> <a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /></a> <{/if}></a> </div> <{if $smarty.section.num.last }></div><{/if}> <{/section}> <!--// グループ -->
</div> <div class="bottom"><img src="http://img.shop-pro.jp/tmpl_img/14/spacer.gif" width="10" height="10" /></div> </div> <!--// Category -->
ウッド <!-- Item category area --> <div class="side_cat_bg"> <table cellpadding="0" cellspacing="0" border="0" width="190" style="text-align:left;"> <tr><td class="side_cat_title">▼ カテゴリー</td></tr> <{section name=num loop=$category}> <tr><td class="side_cat_text"> <a href="<{$category[num].link_url}>">
・ <{$category[num].name}> <{if $category[num].img_url != ""}> <div><img src="<{$category[num].img_url}>" style="margin:0px 0px 5px 5px;" /></div> <{/if}> </a> </td></tr> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <tr><td class="side_cat_text"> <a href="<{$group[num].link_url}>">
・ <{$group[num].name}> <{if $group[num].img_url != ""}> <div><img src="<{$group[num].img_url}>" style="margin:0px 0px 5px 5px;" /></div> <{/if}> </a> </td></tr> <{/section}> <!--// グループ -->
<tr><td class="side_cat_bottom"><img src="http://img.shop-pro.jp/tmpl_img/11/sp.gif" width="2" height="18"></td></tr> </table> </div> <!-- // Item category area -->
ストライプ <!-- Item category area --> <div class="linktitle">商品カテゴリー</div> <div class="linktext"> <div class="category"> <{section name=num loop=$category}> <div class="left_category_item"> <a href="<{$category[num].link_url}>"><{$category[num].name}></a> <br /> <{if $category[num].img_url != ""}><a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a><{/if}> </div> <{/section}> </div>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><div class="category"><{/if}> <div class="left_category_item"><a href="<{$group[num].link_url}>"><{$group[num].name}></a><br> <{if $group[num].img_url != ""}><a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /><{/if}></a></div> <{if $smarty.section.num.last }></div></div><{/if}> <{/section}> <!--// グループ -->
</div> <!-- // Item category area -->
2カラム(左メニュー) <!-- 商品カテゴリー--> <!-- ※カテゴリー画像が登録されている場合は画像のみ表示します --> <br /> <strong>|商品カテゴリー</strong> <br /> <{section name=num loop=$category}> <{if $category[num].img_url != ""}> <a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a><br /> <{else}> <a href="<{$category[num].link_url}>"><{$category[num].name}></a><br /> <{/if}> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><{/if}> <span class="group-list-link"> <{if $group[num].img_url != ""}> <a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /></a> <{else}> <a href="<{$group[num].link_url}>"><{$group[num].name}></a> <{/if}> </span><br /> <{if $smarty.section.num.last }></div><{/if}> <{/section}> <!--// グループ -->
<!--// 商品カテゴリー-->
2カラム(右メニュー) <!-- 商品カテゴリー--> <!-- ※カテゴリー画像が登録されている場合は画像のみ表示します --> <br /> <strong>|商品カテゴリー</strong> <br /> <{section name=num loop=$category}> <{if $category[num].img_url != ""}> <a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a><br /> <{else}> <a href="<{$category[num].link_url}>"><{$category[num].name}></a><br /> <{/if}> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><{/if}> <span class="group-list-link"> <{if $group[num].img_url != ""}> <a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /></a> <{else}> <a href="<{$group[num].link_url}>"><{$group[num].name}></a> <{/if}> </span><br /> <{if $smarty.section.num.last }></div><{/if}> <{/section}> <!--// グループ -->
<!--// 商品カテゴリー-->
3カラム <!-- 商品カテゴリー--> <!-- ※カテゴリー画像が登録されている場合は画像のみ表示します --> <br /> <strong>|商品カテゴリー</strong> <br /> <{section name=num loop=$category}> <{if $category[num].img_url != ""}> <a href="<{$category[num].link_url}>"><img src="<{$category[num].img_url}>" /></a><br /> <{else}> <a href="<{$category[num].link_url}>"><{$category[num].name}></a><br /> <{/if}> <{/section}>
<!-- グループ --> <{section name=num loop=$group}> <{if $smarty.section.num.first }><div id="group-list"><{/if}> <span class="group-list-link"> <{if $group[num].img_url != ""}> <a href="<{$group[num].link_url}>"><img src="<{$group[num].img_url}>" /></a> <{else}> <a href="<{$group[num].link_url}>"><{$group[num].name}></a> <{/if}> </span><br /> <{if $smarty.section.num.last }></div><{/if}> <{/section}> <!--// グループ -->
<!--// 商品カテゴリー-->

【共通】CSS 編集内容

以下のCSSを、使用しているテンプレートの【共通】CSS 内に追記します。
挿入箇所は、CSS内コメントテキストの「カテゴリー」や「category」、「サイドメニュー」の文字列を目安に挿入してください。

挿入するCSSは、テンプレートによって異なります。 使用しているテンプレートをクリックすると、該当のソースが表示されます。
コピーしてご利用ください。
※テンプレート「ミニ」「ヘンプ」「ウッド」はCSSを追記する必要がありません。
以上で挿入作業は完了です。