|
|
|
 
   オレンジノート系テンプレートのバージョンアップについて 〜旧テンプレートをご利用の方へ〜
このページでは【 オレンジノート 】、【 スカイノート 】、【 レタスノート 】の３種テンプレートを、よりカスタマイズしやすいようにバージョンアップを行った内容の説明しています。
【バージョンアップ内容】 ・メインとなる【商品画像】をより大きな写真が掲載しやすいようにしました！（標準テンプレートで横幅550ピクセルまで対応） ・【商品画像】にて大きな写真を掲載した際に見栄えが良くなるように、写真を左寄せから中央寄せに変更しました！ ・「販売価格」や「カートに入れる」ボタンを表示するエリアを一段レイアウトを下げて見やすくしました！ 2008年1月29日以前にダウンロードされたテンプレートには、バージョンアップ内容が実装されていません。 バージョンアップの内容を適応するには、以下の手順に従いテンプレートの編集を行ってください。 ※編集方法は使用するテンプレートにより異なります。 お知らせ 2008/01/29 ・【 オレンジノート 】、【 スカイノート 】、【 レタスノート 】の３種テンプレートのバージョンアップを行いました。  バージョンアップ内容を適応するには
【対応内容】
以下の二通りございます。どちらかの対応をお願いします。
|
商品画像10枚表示
【商品詳細html】に、バージョンアップ内容の表示用htmlを追記します。
オレンジノート
<div class="detail_img">
<!-- 商品メイン画像 -->
<{if $product.img_url != ""}><img src="<{$product.img_url}>" class="mainimg" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/17/noimg200.gif" class="mainimg" /><{/if}> <!--// 商品メイン画像 -->
</div>
<div class="spec_area">
<!-- 商品のスペック表 -->
<table class="spec" border="0" cellpadding="0" cellspacing="1"> <{if $product.model != ""}><tr> <th>型番</th> <td><{$product.model}></td> </tr> <{/if}> <{if $product.price_disp == true}><tr> <th>定価</th> <td><{$product.price}></td> </tr> <{/if}> <tr> <th>販売価格</th> <td class="sales"><{$product.sales}></td> </tr> <{if $product.stock_disp == true}><tr> <th>在庫数</th> <td><{$product.stock_str}></td> </tr> <{/if}> <{if $product.soldout_flg == 0 }><tr> <th>購入数</th> <td> <table class="num" border="0" cellpadding="0" cellspacing="0"> <tr> <td><input type="text" name="product_num" value="<{$product.init_num}>" style="width: 50px;" /></td> <td> <div style="width: 15px; margin: 0px;"> <a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>"></a> <a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>"></a> </div> </td> <td><{$product.unit}></td> </tr> </table> </td> </tr> <{/if}> <{section name=num loop=$option}><tr> <th><{$option[num].name}></th> <td> <select name="<{$option[num].select_name}>"> <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key }> </select> </td> </tr> <{/section}> </table> <!--// 商品のスペック表 --> <{if $opt_url <> ""}> <{if $product.stock_disp == true}><p><a href="<{$opt_url}>">オプションの在庫・価格の詳細はコチラ</a></p> <{else}><p><a href="<{$opt_url}>">オプションの価格詳細はコチラ</a></p> <{/if}> <{/if}> <!-- ”カートに入れる”ボタン（売切れ時は表示しない） --> <div class="cart_in"><{if $product.soldout_flg == 0 }><input type="image" src="http://img.shop-pro.jp/tmpl_img/17/cart_in.gif" title="カートに入れる" /> <{/if}></div> <!--// ”カートに入れる”ボタン -->
</div>
<br class="clear" /> <!-- 商品の説明文 --> <div class="explain"><{$product.explain}></div> <!--// 商品の説明文 --> |
|
スカイノート
<div class="detail_img">
<!-- 商品メイン画像 -->
<{if $product.img_url != ""}><img src="<{$product.img_url}>" class="mainimg" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/24/noimg200.gif" class="mainimg" /><{/if}> <!--// 商品メイン画像 -->
</div>
<div class="spec_area">
<!-- 商品のスペック表 -->
<table class="spec" border="0" cellpadding="0" cellspacing="1"> <{if $product.model != ""}><tr> <th>型番</th> <td><{$product.model}></td> </tr> <{/if}> <{if $product.price_disp == true}><tr> <th>定価</th> <td><{$product.price}></td> </tr> <{/if}> <tr> <th>販売価格</th> <td class="sales"><{$product.sales}></td> </tr> <{if $product.stock_disp == true}><tr> <th>在庫数</th> <td><{$product.stock_str}></td> </tr> <{/if}> <{if $product.soldout_flg == 0 }><tr> <th>購入数</th> <td> <table class="num" border="0" cellpadding="0" cellspacing="0"> <tr> <td><input type="text" name="product_num" value="<{$product.init_num}>" style="width: 50px;" /></td> <td> <div style="width: 15px; margin: 0px;"> <a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>"></a> <a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>"></a> </div> </td> <td><{$product.unit}></td> </tr> </table> </td> </tr> <{/if}> <{section name=num loop=$option}><tr> <th><{$option[num].name}></th> <td> <select name="<{$option[num].select_name}>"> <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key }> </select> </td> </tr> <{/section}> </table> <!--// 商品のスペック表 --> <{if $opt_url <> ""}> <{if $product.stock_disp == true}><p><a href="<{$opt_url}>">オプションの在庫・価格の詳細はコチラ</a></p> <{else}><p><a href="<{$opt_url}>">オプションの価格詳細はコチラ</a></p> <{/if}> <{/if}> <!-- ”カートに入れる”ボタン（売切れ時は表示しない） --> <div class="cart_in"><{if $product.soldout_flg == 0 }><input type="image" src="http://img.shop-pro.jp/tmpl_img/24/cart_in.gif" title="カートに入れる" /> <{/if}></div> <!--// ”カートに入れる”ボタン -->
</div>
<br class="clear" /> <!-- 商品の説明文 --> <div class="explain"><{$product.explain}></div> <!--// 商品の説明文 --> |
|
レタスノート
<div class="detail_img">
<!-- 商品メイン画像 -->
<{if $product.img_url != ""}><img src="<{$product.img_url}>" class="mainimg" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/25/noimg200.gif" class="mainimg" /><{/if}> <!--// 商品メイン画像 -->
</div>
<div class="spec_area">
<!-- 商品のスペック表 -->
<table class="spec" border="0" cellpadding="0" cellspacing="1"> <{if $product.model != ""}><tr> <th>型番</th> <td><{$product.model}></td> </tr> <{/if}> <{if $product.price_disp == true}><tr> <th>定価</th> <td><{$product.price}></td> </tr> <{/if}> <tr> <th>販売価格</th> <td class="sales"><{$product.sales}></td> </tr> <{if $product.stock_disp == true}><tr> <th>在庫数</th> <td><{$product.stock_str}></td> </tr> <{/if}> <{if $product.soldout_flg == 0 }><tr> <th>購入数</th> <td> <table class="num" border="0" cellpadding="0" cellspacing="0"> <tr> <td><input type="text" name="product_num" value="<{$product.init_num}>" style="width: 50px;" /></td> <td> <div style="width: 15px; margin: 0px;"> <a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>"></a> <a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>"></a> </div> </td> <td><{$product.unit}></td> </tr> </table> </td> </tr> <{/if}> <{section name=num loop=$option}><tr> <th><{$option[num].name}></th> <td> <select name="<{$option[num].select_name}>"> <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key }> </select> </td> </tr> <{/section}> </table> <!--// 商品のスペック表 --> <{if $opt_url <> ""}> <{if $product.stock_disp == true}><p><a href="<{$opt_url}>">オプションの在庫・価格の詳細はコチラ</a></p> <{else}><p><a href="<{$opt_url}>">オプションの価格詳細はコチラ</a></p> <{/if}> <{/if}> <!-- ”カートに入れる”ボタン（売切れ時は表示しない） --> <div class="cart_in"><{if $product.soldout_flg == 0 }><input type="image" src="http://img.shop-pro.jp/tmpl_img/25/cart_in.gif" title="カートに入れる" /> <{/if}></div> <!--// ”カートに入れる”ボタン -->
</div>
<br class="clear" /> <!-- 商品の説明文 --> <div class="explain"><{$product.explain}></div> <!--// 商品の説明文 --> |
【共通css】編集内容
使用しているテンプレートを確認
【共通css】で編集するタグは、オレンジノート、スカイノート、レタスノートの３種類共通の内容で編集が可能です。
タグの編集箇所を確認
<!-- 黄色いマークの文字列 --> が編集箇所の目安となりますので、
文字列を【共通css】内にて検索します。編集箇所は２箇所あるのでご注意ください。
【その１】指定タグを削除
<!-- 黄色いマークの文字列 --> を検索後、
１、 グレーエリアのタグ を削除してください。（１箇所あります）
１、 グレーエリアのタグ を削除してください。（１箇所あります）
【その２】指定タグを削除、挿入
<!-- 黄色いマークの文字列 --> を検索後、
１、 グレーエリアのタグ を削除してください。（１箇所あります）
２、 ピンクエリアの追加タグ を挿入してください。（１箇所あります）
１、 グレーエリアのタグ を削除してください。（１箇所あります）
２、 ピンクエリアの追加タグ を挿入してください。（１箇所あります）
|
【その１】オレンジノート、スカイノート、レタスノート共通
* 商品画像のサイズ・装飾設定(商品画像のサイズは「画像サイズ設定」で行います) * ------------------------------------- */ /* 画像のボーダー */ img.border { border:1px <{$productimg_border}> solid; } /* メイン画像（大サイズ）*/
img.mainimg {
border:1px <{$productimg_border}> solid;
float:left;
margin-bottom:10px;
} /* 商品のその他画像のサイズ */ img.thumnail { width:<{$left_width}>; } |
|
【その２】オレンジノート、スカイノート、レタスノート共通
/* ************************************************
* 商品詳細ページ * ************************************************ */ div.detail {margin:10px 0;}
div.detail_img {width:100%;text-align:center;}
/* ------------------------------------- * 商品のスペック表 * ------------------------------------- */
/* -----------------------------
* ■商品画像の配置に関して■ * 商品画像は幅200pxを標準サイズとしています。 * 画像のサイズにあわせて、商品のスペック表の表示位置を調整しています。 * 幅200px以上の画像を掲載する場合は、「div.spec_area」の「margin-left」 * の値を編集してください。 * 【例】幅300pxの画像を掲載する場合は、「div.spec_area」の「margin-left」 * の値を「300px」に変更してください。 * ----------------------------- */ div.spec_area { margin-left:200px; /* 商品詳細画像の値と同じ（メイン画像のサイズに合わせて回り込む） */ padding-left:20px; } table.spec { background:<{$productlist_border}>;/*商品価格表-罫線の色*/ width:100%; } |
以上で挿入作業は完了です。
ショッピングカートシステム カラーミーショップ Copyright (C) 2005-2013 paperboy&co. All Rights Reserved.