商品一覧テンプレート｜オーガニックコットンタオル・ギフトのテネリータオンラインストア

H1タイトル

 $<h1 class="h1 block-category-list--header">H1タイトル</h1>$

メインビジュアル

 $<div class="block-category-list--header-img">
    <ul class="js-header-slider">
      <li><img src="/img/usr/dummy/MV_dummy_PC.png" alt="" class="pc-only"><img src="/img/usr/dummy/MV_dummy_SP.png" alt="" class="sp-only"></li>
      <li><img src="/img/usr/dummy/MV_dummy_PC2.png" alt="" class="pc-only"><img src="/img/usr/dummy/MV_dummy_SP2.png" alt="" class="sp-only"></li>
    </ul>
  </div>$

H2タイトル

 $<h2 class="title-item-list-template--title01">H2タイトル</h2>$

H3タイトル

 $<h3 class="title-item-list-template--title02">H3タイトル</h3>$

テキスト

 $テキスト$

画像

 $<div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy01.png" alt=""></div>$

リード文

テキスト

 $<div class="block-item-list-template--lead">
        テキスト
        </div>$

タイトル+画像+テキスト

H3タイトル

テキスト

 $<div class="block-item-list-template--style01">
        <h3 class="title-item-list-template--title02">H3タイトル</h3>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy01.png" alt=""></div>
        テキスト
        </div>
        <!-- .block-item-list-template--style01 -->$

画像+テキスト（左寄せ）

テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト

 $<div class="block-item-list-template--style02 at-left-justified">
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        テキスト
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        テキスト
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        テキスト
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        テキスト
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ -->
        </ul>
        </div>
        <!-- .block-item-list-template--style02 -->$

画像+テキスト（中央寄せ）

テキスト
テキスト
テキスト

 $<div class="block-item-list-template--style02">
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        テキスト
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        テキスト
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        テキスト
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        </ul>
        </div>
        <!-- .block-item-list-template--style02 -->$

テキスト　画像

テキスト

 $<div class="block-item-list-template--style02">
        <!-- ブロック　ここから -->
        テキスト
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ -->
        </ul>
        <!-- ブロック　ここまで -->
        <!-- ブロック　ここから -->
        テキスト
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ -->
        </ul>
        <!-- ブロック　ここまで -->
        <!-- ブロック　ここから -->
        テキスト
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ -->
        </ul>
        <!-- ブロック　ここまで -->
        </div>
        <!-- .block-item-list-template--style02 -->$

ランキングスライド

COLOR RANKING人気カラーランキング

テキスト

 $<div class="block-item-list-template--style03">
        <div class="block-item-list-template--list-header">
        <h3>COLOR RANKING<strong>人気カラーランキング</strong></h3>
        テキスト
        </div>
        <!-- .block-item-list-template--list-header -->
        <div class="block-item-list-template--list-body">
        <ul class="block-item-list-template--list-item">
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank1">1</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank2">2</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank3">3</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank4">4</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank5">5</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank6">6</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ -->
        </ul>
        </div>
        </div>
        <!-- .block-item-list-template--style03 -->$

テキスト

アイテムから探す

H1タイトル

H2タイトル

H3タイトル

H3タイトル

COLOR RANKING人気カラーランキング