商品ページHTML生成ツール

完成イメージを確認する

HTML生成プレビュー

HTML生成

プレビュー

<img src="{@inputMainImageFile}" alt="{@inputMainImageAlt}" width="100%">
  <p>
    {@inputMainDescription}
  </p>
  
  
  <div style="height:1.5em;"> </div>
  
  
  <div style=" border:1px solid {@inputABorderColor} ; background-color:{@inputABackgroundColor} ; padding-top:2%; padding-right:2%; padding-bottom:2%; padding-left:2%; color:{@inputAFontColor}; font-size:25px; width:96%; line-height: 120%;">
    {@inputATitle}
  </div>

<div style="height:1em;"> </div>
  
  
  <div style="float:left; width:50%; text-align:center;">
    <img src="{@inputAImageFile}" style="width:95.3846%;" alt="{@inputAImageAlt}">
    <p style="text-align:left; padding-left: 2%; padding-right: 2%; padding-bottom: 1%;">
      {@inputADescription}
    </p>
  </div>
    
  <div style="float:left; width:50%; text-align:center;">
    <img src="{@inputAImage2File}" style="width:95.3846%;" alt="{@inputAImage2Alt}">
    <p style="text-align:left; padding-left: 2%; padding-right: 2%; padding-bottom: 1%;">
      {@inputADescription2}
    </p>
  </div>
  
  
  <div style="clear:both; height:0em;"> </div>
    
  <div style="float:left; width:50%; text-align:center;">
    <img src="{@inputAImage3File}" style="width:95.3846%;" alt="{@inputAImage3Alt}">
    <p style="text-align:left; padding-left: 2%; padding-right: 2%; padding-bottom: 1%;">
      {@inputADescription3}
    </p>
  </div>
    
  <div style="float:left; width:50%; text-align:center;">
    <img src="{@inputAImage4File}" style="width:95.3846%;" alt="{@inputAImage4Alt}">
    <p style="text-align:left; padding-left: 2%; padding-right: 2%; padding-bottom: 1%;">
      {@inputADescription4}
    </p>
  </div>

<div style="clear:both; height:1em;"> </div>
    
  
  <div style=" border:1px solid {@inputBBorderColor}; background-color:{@inputBBackgroundColor}; padding-top:2%; padding-right:2%; padding-bottom:2%; padding-left:2%; color:{@inputBFontColor}; font-size:25px; width:96%; line-height: 120%;">
    {@inputBTitle}
  </div>

<div style="height:1.5em;"> </div>

<img src="{@inputBImage2File}" style="float:right; margin-left:2%; width:49.2307%;" alt="{@inputBImage2Alt}">
  <img src="{@inputBImageFile}" style="width:47.6923%;" alt="{@inputBImageAlt}">
  <p>
    {@inputBDescription}
  </p>

<div style="clear:both; height:1em;"> </div>
  
  
  
  <div style=" border:1px solid {@inputCBorderColor}; background-color:{@inputCBackgroundColor}; padding-top:2%; padding-right:2%; padding-bottom:2%; padding-left:2%; color:{@inputCFontColor}; font-size:25px; width:96%; line-height: 120%;">
    {@inputCTitle}
  </div>
  
  
	<div style="height:1em;"> </div>
    
    <div style="float:left; width:33.3%; text-align:center;">
	  <img src="{@inputCImageFile}" style="width:92.4214%;" alt="{@inputCImageAlt}">
      <p style="text-align:center; padding-left: 2%; padding-right: 2%; padding-bottom: 1%;">
        {@inputCDescription}
      </p>
    </div>
    
    <div style="float:left; width:33.3%; text-align:center;">
	  <img src="{@inputCImage2File}" style="width:92.4214%;" alt="{@inputCImage2Alt}">
      <p style="text-align:center; padding-left: 2%; padding-right: 2%; padding-bottom: 1%;">
        {@inputCDescription2}
      </p>
    </div>
    
    <div style="float:left; width:33.3%; text-align:center;">
	  <img src="{@inputCImage3File}" style="width:92.4214%;" alt="{@inputCImage3Alt}">
      <p style="text-align:center; padding-left: 2%; padding-right: 2%; padding-bottom: 1%;">
        {@inputCDescription3}
      </p>
    </div>
  
  
  <div style="clear:both; height:1em;"> </div>
  
  
  <div style=" border:1px solid {@inputReviewTitleBorderColor}; background-color:{@inputReviewTitlebackgroundColor}; padding-top:2%; padding-right:2%; padding-bottom:2%; padding-left:2%; color:{@inputReviewFontColor}; font-size:25px; width:96%; line-height: 120%;">
    {@inputReviewTitle}
  </div>
  
  
  <div style="height:1em;"> </div>
  
  <div style="border-top:1px solid {@inputReviewBorderColor}; padding-top:2%; padding-left:2%; margin-bottom:2%;">
    <p>{@inputReview1}</p>
  </div>
  <div style="border-top:1px solid {@inputReviewBorderColor}; padding-top:2%; padding-left:2%; margin-bottom:2%;">
    <p>{@inputReview2}</p>
  </div>
  <div style="border-top:1px solid {@inputReviewBorderColor}; padding-top:10px; border-bottom:1px solid {@inputReviewBorderColor}; padding-top:2%; padding-left:2%; padding-bottom:2%;">
    <p>{@inputReview3}</p>
  </div>
  
  
  <div style="height:1em;"> </div>
    
  
  <div style=" border:1px solid {@inputDetailBorderColor}; background-color:{@inputDetailbackgroundColor}; padding-top:2%; padding-right:2%; padding-bottom:2%; padding-left:2%; color: {@inputDetailFontColor}; font-size:25px; width:96%; line-height: 120%;">
    {@inputDetailTitle}
  </div>
  <div style="height:1em;"> </div>
  <p>
    {@inputDetailSpec}
  </p>
  <div style="height:1em;"> </div>
  
  <img src="{@inputMain2ImageFile}" alt="{@inputMain2ImageAlt}" width="100%">
</div>

メイン部分

商品の特徴１

商品の特徴２

商品の特徴３

お客様の声

商品詳細

イメージ画像

HTML