Home > カスタマイズ方法

カスタマイズ方法 - 商品詳細ページ

画像の配置

商品詳細ページのレイアウトは以下の通りです。

大きく上段と下段に分かれています。

<!-- 商品詳細上段 -->
<div class="detail-top">
  <div class="detail-img">
    <img src="images/item-1.jpg" />
  </div><!-- detail-img -->
  
  <div class="detail-txt">
  <dl>
  <dt class="title">商品名など</dt>
  <dd class="price">販売価格:10,500円</dd>
  <dd class="descr">
  <p>商品概要商品概要商品概要商品概要商品概要商品概要商品概要商品概要商品概要。</p>
  <p>商品概要商品概要商品概要商品概要商品概要商品概要商品概要商品概要商品概要。</p>
  </dd>
  <dd class="btn"><a href="#"><img src="../images/cart100.jpg" alt="カートに入れる" /></a></dd>
  </dl>  
  </div><!-- detail-txt -->
</div><!-- detail-top -->

<!-- 商品詳細下段 -->
<div class="detail">
<h3>その他フリーエリア</h3>
<p>フリー</p>
</div>

赤字部分に画像が入りますが、挿入画像は横幅最大380pxとなります。

その他の詳細画像、又は関連商品画像は<!-- 商品詳細下段 -->をご利用下さい。

Page top