商品画像10枚表示 PC版無料テンプレート用
このページでは、レギュラーより上のプランにプランアップした際に、
レギュラーより上のプランで標準機能である商品画像10枚表示を行う為の、既存テンプレートの修正方法を説明しています。
レギュラーより上のプランで標準機能である商品画像10枚表示を行う為の、既存テンプレートの修正方法を説明しています。
商品画像10枚表示は、レギュラーより上のプランをご利用のショップ様のみとなります。それ以外のプランをご利用いただいているショップ様が、本修正を行いましても、
商品画像10枚表示は行えません。ご了承ください。
2013年5月13日以降にダウンロードされたショップテンプレートには、本修正を行う必要はございません。
商品画像10枚表示は行えません。ご了承ください。
2013年5月13日以降にダウンロードされたショップテンプレートには、本修正を行う必要はございません。
- 商品画像10枚表示 PC版無料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 PC版有料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 モバイル版無料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 モバイル版有料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 スマートフォン版無料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 スマートフォン版有料テンプレート用 アップデートマニュアルはこちら
商品画像10枚表示用タグ追加方法 … PC版無料テンプレート用
対応方法は以下の２通りございます。どちらかの対応をお願いします。
■ 対応方法１：再度テンプレートを追加する 【※推奨】
■ 対応方法２：テンプレートの該当箇所を修正、または追加する
テンプレートの編集を行う場合は、【商品詳細】HTML・【共通】CSS の計2箇所を編集します。
使用するテンプレートを確認し、編集を行ってください。
» 各テンプレート修正内容へのリンク一覧はこちら
使用するテンプレートを確認し、編集を行ってください。
» 各テンプレート修正内容へのリンク一覧はこちら
※修正タグを変更する位置が不明な場合は、ご利用中のテンプレートと同じテンプレートを追加していただき、
修正用タグが記述されている位置をご確認ください。
商品画像10枚表示用タグ追加手順
使用しているテンプレートを確認
【商品詳細】HTML に追加するタグは各テンプレート毎に異なります。対象のテンプレートをご確認ください。
タグの挿入箇所を確認
【テンプレート別挿入タグ一覧表】の、 <!-- 黄色いマークの文字列 --> が挿入箇所の目安となりますので、
文字列を【商品詳細】HTML 内にて検索します。
文字列を【商品詳細】HTML 内にて検索します。
指定タグをコピー、挿入
・検索後、各テンプレートの追加位置をご確認いただき、 ピンクエリアの追加タグ を挿入してください。
・テンプレートによっては、一部タグを削除していただいた後、タグを追加していただく必要がございます。
削除する必要のタグがある場合、 削除該当部分を グレーエリア で表示しています。
グレーエリア 部分のタグを削除後に、 ピンクエリアの追加タグ 部分のタグを挿入してください。
・追加するHTMLタグには、画像を１枚ずつ追加するタグと、画像をまとめて出力するタグの２通りがございます。
どちらのタグをご利用いただいても、商品画像は表示されますので、
テンプレートのカスタマイズなど行っている場合は、カスタマイズに合ったHTMLタグをご利用ください。
※CSSは共通です。
・テンプレートによっては、一部タグを削除していただいた後、タグを追加していただく必要がございます。
削除する必要のタグがある場合、 削除該当部分を グレーエリア で表示しています。
グレーエリア 部分のタグを削除後に、 ピンクエリアの追加タグ 部分のタグを挿入してください。
・追加するHTMLタグには、画像を１枚ずつ追加するタグと、画像をまとめて出力するタグの２通りがございます。
どちらのタグをご利用いただいても、商品画像は表示されますので、
テンプレートのカスタマイズなど行っている場合は、カスタマイズに合ったHTMLタグをご利用ください。
※CSSは共通です。
■ テンプレート別挿入タグ一覧表 PC版無料テンプレート 【 商品詳細 】HTML
｜ ウェスト（ホワイト） ｜ ウェスト（ブラック） ｜ ピン（ライトグレー） ｜ フォトグラフ（ウッド） ｜ メモリー ｜ オレンジノート ｜ スカイノート ｜ レタスノート ｜ プレーン ｜ シンプル（レッド） ｜ シンプル（ブルー） ｜ シンプル（グレー） ｜ シンプル（ラベンダー） ｜ ミニ ｜ ヘンプ ｜ ビター ｜ アクア ｜ ブロック ｜ 鹿の子 ｜ レース ｜ ビューティー ｜ ナチュラル ｜ エレガント ｜ フラワー ｜ ブルーチェック ｜ ペーパー ｜ ウッド ｜ ストライプ ｜ 2カラム（左メニュー） ｜ 2カラム（右メニュー） ｜ 3カラム ｜ ベビー ｜ レッドチェック ｜ リネン ｜ モール１ ｜ モール２ ｜
■ ウェスト（ホワイト）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<div class="zoom-desc"> <{if $product.img_url != ""}> <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' "> <img class="zoom-tiny-image" src="<{$product.img_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot1_url != ""}> <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot1_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot2_url != ""}> <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot2_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot3_url != ""}> <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot3_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot4_url != ""}> <a href="<{$product.ot4_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot4_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot4_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot5_url != ""}> <a href="<{$product.ot5_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot5_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot5_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot6_url != ""}> <a href="<{$product.ot6_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot6_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot6_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot7_url != ""}> <a href="<{$product.ot7_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot7_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot7_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot8_url != ""}> <a href="<{$product.ot8_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot8_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot8_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot9_url != ""}> <a href="<{$product.ot9_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot9_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot9_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot10_url != ""}> <a href="<{$product.ot10_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot10_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot10_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<div class="zoom-desc"> <{if $product.img_url != ""}> <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' "> <img class="zoom-tiny-image" src="<{$product.img_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot1_url != ""}> <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot1_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot2_url != ""}> <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot2_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $product.ot3_url != ""}> <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot3_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a href="<{$otherimg[num].url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$otherimg[num].url}>' "> <img class="zoom-tiny-image" src="<{$otherimg[num].url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/56/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/56/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/56/l.gif" /> </a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ ウェスト（ブラック）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<div class="zoom-desc"> <{if $product.img_url != ""}> <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' "> <img class="zoom-tiny-image" src="<{$product.img_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot1_url != ""}> <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot1_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot2_url != ""}> <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot2_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot3_url != ""}> <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot3_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot4_url != ""}> <a href="<{$product.ot4_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot4_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot4_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot5_url != ""}> <a href="<{$product.ot5_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot5_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot5_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot6_url != ""}> <a href="<{$product.ot6_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot6_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot6_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot7_url != ""}> <a href="<{$product.ot7_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot7_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot7_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot8_url != ""}> <a href="<{$product.ot8_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot8_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot8_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot9_url != ""}> <a href="<{$product.ot9_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot9_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot9_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot10_url != ""}> <a href="<{$product.ot10_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot10_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot10_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<div class="zoom-desc"> <{if $product.img_url != ""}> <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' "> <img class="zoom-tiny-image" src="<{$product.img_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot1_url != ""}> <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot1_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot2_url != ""}> <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot2_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $product.ot3_url != ""}> <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot3_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a href="<{$otherimg[num].url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$otherimg[num].url}>' "> <img class="zoom-tiny-image" src="<{$otherimg[num].url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/57/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/57/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/57/l.gif" /> </a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ ピン（ライトグレー）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- その他の画像 --> <{if $product.ot1_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a> </div> <{/if}> <{if $product.ot4_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a> </div> <{/if}> <{if $product.ot5_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a> </div> <{/if}> <{if $product.ot6_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a> </div> <{/if}> <{if $product.ot7_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a> </div> <{/if}> <{if $product.ot8_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a> </div> <{/if}> <{if $product.ot9_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a> </div> <{/if}> <{if $product.ot10_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot10_url}>"><img src="<{$product.ot10_url}>" /></a> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- その他の画像 --> <{if $product.ot1_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a> </div> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="box product_image_other"> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a> </div> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ フォトグラフ（ウッド）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<div class="zoom-desc"> <{if $product.img_url != ""}> <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' "> <img class="zoom-tiny-image" src="<{$product.img_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot1_url != ""}> <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot1_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot2_url != ""}> <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot2_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot3_url != ""}> <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot3_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot4_url != ""}> <a href="<{$product.ot4_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot4_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot4_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot5_url != ""}> <a href="<{$product.ot5_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot5_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot5_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot6_url != ""}> <a href="<{$product.ot6_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot6_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot6_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot7_url != ""}> <a href="<{$product.ot7_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot7_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot7_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot8_url != ""}> <a href="<{$product.ot8_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot8_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot8_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot9_url != ""}> <a href="<{$product.ot9_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot9_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot9_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot10_url != ""}> <a href="<{$product.ot10_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot10_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot10_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<div class="zoom-desc"> <{if $product.img_url != ""}> <a href="<{$product.img_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.img_url}>' "> <img class="zoom-tiny-image" src="<{$product.img_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot1_url != ""}> <a href="<{$product.ot1_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot1_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot1_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot2_url != ""}> <a href="<{$product.ot2_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot2_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot2_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $product.ot3_url != ""}> <a href="<{$product.ot3_url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$product.ot3_url}>' "> <img class="zoom-tiny-image" src="<{$product.ot3_url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a href="<{$otherimg[num].url}>" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' <{$otherimg[num].url}>' "> <img class="zoom-tiny-image" src="<{$otherimg[num].url}>" /> </a> <{else}> <a href="http://img.shop-pro.jp/tmpl_img/59/l.gif" class="cloud-zoom-gallery" title="" rel="useZoom: 'zoom1', smallImage: ' http://img.shop-pro.jp/tmpl_img/59/l.gif' "> <img class="zoom-tiny-image" src="http://img.shop-pro.jp/tmpl_img/59/l.gif" /> </a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ メモリー
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品サブ画像 --> <div class="subimg"> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a> <{/if}> <{if $product.ot4_url != ""}> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a> <{/if}> <{if $product.ot5_url != ""}> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a> <{/if}> <{if $product.ot6_url != ""}> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a> <{/if}> <{if $product.ot7_url != ""}> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a> <{/if}> <{if $product.ot8_url != ""}> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a> <{/if}> <{if $product.ot9_url != ""}> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a> <{/if}> </div> <!--// 商品サブ画像 -->
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品サブ画像 --> <div class="subimg"> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a> <{/if}> </div> <{if $otherimg_num != 0}> <div class="subimg"> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a> <{/if}> <{/section}> </div> <{/if}> <!--// 商品サブ画像 -->
共通CSS
/* 商品その他画像のサイズと装飾 */ .subimg img{ width:<{$link_img}>; border:1px solid <{$productimg_border}>; margin-right:5px; margin-top:3px; margin-bottom:3px; }
■ オレンジノート
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail border" /></a><{/if}> <!--// 商品サブ画像 -->
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail border" /></a> <{/if}> <{/section}> <{/if}> <!--// 商品サブ画像 -->
共通CSS
このテンプレートでのCSS修正はありません。
■ スカイノート
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail border" /></a><{/if}> <!--// 商品サブ画像 -->
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail border" /></a> <{/if}> <{/section}> <{/if}> <!--// 商品サブ画像 -->
共通CSS
このテンプレートでのCSS修正はありません。
■ レタスノート
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail border" /></a><{/if}> <!--// 商品サブ画像 -->
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail border" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail border" /></a><{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail border" /></a> <{/if}> <{/section}> <{/if}> <!--// 商品サブ画像 -->
共通CSS
このテンプレートでのCSS修正はありません。
■ プレーン
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <div> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $product.ot4_url != ""}> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small small_tp" /></a> <{/if}> <{if $product.ot5_url != ""}> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small small_tp" /></a> <{/if}> <{if $product.ot6_url != ""}> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small small_tp" /></a> <{/if}> <{if $product.ot7_url != ""}> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small small_tp" /></a> <{/if}> <{if $product.ot8_url != ""}> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small small_tp" /></a> <{/if}> <{if $product.ot9_url != ""}> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small small_tp" /></a> <{/if}> </div> <br style="clear:both;">
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <div> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small<{if $smarty.section.num.index >= 3 }> small_tp<{/if}>" /></a> <{/if}> <{/section}> <{/if}> </div> <br style="clear:both;">
共通CSS
/* ************************************************ * 商品詳細 * ************************************************ */ .large { } .small { width:150px ; margin:0px 10px 0px 0px; float:left; } .small_tp { margin-top:10px; }
■ シンプル（レッド）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $product.ot4_url != ""}> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a> <{/if}> <{if $product.ot5_url != ""}> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a> <{/if}> <{if $product.ot6_url != ""}> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a> <{/if}> <{if $product.ot7_url != ""}> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a> <{/if}> <{if $product.ot8_url != ""}> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a> <{/if}> <{if $product.ot9_url != ""}> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ シンプル（ブルー）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $product.ot4_url != ""}> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a> <{/if}> <{if $product.ot5_url != ""}> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a> <{/if}> <{if $product.ot6_url != ""}> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a> <{/if}> <{if $product.ot7_url != ""}> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a> <{/if}> <{if $product.ot8_url != ""}> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a> <{/if}> <{if $product.ot9_url != ""}> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ シンプル（グレー）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $product.ot4_url != ""}> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a> <{/if}> <{if $product.ot5_url != ""}> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a> <{/if}> <{if $product.ot6_url != ""}> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a> <{/if}> <{if $product.ot7_url != ""}> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a> <{/if}> <{if $product.ot8_url != ""}> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a> <{/if}> <{if $product.ot9_url != ""}> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ シンプル（ラベンダー）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $product.ot4_url != ""}> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a> <{/if}> <{if $product.ot5_url != ""}> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a> <{/if}> <{if $product.ot6_url != ""}> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a> <{/if}> <{if $product.ot7_url != ""}> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a> <{/if}> <{if $product.ot8_url != ""}> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a> <{/if}> <{if $product.ot9_url != ""}> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ ミニ
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <br><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $product.ot4_url != ""}> <br><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a> <{/if}> <{if $product.ot5_url != ""}> <br><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a> <{/if}> <{if $product.ot6_url != ""}> <br><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a> <{/if}> <{if $product.ot7_url != ""}> <br><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a> <{/if}> <{if $product.ot8_url != ""}> <br><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a> <{/if}> <{if $product.ot9_url != ""}> <br><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <br><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <br><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ ヘンプ
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- Product(商品詳細) --> <table class="main_title" cellpadding="0" cellspacing="0" border="0"> <tr><td><{$product.name}></td></tr> </table> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="detail"> <{if $product.img_url != ""}><img src="<{$product.img_url}>" class="main_img" alt="" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/26/now_m.gif" class="main_img" alt="" /><{/if}> <div class="expl"><{$product.explain}></div> <{if $product.ot1_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a></div><{/if}> <{if $product.ot2_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a></div><{/if}> <{if $product.ot3_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a></div><{/if}> <{if $product.ot4_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" /></a></div><{/if}> <{if $product.ot5_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" /></a></div><{/if}> <{if $product.ot6_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" /></a></div><{/if}> <{if $product.ot7_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" /></a></div><{/if}> <{if $product.ot8_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" /></a></div><{/if}> <{if $product.ot9_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" /></a></div><{/if}> <br style="clear:both;" />
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- Product(商品詳細) --> <table class="main_title" cellpadding="0" cellspacing="0" border="0"> <tr><td><{$product.name}></td></tr> </table> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="detail"> <{if $product.img_url != ""}><img src="<{$product.img_url}>" class="main_img" alt="" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/26/now_m.gif" class="main_img" alt="" /><{/if}> <div class="expl"><{$product.explain}></div> <{if $product.ot1_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a></div><{/if}> <{if $product.ot2_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a></div><{/if}> <{if $product.ot3_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a></div><{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>"><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" /></a></div> <{/if}> <{/section}> <{/if}> <br style="clear:both;" />
共通CSS
追加タグ
/* ************************************************ * 商品詳細 レイアウト * ************************************************ */ #detail { text-align:center; color:<{$font_color}>; } #detail .expl { line-height:150%; text-align: left; margin: 10px 10px 5px 10px; } #detail .main_img { padding: 4px; border:1px #dacdb9 solid; } #detail .sub { float: left; width: 188px; text-align: center; } #detail .sub_tp { padding-top:18px; }
■ ビター
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot4_url != ""}><br /><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot7_url != ""}><br /><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail" /></a> <{/if}> <!--// 商品サブ画像 -->
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail" /></a> <{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <{if $smarty.section.num.index%3 == 0 && $smarty.section.num.index != 0 }> <br /> <{/if}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail" /></a> <{/if}> <{/section}> <{/if}> <!--// 商品サブ画像 -->
共通CSS
このテンプレートでのCSS修正はありません。
■ アクア
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <div id="detailImg" style="padding:10px 0px;"> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a><{/if}> <{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a><{/if}> <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a><{/if}> <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a><{/if}> <{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a><{/if}> <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a><{/if}> <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a><{/if}> </div>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <div id="detailImg" style="padding:10px 0px;"> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a><{/if}> <{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a><{/if}><{/section}><{/if}> </div>
共通CSS
削除タグ 追加タグ
/*---------------------------------------------------------------------- 商品詳細 ----------------------------------------------------------------------*/ #detail { padding : 0px 15px; } .product_explain { line-height : 180%; padding : 10px 0px; } #detailImg { border-top : 1px dotted <{$productimg_border}>; } #detailImg a { color : #fff; } img.small { width: 150px; margin-right:7px; margin:4px 7px 3px 0px; }
■ ブロック
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- メイン画像 --> <div class="main_menu">商品詳細</div> <div style="width:210px; margin:15px auto; text-align:center;"> <div style="width:210px; margin:15px auto 35px; text-align:center;"> <div class="main_more_1"><{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/3/now200.gif"><{/if}></div> <div class="main_more_3"><{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="60px" /></a><{/if}></div> <div style="clear:left;"></div> </div>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- メイン画像 --> <div class="main_menu">商品詳細</div> <div style="width:210px; margin:15px auto; text-align:center;"> <div style="width:210px; margin:15px auto 35px; text-align:center;"> <div class="main_more_1"><{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/3/now200.gif"><{/if}></div> <div class="main_more_3"><{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}></div> <div class="main_more_3"><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}></div> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="main_more_3"><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="60px" /></a></div> <{/if}> <{/section}> <{/if}> <div style="clear:left;"></div> </div>
共通CSS
削除タグ 追加タグ
/* ------------------------------------------- * 商品その他画像 * ------------------------------------------- */ .main_more_3 { width: 60px; padding: 10px 5px; margin-bottom: 10px; padding: 10px 5px 0px; float: left; }
■ 鹿の子
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品サブ画像 --> <dd> <{if $product.ot1_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a> </div> <{/if}> <br class="clear" /> <{if $product.ot4_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a> </div> <{/if}> <{if $product.ot5_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a> </div> <{/if}> <{if $product.ot6_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a> </div> <{/if}> <br class="clear" /> <{if $product.ot7_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a> </div> <{/if}> <{if $product.ot8_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a> </div> <{/if}> <{if $product.ot9_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a> </div> <{/if}> <br class="clear" /> </dd> <!--// 商品サブ画像 -->
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品サブ画像 --> <dd> <{if $product.ot1_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="subimg"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom"></a> </div> <{/if}> <br class="clear" /> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <{if $smarty.section.num.index%3 == 0 && $smarty.section.num.index != 0 }> <br class="clear" /> <{/if}> <div class="subimg"> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumbnail img_border" /><img src="http://img.shop-pro.jp/tmpl_img/19/zoom.gif" class="zoom" /></a> </div> <{/if}> <{/section}> <br class="clear" /> <{/if}> </dd> <!--// 商品サブ画像 -->
共通CSS
削除タグ 追加タグ
/* ------------------------------------- * 商品のその他画像 * ------------------------------------- */ .subimg { width:<{$left_width}>;/* サムネイル画像のサイズ（初期モードで設定） */ float:left; margin-right:20px; margin:5px 20px 5px 0px; }
■ レース
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- サブ画像 --> <{if $product.ot1_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot2_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot3_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot4_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot5_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot6_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot7_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot8_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot9_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="sub border" /></a></div> <{/if}> <br class="clr" />
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- サブ画像 --> <{if $product.ot1_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot2_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="sub border" /></a></div> <{/if}> <{if $product.ot3_url != ""}><div class="detail_sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="sub border" /></a></div> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="detail_sub"><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="sub border" /></a></div> <{/if}> <{/section}> <{/if}> <br class="clr" />
共通CSS
このテンプレートでのCSS修正はありません。
■ ビューティー
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{ else }> <{/if}> <{if $product.ot2_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <{if $product.ot3_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <{if $product.ot4_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <{if $product.ot5_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <{if $product.ot6_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <{if $product.ot7_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <{if $product.ot8_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <{if $product.ot9_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <!--// 商品サブ画像 -->
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品サブ画像 --> <{if $product.ot1_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{ else }> <{/if}> <{if $product.ot2_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <{if $product.ot3_url != ""}><div class="sub_img"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div><{/if}> <{if $otherimg_num != 0}> <{if $smarty.section.num.index == 0 || $otherimg[num].url == "" }> <{/if}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="sub_img"> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="thumnail" /><img src="http://img.shop-pro.jp/tmpl_img/15/zoom.gif" class="zoom"></a> </div> <{/if}> <{/section}> <{/if}> <!--// 商品サブ画像 -->
共通CSS
追加タグ
/*価格詳細表*/ .spec { font-size:12px; margin:10px 0px 0px 0px; } .spec td { height:20px; padding-right:10px; } .sub_img { float:left; width:100px; margin-right:5px; margin-bottom:5px; }
■ ナチュラル
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- Product(商品詳細) --> <div class="linktitle">商品詳細</div> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <table width="550" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="220" valign="top" align="center"> <div class="product_img_main">商品イメージ</div> <{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/1/now200.gif"><{/if}> <div class="product_img_sub"></div> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}> <{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="60px" /></a><{/if}> <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="60px" /></a><{/if}> <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="60px" /></a><{/if}> <{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="60px" /></a><{/if}> <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="60px" /></a><{/if}> <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="60px" /></a><{/if}> </td>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- Product(商品詳細) --> <div class="linktitle">商品詳細</div> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <table width="550" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="220" valign="top" align="center"> <div class="product_img_main">商品イメージ</div> <{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/1/now200.gif"><{/if}> <div class="product_img_sub"></div> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="60px" /></a> <{/if}> <{/section}> <{/if}> </td>
共通CSS
このテンプレートでのCSS修正はありません。
■ エレガント
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $product.ot4_url != ""}> <br><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a> <{/if}> <{if $product.ot5_url != ""}> <br><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a> <{/if}> <{if $product.ot6_url != ""}> <br><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a> <{/if}> <{if $product.ot7_url != ""}> <br><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a> <{/if}> <{if $product.ot8_url != ""}> <br><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a> <{/if}> <{if $product.ot9_url != ""}> <br><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <{if $smarty.section.num.index != 0 }><br><{/if}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ フラワー
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- Product(商品詳細) --> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <table width="400" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td valign="top" align="center" class="product_picture01"> <div style="margin:15px 15px;"> <{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/2/now200.gif"><{/if}> <div class="product_img_sub"></div> <div class="product_img_sub_parts_wrap"> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}> <{if $product.ot4_url != ""}><br /><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="60px" /></a><{/if}> <{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="60px" /></a><{/if}> <{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="60px" /></a><{/if}> <{if $product.ot7_url != ""}><br /><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="60px" /></a><{/if}> <{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="60px" /></a><{/if}> <{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="60px" /></a><{/if}> </div> </div> </td></tr>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- Product(商品詳細) --> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <table width="400" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td valign="top" align="center" class="product_picture01"> <div style="margin:15px 15px;"> <{if $product.img_url != ""}><img src="<{$product.img_url}>" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/2/now200.gif"><{/if}> <div class="product_img_sub"></div> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="60px" /></a><{/if}> <{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="60px" /></a><{/if}> <{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="60px" /></a><{/if}> <{if $otherimg_num != 0}> <div class="product_img_sub_parts_wrap"> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <{if $smarty.section.num.index%3 == 0 && $smarty.section.num.index != 0 }><br /><{/if}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="60px" /></a> <{/if}> <{/section}> </div> <{/if}> </div> </td></tr>
共通CSS
追加タグ
/* 特定商取引法に基づく表記（返品など）ボタン */ p#sk_link_other { text-align:left; margin-top:10px; } p#sk_link_other a { font-size:12px; } /* その他画像 */ .product_img_sub_parts_wrap { line-height:1.5em; }
■ ブルーチェック
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- Product(商品詳細) --> <table cellpadding="0" cellspacing="0" border="0" class="main_title"> <tr> <td><{$product.name}></td> </tr> </table> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="detail"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" class="main_img" alt="" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/27/now_m.gif" class="main_img" alt="" /> <{/if}> <div class="expl"> <{$product.explain}> </div> <{if $product.ot1_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot4_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot5_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot6_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot7_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot8_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot9_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" /></a> </div> <{/if}> <br style="clear:both;" />
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- Product(商品詳細) --> <table cellpadding="0" cellspacing="0" border="0" class="main_title"> <tr> <td><{$product.name}></td> </tr> </table> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="detail"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" class="main_img" alt="" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/27/now_m.gif" class="main_img" alt="" /> <{/if}> <div class="expl"> <{$product.explain}> </div> <{if $product.ot1_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a> </div> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>"> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" /></a> </div> <{/if}> <{/section}> <{/if}> <br style="clear:both;" />
共通CSS
追加タグ
/* ************************************************ * 商品詳細 レイアウト * ************************************************ */ #detail { text-align:center; color:<{$font_color}>; } #detail .expl { line-height:150%; text-align:left; margin:10px 10px 5px 10px; } #detail .main_img { padding:4px; border-top:1px solid #D1D1D1; border-left:1px solid #D1D1D1; border-right:1px solid #989898; border-bottom:1px solid #989898; } #detail .sub { float:left; width:188px; text-align:center; } #detail .sub_tp { padding-top:18px; }
■ ペーパー
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品サブ画像 --><{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a><{/if}><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a><{/if}><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a><{/if}><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a><{/if}><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a><{/if}><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a><{/if}><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a><{/if}><!--// 商品サブ画像 -->
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品サブ画像 --><{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a><{/if}><{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a><{/if}><{/section}><{/if}><!--// 商品サブ画像 -->
共通CSS
このテンプレートでのCSS修正はありません。
■ ウッド
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- Product(商品詳細) --> <table class="main_title" cellpadding="0" cellspacing="0" border="0"> <tr><td><img src="http://img.shop-pro.jp/tmpl_img/11/sp.gif" width="15px" height="5px">▼ <{$product.name}></td></tr> </table> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="detail"> <{if $product.img_url != ""}><img src="<{$product.img_url}>" class="main_img" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/11/now_m.gif" class="main_img"><{/if}> <div class="expl"><{$product.explain}></div> <{if $product.ot1_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a></div><{/if}> <{if $product.ot2_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a></div><{/if}> <{if $product.ot3_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a></div><{/if}> <{if $product.ot4_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a></div><{/if}> <{if $product.ot5_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a></div><{/if}> <{if $product.ot6_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a></div><{/if}> <{if $product.ot7_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a></div><{/if}> <{if $product.ot8_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a></div><{/if}> <{if $product.ot9_url != ""}><div class="sub sub_tp"><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a></div><{/if}> <br style="clear:both;" />
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- Product(商品詳細) --> <table class="main_title" cellpadding="0" cellspacing="0" border="0"> <tr><td><img src="http://img.shop-pro.jp/tmpl_img/11/sp.gif" width="15px" height="5px">▼ <{$product.name}></td></tr> </table> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="detail"> <{if $product.img_url != ""}><img src="<{$product.img_url}>" class="main_img" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/11/now_m.gif" class="main_img"><{/if}> <div class="expl"><{$product.explain}></div> <{if $product.ot1_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a></div><{/if}> <{if $product.ot2_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a></div><{/if}> <{if $product.ot3_url != ""}><div class="sub"><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a></div><{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>"> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a> </div> <{/if}> <{/section}> <{/if}> <br style="clear:both;" />
共通CSS
/* ************************************************ * 商品詳細 レイアウト * ************************************************ */ #detail { text-align:center; color:<{$font_color}>; } #detail .expl { line-height:150%; text-align: left; margin: 10px 10px 5px 10px; } #detail .main_img { padding: 4px; border-top: 1px #D1D1D1 solid; border-right: 1px #989898 solid; border-bottom: 1px #989898 solid; border-left: 1px #D1D1D1 solid; } #detail .sub { float: left; width: 188px; text-align: center; } #detail .sub_tp { padding-top:18px; }
■ ストライプ
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $product.ot4_url != ""}> <br><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" class="small" /></a> <{/if}> <{if $product.ot5_url != ""}> <br><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" class="small" /></a> <{/if}> <{if $product.ot6_url != ""}> <br><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" class="small" /></a> <{/if}> <{if $product.ot7_url != ""}> <br><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" class="small" /></a> <{/if}> <{if $product.ot8_url != ""}> <br><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" class="small" /></a> <{/if}> <{if $product.ot9_url != ""}> <br><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" class="small" /></a> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" class="small" /></a> <{/if}> <{if $product.ot2_url != ""}> <br><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" class="small" /></a> <{/if}> <{if $product.ot3_url != ""}> <br><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" class="small" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <{if $smarty.section.num.index != 0 }><br><{/if}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" class="small" /></a> <{/if}> <{/section}> <{/if}>
共通CSS
このテンプレートでのCSS修正はありません。
■ 2カラム（左メニュー）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。--> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="200" /></a><{/if}><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="200" /></a><{/if}><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="200" /></a><{/if}><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="200" /></a><{/if}><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="200" /></a><{/if}><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="200" /></a><{/if}> <br style="clear:both;">
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。--> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}> <{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="200" /></a><{/if}><{/section}><{/if}> <br style="clear:both;">
共通CSS
このテンプレートでのCSS修正はありません。
■ 2カラム（右メニュー）
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。--> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="200" /></a><{/if}><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="200" /></a><{/if}><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="200" /></a><{/if}><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="200" /></a><{/if}><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="200" /></a><{/if}><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="200" /></a><{/if}> <br style="clear:both;">
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。--> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}> <{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="200" /></a><{/if}><{/section}><{/if}> <br style="clear:both;">
共通CSS
このテンプレートでのCSS修正はありません。
■ 3カラム
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 商品画像その他 --> <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。--> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}><{if $product.ot4_url != ""}><a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" width="200" /></a><{/if}><{if $product.ot5_url != ""}><a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" width="200" /></a><{/if}><{if $product.ot6_url != ""}><a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" width="200" /></a><{/if}><{if $product.ot7_url != ""}><a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" width="200" /></a><{/if}><{if $product.ot8_url != ""}><a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" width="200" /></a><{/if}><{if $product.ot9_url != ""}><a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" width="200" /></a><{/if}> <br style="clear:both;">
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 商品画像その他 --> <!--その他画像の表示幅を200pxに固定しています。編集する場合は 以下のwidth="200"の数値をお好きなサイズに変更してください。--> <{if $product.ot1_url != ""}><a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" width="200" /></a><{/if}><{if $product.ot2_url != ""}><a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" width="200" /></a><{/if}><{if $product.ot3_url != ""}><a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" width="200" /></a><{/if}> <{if $otherimg_num != 0}><{section name=num loop=$otherimg}><{if $otherimg[num].url != ""}><a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" width="200" /></a><{/if}><{/section}><{/if}> <br style="clear:both;">
共通CSS
このテンプレートでのCSS修正はありません。
■ ベビー
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- ▼商品詳細▼ --> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="datails_area"> <table width="474" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top" class="top"></td> </tr> <tr> <td align="center" valign="top" class="main" style="padding:15px 0px;"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" alt="" class="main_image" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/28/now_printing02.gif" alt="" class="main_image" /> <{/if}> </td> </tr> <tr> <td align="center" valign="top" class="main"> <div class="other_area"> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" class="other_image" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" class="other_image" style="margin-left:17px;" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" class="other_image" style="margin-left:17px;" /></a> <{/if}> <{if $product.ot4_url != ""}> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" class="other_image" /></a> <{/if}> <{if $product.ot5_url != ""}> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" class="other_image" style="margin-left:17px;" /></a> <{/if}> <{if $product.ot6_url != ""}> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" class="other_image" style="margin-left:17px;" /></a> <{/if}> <{if $product.ot7_url != ""}> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" class="other_image" /></a> <{/if}> <{if $product.ot8_url != ""}> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" class="other_image" style="margin-left:17px;" /></a> <{/if}> <{if $product.ot9_url != ""}> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" class="other_image" style="margin-left:17px;"/></a> <{/if}> <{if $product.ot1_url != ""}><br clear="all" /><{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- ▼商品詳細▼ --> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="datails_area"> <table width="474" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top" class="top"></td> </tr> <tr> <td align="center" valign="top" class="main" style="padding:15px 0px;"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" alt="" class="main_image" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/28/now_printing02.gif" alt="" class="main_image" /> <{/if}> </td> </tr> <tr> <td align="center" valign="top" class="main"> <div class="other_area"> <{if $product.ot1_url != ""}> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" class="other_image" /></a> <{/if}> <{if $product.ot2_url != ""}> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" class="other_image" style="margin-left:17px;" /></a> <{/if}> <{if $product.ot3_url != ""}> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" class="other_image" style="margin-left:17px;" /></a> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" class="other_image" <{if $smarty.section.num.index%3 == 0 }><{else}>style="margin-left:17px;" <{/if}>/></a> <{/if}> <{/section}> <{if $otherimg[num].url != ""}><br clear="all" /><{/if}> <{/if}>
共通CSS
追加タグ
/* -------- 商品詳細 -------- */ #datails_area { width:474px; padding:0px 0px 10px 20px; } #datails_area .top { width:474px; height:5px; background:transparent url(http://img.shop-pro.jp/tmpl_img/28/itemlist_top_bg01.gif) top left no-repeat; } #datails_area .main { width:474px; background:transparent url(http://img.shop-pro.jp/tmpl_img/28/itemlist_main_bg01.gif) top left repeat-y; } #datails_area .bottom { width:474px; height:16px; background:transparent url(http://img.shop-pro.jp/tmpl_img/28/itemlist_bottom_bg01.gif) top left no-repeat; } #datails_area .main_image { display:block; height:auto; border:1px solid #CCCCCC; } #datails_area .other_area { width:430px; margin:0px auto; } #datails_area .other_image { display:block; float:left; width:130px; height:auto; border:1px solid #CCCCCC; margin:8px 0px 9px; }
■ レッドチェック
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- Product(商品詳細) --> <table cellpadding="0" cellspacing="0" border="0" class="main_title"> <tr> <td><{$product.name}></td> </tr> </table> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="detail"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" class="main_img" alt="" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/29/now_m.gif" class="main_img" alt="" /> <{/if}> <div class="expl"> <{$product.explain}> </div> <{if $product.ot1_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot4_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot5_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot6_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot7_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot8_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot9_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" /></a> </div> <{/if}> <br style="clear:both;" />
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- Product(商品詳細) --> <table cellpadding="0" cellspacing="0" border="0" class="main_title"> <tr> <td><{$product.name}></td> </tr> </table> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div id="detail"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" class="main_img" alt="" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/29/now_m.gif" class="main_img" alt="" /> <{/if}> <div class="expl"> <{$product.explain}> </div> <{if $product.ot1_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" /></a> </div> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>"> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" /></a> </div> <{/if}> <{/section}> <{/if}>
共通CSS
追加タグ
/* ************************************************ * 商品詳細 レイアウト * ************************************************ */ #detail { text-align:center; color:<{$font_color}>; } #detail .expl { line-height:150%; text-align:left; margin:10px 10px 5px 10px; } #detail .main_img { padding:4px; border-top:1px solid #D1D1D1; border-left:1px solid #D1D1D1; border-right:1px solid #989898; border-bottom:1px solid #989898; } #detail .sub { float:left; width:188px; text-align:center; } #detail .sub_tp { padding-top:18px; }
■ リネン
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- 売切れ時、休止時、ログイン限定購入商品は表示不可 --> <{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }> <tr> <td width="60" style="padding-bottom:20px;">購入数：</td> <td width="100"> <table width="100"border="0" cellpadding="0" cellspacing="0"> <tr> <td width="50"><input type="text" name="product_num" value="<{$product.init_num}>" style="width:50px;height:1.5em;" /></td> <td width="15"> <div class="detail_arrow"> <a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>" alt="" /></a> <a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>" alt="" /></a> </div> </td> <td width="35"><{$product.unit}></td> </tr> </table> </td> </tr> <{/if}> </table> </td> </tr> <tr> <td width="320" valign="top" style="padding-top:10px;"> <{if $product.ot1_url != ""}> <div class="detail_other"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="detail_other" style="margin-left:7px;"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="detail_other" style="margin-left:7px;"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> </td> </tr> <tr> <td width="320" valign="top" style="padding-top:10px;"> <{if $product.ot4_url != ""}> <div class="detail_other"> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{if $product.ot5_url != ""}> <div class="detail_other" style="margin-left:7px;"> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{if $product.ot6_url != ""}> <div class="detail_other" style="margin-left:7px;"> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> </td> </tr> <tr> <td width="320" valign="top" style="padding-top:10px;"> <{if $product.ot7_url != ""}> <div class="detail_other"> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{if $product.ot8_url != ""}> <div class="detail_other" style="margin-left:7px;"> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{if $product.ot9_url != ""}> <div class="detail_other" style="margin-left:7px;"> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> </td> </tr>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- 売切れ時、休止時、ログイン限定購入商品は表示不可 --> <{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }> <tr> <td width="60" style="padding-bottom:20px;">購入数：</td> <td width="100"> <table width="100"border="0" cellpadding="0" cellspacing="0"> <tr> <td width="50"><input type="text" name="product_num" value="<{$product.init_num}>" style="width:50px;height:1.5em;" /></td> <td width="15"> <div class="detail_arrow"> <a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>" alt="" /></a> <a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>" alt="" /></a> </div> </td> <td width="35"><{$product.unit}></td> </tr> </table> </td> </tr> <{/if}> </table> </td> </tr> <tr> <td width="320" valign="top" style="padding-top:10px;"> <{if $product.ot1_url != ""}> <div class="detail_other"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="detail_other" style="margin-left:7px;"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="detail_other" style="margin-left:7px;"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <{if $smarty.section.num.index%3 == 0 && $smarty.section.num.index != 0 }> </td> </tr> <tr> <td width="320" valign="top" style="padding-top:10px;"> <{/if}> <div class="detail_other"<{if $smarty.section.num.index%3 != 0 }> style="margin-left:7px;"<{/if}>> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" alt="" class="detail_thum" /></a> </div> <{/if}> <{/section}> <{/if}> </td> </tr>
共通CSS
このテンプレートでのCSS修正はありません。
■ モール１
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- Product(商品詳細) --> <div class="product_name"><{$product.name}></div> <div class="expl_block"><{$product.explain}></div> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div class="detail_cont"> <div class="detail_img_block"> <div class="detail_img"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" class="main_img" alt="" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/31/now_m.gif" class="main_img" alt="" /> <{/if}> </div> <div class="detail_other"> <{if $product.ot1_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a> </div> <{/if}> <{if $product.ot4_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a> </div> <{/if}> <{if $product.ot5_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a> </div> <{/if}> <{if $product.ot6_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a> </div> <{/if}> <{if $product.ot7_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a> </div> <{/if}> <{if $product.ot8_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a> </div> <{/if}> <{if $product.ot9_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a> </div> <{/if}> <br style="clear:both;" /> </div> </div>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- Product(商品詳細) --> <div class="product_name"><{$product.name}></div> <div class="expl_block"><{$product.explain}></div> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div class="detail_cont"> <div class="detail_img_block"> <div class="detail_img"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" class="main_img" alt="" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/31/now_m.gif" class="main_img" alt="" /> <{/if}> </div> <div class="detail_other"> <{if $product.ot1_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a> </div> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>"> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a> </div> <{/if}> <{/section}> <{/if}> <br style="clear:both;" /> </div> </div>
共通CSS
追加タグ
/* ************************************************ * 商品詳細 レイアウト * ************************************************ */ .detail_cont { width:726px; } .detail_img_block { width:405px; float:left; } .detail_txt_block { width:294px; float:right; text-align:left; } .detail_img_block img { border:1px solid #999999; } .product_name { font-size:18px; font-weight:bold; margin-bottom:10px; } .expl_block { margin-bottom:30px; } .detail_img { margin-bottom:20px; } .detail_other { width:405px; } .detail_other .sub { width:135px; float:left; } .detail_other .sub_tp { padding-top:15px; }
■ モール２
商品詳細HTML - 画像を１枚ずつ追加する場合のタグ
追加タグ
<!-- Product(商品詳細) --> <div class="product_name"><{$product.name}></div> <div class="expl_block"><{$product.explain}></div> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div class="detail_cont"> <div class="detail_img_block"> <div class="detail_img"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" class="main_img" alt="" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/32/now_m.gif" class="main_img" alt="" /> <{/if}> </div> <div class="detail_other"> <{if $product.ot1_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a> </div> <{/if}> <{if $product.ot4_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot4_url}>"><img src="<{$product.ot4_url}>" /></a> </div> <{/if}> <{if $product.ot5_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot5_url}>"><img src="<{$product.ot5_url}>" /></a> </div> <{/if}> <{if $product.ot6_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot6_url}>"><img src="<{$product.ot6_url}>" /></a> </div> <{/if}> <{if $product.ot7_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot7_url}>"><img src="<{$product.ot7_url}>" /></a> </div> <{/if}> <{if $product.ot8_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot8_url}>"><img src="<{$product.ot8_url}>" /></a> </div> <{/if}> <{if $product.ot9_url != ""}> <div class="sub sub_tp"> <a target="_blank" href="<{$product.ot9_url}>"><img src="<{$product.ot9_url}>" /></a> </div> <{/if}> <br style="clear:both;" /> </div> </div>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<!-- Product(商品詳細) --> <div class="product_name"><{$product.name}></div> <div class="expl_block"><{$product.explain}></div> <{ if $product.id != "" }> <form name="product_form" method="post" action="<{$cart_url}>"> <div class="detail_cont"> <div class="detail_img_block"> <div class="detail_img"> <{if $product.img_url != ""}> <img src="<{$product.img_url}>" class="main_img" alt="" /> <{else}> <img src="http://img.shop-pro.jp/tmpl_img/32/now_m.gif" class="main_img" alt="" /> <{/if}> </div> <div class="detail_other"> <{if $product.ot1_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a> </div> <{/if}> <{if $product.ot2_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a> </div> <{/if}> <{if $product.ot3_url != ""}> <div class="sub"> <a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a> </div> <{/if}> <{if $otherimg_num != 0}> <{section name=num loop=$otherimg}> <{if $otherimg[num].url != ""}> <div class="sub<{if $smarty.section.num.index >= 3 }> sub_tp<{/if}>"> <a target="_blank" href="<{$otherimg[num].url}>"><img src="<{$otherimg[num].url}>" /></a> </div> <{/if}> <{/section}> <{/if}> <br style="clear:both;" /> </div> </div>
共通CSS
追加タグ
/* ************************************************ * 商品詳細 レイアウト * ************************************************ */ .detail_cont { width:726px; } .detail_img_block { width:405px; float:left; } .detail_txt_block { width:294px; float:right; text-align:left; } .detail_img_block img { border:1px solid #999999; } .product_name { font-size:18px; font-weight:bold; margin-bottom:10px; } .expl_block { margin-bottom:30px; } .detail_img { margin-bottom:20px; } .detail_other { width:405px; } .detail_other .sub { width:135px; float:left; } .detail_other .sub_tp { padding-top:15px; }
2018.02.26