商品ページHTML生成ツール

完成イメージを確認する

HTML生成プレビュー

HTML生成

プレビュー

<div style="width:100%;">

<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}" alt="{@inputAImageAlt}" width="100%">
<p>
{@inputADescription}
</p>

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

<div style=" border:1px solid {@inputBBorderColor}; background-color:{@inputBB2orderColor}; 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:1em;"> </div>
<img src="{@inputBImageFile}" style="float:left; margin-right:2%; width:49%;" alt="{@inputBImageAlt}"><img src="{@inputBImageFile2}" style="width:49%;" alt="{@inputBImageAlt2}">
<div style="clear:both; height:1em;"> </div>
<p>
{@inputBDescription}
</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}</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}; 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