商品ページ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>
  
  <img src="{@inputAImageFile}" style="float:right; margin-left:2%; width:45.4545%;" alt="{@inputAImageAlt}">
  <p>
    {@inputADescription}
  </p>

<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>

<div style="border-bottom:1px solid {@inputBBorderColor2}; color:{@inputBFontColor2}; width: 62.1212%; font-size:22px; padding-bottom:1%; margin-bottom:1%; margin-left:36.923%; padding-top: 0.5%; line-height: 120%;">
    {@inputBTitle2}
  </div>
	
  <p>
    {@inputBDescription}
  </p>

<div style="clear:both; height:1em;"> </div>

<div style="border-bottom:1px solid {@inputBBorderColor3}; color:{@inputBFontColor3}; width: 62.1212%; font-size:22px; padding-bottom:1%; margin-bottom:1%; margin-left:36.923%; padding-top: 0.5%; line-height: 120%;">
    {@inputBTitle3}
  </div>

<p>
    {@inputBDescription2}
  </p>
  
  <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}
  </div>
  <div style="border-top:1px solid {@inputReviewBorderColor}; padding-top:2%; padding-left:2%; margin-bottom:2%;">
    <p>{@inputReview2}
  </div>
  <div style="border-top:1px solid {@inputReviewBorderColor}; 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生成生成ツール

メイン部分

商品の特徴１

商品の特徴２

お客様の声

商品詳細

イメージ画像

HTML