ネットショップテンプレート カスタマイズ方法

カテゴリーを追加

カテゴリーを増やすには[item-1]フォルダをコピペしてご利用下さい。

[item-1] [item-2] [item-3] など

[item-1]フォルダ名 及び フォルダ内にある1.htmlというファイル名は適当に変更してご利用下さい。

尚、[item-1]フォルダ内にある index.html はカテゴリー一覧用、1.html等が個別商品ページ用のファイルです。

カテゴリー一覧ページ

該当ファイルは[item-1]フォルダ内にある index.html です。

1行に4つ商品が並びます。

<li class="btn01">〜</li>　<li class="btn04">〜</li>までがひとつのブロック(行)となります。

以下を参考に！※商品が13個の場合（商品詳細は1.htmlから13.html）

尚、赤字部分は変更しないで下さい。（各行内の右側からの順番です）

  <!-- 画像ブロック 1 -->
  <li class="btn01">
  <a href="1.html"><img src="images/item-1-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 2 -->
  <li class="btn02">
  <a href="2.html"><img src="images/item-2-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 3 -->
  <li class="btn03">
  <a href="1.html"><img src="images/item-3-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
 
  <!-- 画像ブロック 4 -->
  <li class="btn04">
  <a href="1.html"><img src="images/item-4-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 5 -->
  <li class="btn01">
  <a href="1.html"><img src="images/item-5-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 6 -->
  <li class="btn02">
  <a href="1.html"><img src="images/item-6-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 7 -->
  <li class="btn03">
  <a href="1.html"><img src="images/item-7-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 8 -->
  <li class="btn04">
  <a href="1.html"><img src="images/item-8-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 9 -->
  <li class="btn01">
  <a href="1.html"><img src="images/item-9-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 10 -->
  <li class="btn02">
  <a href="1.html"><img src="images/item-10-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 11 -->
  <li class="btn03">
  <a href="1.html"><img src="images/item-11-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 12 -->
  <li class="btn04">
  <a href="1.html"><img src="images/item-12-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>
  
  <!-- 画像ブロック 13 -->
  <li class="btn01">
  <a href="1.html"><img src="images/item-13-s.jpg" alt="" width="150" /></a>
  <p class="item-name">商品名など</p>
  <p class="item-price">10,500円</p>
  </li>

サムネイル画像は特に用意する必要はありませんが「中央部分商品リスト」部分を再確認下さい。