1
/
4
非公開サンプル（削除しない）
通常価格
（税込）
1円
（税込）
商品説明です。
商品コード：AAA111
※ショッピングサイトオープンを記念して、会員登録をして商品をご購入されたお客様にはもれなくノベルティ（特製レザーキーホルダー）をプレゼントしています。
なくなり次第終了となりますので予めご了承ください。
なくなり次第終了となりますので予めご了承ください。
EC-CUBE 管理機能「商品管理」には商品のディテールについて詳細を登録できるフリーエリア機能があります。
当テンプレートでは、フリーエリア内にて商品ディテールをタブ切り替えできるコンテンツや、商品ビジュアルにキャプションを付けるHTMLコードを用意しました。
■ビジュアル画像にそれぞれキャプション（説明文）を付ける
フリーエリアの中に以下のコードを入れておく事でビジュアル画像ごとキャプション（説明文）を表示させる事ができます。
※コードを入れる位置はフリーエリアの中のどこでも構いません。またフリーエリア内の他のコンテンツに影響を与えません。
※「data-caption="1"」のように、この場合は「1つ目の画像」のキャプションになります。必要な画像のみキャプションを付けることができます。
以下のHTMLコードを編集してフリーエリアに記述してください。
■タブ切り替え型コンテンツを付ける
フリーエリアの中に以下のコードを入れる事でタブ切り替え型コンテンツを実装できます。
以下のHTMLコードを編集してフリーエリアに記述してください。
ここに画像ごとの説明文が入ります。これは画像１のダミーテキストです。
brタグで改行できます。説明「2」に続きます
brタグで改行できます。説明「2」に続きます
管理機能のフリーエリア欄にHTMLコードを記述することで実装可能です。
キャプション不要な画像はこの行ごと削除してください。
例として次の「4」は指定していないのでキャプション表示はされません。
例として次の「4」は指定していないのでキャプション表示はされません。
ここに画像ごとの説明文が入ります。これは画像5のダミーテキストです。
ここに画像ごとの説明文が入ります。これは画像6のダミーテキストです。
ここに画像ごとの説明文が入ります。これは画像7のダミーテキストです。
ここに画像ごとの説明文が入ります。これは画像8のダミーテキストです。
ここに画像ごとの説明文が入ります。これは画像9のダミーテキストです。
ここに画像ごとの説明文が入ります。これは画像１0のダミーテキストです。
- 商品詳細 No.1
- 商品詳細 No.2
- 商品詳細 No.3
商品詳細 No.1 タイトル
タブ1のコンテンツです。これはダミーテキストです
| Size S | これはダミーテキストです |
|---|---|
| Size M | これはダミーテキストです |
| Size L | これはダミーテキストです |
| Size XL | これはダミーテキストです |
サイズ表（dl要素）
- Size S
- これはダミーテキストです
- Size M
- これはダミーテキストです
- Size L
- これはダミーテキストです
- Size XL
- これはダミーテキストです
サイズ表（dl要素レスポンシブ-スマホ時はdtとddを改行して表示）
- Size S
- これはダミーテキストです
- Size M
- これはダミーテキストです
- Size L
- これはダミーテキストです
- Size XL
- これはダミーテキストです
以下は、箇条書きスタイルのサンプルです。
- リストマークが「・」になる注意書き・箇条書きテキストです（ベーシック）。dl要素にclass「ec-list」を付ける事でスタイリングされます。dd要素テキストは改行されてもリストマークの1文字分は字下げされます。
- これはdd要素です。これはダミーテキストです
- これはdd要素です。これはダミーテキストです
- リストマークが「※」になる注意書き・箇条書きテキストです。dl要素にclass「ec-list-rice」を付ける事でスタイリングされます。dd要素テキストは改行されてもリストマークの1文字分は字下げされます。
- これはdd要素です。これはダミーテキストです
- これはdd要素です。これはダミーテキストです
- リストマークが「●」になる注意書き・箇条書きテキストです。dl要素にclass「ec-list-disc」を付ける事でスタイリングされます。dd要素テキストは改行されてもリストマークの1文字分は字下げされます。
- これはdd要素です。これはダミーテキストです
- これはdd要素です。これはダミーテキストです
- リストマークが連番表示になる注意書き・箇条書きテキストです。dl要素にclass「ec-list-decimal」を付ける事でスタイリングされます。dd要素テキストは改行されてもリストマークの1文字分は字下げされます。
- これはdd要素です。これはダミーテキストです
- これはdd要素です。これはダミーテキストです
商品詳細 No.2 タイトル
タブ2のコンテンツです。これはダミーテキストです
商品詳細 No.3 タイトル
タブ3のコンテンツです。これはダミーテキストです