無理しないでゆっくり休んでね！

楽天の説明文HTMLテーブル生成ツール

コードがわからないEC運営スタッフがいつもコピペでやっているので、大変だなと思って、これを作りました。

サンプルコードをカスタマイズして、HTMLとして保存すれば使えます。

デモ

商品名:
内容量:
詳細:
使用方法:
成分:
使用上のご注意:
メーカー名:
画像リンク:

PC用商品説明文:



スマートフォン用商品説明文:




PC用販売説明文:








サンプルコード





<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table</title>
</head>
<body>
    <style>
        input[type="text"] {
  height: 40px;
  width: 800px;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
}
</style>

<table>
    <tr>
        <td>商品名:</td>
        <td><input type="text" id="product_name"></td>
    </tr>
    <tr>
        <td>内容量:</td>
        <td><input type="text" id="capacity"></td>
    </tr>
    <tr>
        <td>詳細:</td>
        <td><input type="text" id="details"></td>
    </tr>
    <tr>
        <td>使用方法:</td>
        <td><input type="text" id="usage"></td>
    </tr>
    <tr>
        <td>成分:</td>
        <td><input type="text" id="ingredients"></td>
    </tr>
    <tr>
        <td>使用上のご注意:</td>
        <td><input type="text" id="gotixyui"></td>
    </tr>
    <tr>
        <td>メーカー名:</td>
        <td><input type="text" id="burando"></td>
    </tr>
    <tr>
        <td>画像リンク:</td>
        <td><input type="text" id="image_link"></td>
    </tr>
</table>
<button onclick="generateCode()">生成する</button><br>
<button onclick="copyToClipboard('output1')">PC用商品説明文</button>
<button onclick="copyToClipboard('output2')">スマートフォン用商品説明文</button>
<button onclick="copyToClipboard('output3')">PC用販売説明文</button>
<h2>PC用商品説明文:</h2>
<pre id="output1"></pre>
<h2>スマートフォン用商品説明文:</h2>
<pre id="output2"></pre>
<h2>PC用販売説明文:</h2>
<pre id="output3"></pre>
<script>
    function generateCode() {
        const productName = document.getElementById("product_name").value;
        const capacity = document.getElementById("capacity").value;
        const details = document.getElementById("details").value;
        const ingredients = document.getElementById("ingredients").value;
        const usage = document.getElementById("usage").value;
        const gotixyui = document.getElementById("gotixyui").value;
        const imageLink = document.getElementById("image_link").value;
        const burando = document.getElementById("burando").value;
        const template1 = `
<!-- PC用商品説明文-->
<table id="setsumei-a">
<tr>
<td colspan="2">Item infometion</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">商品名</td>
<td>${productName}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">内容量</td>
<td>${capacity}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">詳細</td>
<td>${details}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">ご使用方法</td>
<td>${usage}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">使用上のご注意</td>
<td>${gotixyui}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">成分表示</td>
<td>${ingredients}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">メーカー名</td>
<td>${burando}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">商品区分</td>
<td>日本製　化粧品</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">広告文責</td>
<td>株式会社〇〇 00-0000-0000</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">※利用できる様々なシーン※</td>
<td>プレゼント ギフト お祝い 誕生日 誕生日祝い 御祝 御礼 謝礼 クリスマス 母の日 父の日 敬老の日 記念日 卒業 バレンタインデー ホワイトデー 結婚祝い 結婚内祝い 御挨拶 粗品 贈答品 お土産 手土産 贈りもの 贈り物 お返し 引き出物 出産祝い 出産内祝い 快気祝い 快気内い プチギフト 七五三 入学式 開店祝い 開業祝い 新築祝い 入学祝い 就職祝い 退職祝い 差し入れ 年末年始 節分 御中元 お中元 お見舞い 暑中御見舞 残暑御見舞 卒園 ひな祭り お花見 ハロウィン お歳暮 御歳暮</td>
</tr>
</table>`;

        const template2 = `
<img src="${imageLink}" width="100%"> 
<table>
<tr>
<td colspan="2">Item infometion</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">商品名</td>
<td>${productName}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">内容量</td>
<td>${capacity}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">詳細</td>
<td>${details}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">ご使用方法</td>
<td>${usage}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">使用上のご注意</td>
<td>${gotixyui}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">成分表示</td>
<td>${ingredients}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">メーカー名</td>
<td>${burando}</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">商品区分</td>
<td>日本製　化粧品</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">広告文責</td>
<td>株式会社〇〇 00-0000-0000</td>
</tr>
<tr>
<td bgcolor="#eee" width="25%">※利用できる様々なシーン※</td>
<td>プレゼント ギフト お祝い 誕生日 誕生日祝い 御祝 御礼 謝礼 クリスマス 母の日 父の日 敬老の日 記念日 卒業 バレンタインデー ホワイトデー 結婚祝い 結婚内祝い 御挨拶 粗品 贈答品 お土産 手土産 贈りもの 贈り物 お返し 引き出物 出産祝い 出産内祝い 快気祝い 快気内い プチギフト 七五三 入学式 開店祝い 開業祝い 新築祝い 入学祝い 就職祝い 退職祝い 差し入れ 年末年始 節分 御中元 お中元 お見舞い 暑中御見舞 残暑御見舞 卒園 ひな祭り お花見 ハロウィン お歳暮 御歳暮</td>
</tr>
</table>`;

    const template3 = `
    <!--PC用販売説明文-->
<img src="${imageLink}" width="100%">
`;

    document.getElementById("output1").textContent = template1;
    document.getElementById("output2").textContent = template2;
    document.getElementById("output3").textContent = template3;
}

function copyToClipboard(elementId) {
const outputElement = document.getElementById(elementId);
const textArea = document.createElement("textarea");
textArea.value = outputElement.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
textArea.remove();
alert("コピーしました！");
}
</script>
</body>
</html>

      


      
      
      

    






  
  
  

  

  

  

    




          





  
      

        

  
  
  


  

    

      コメント          


      

  



  
  







          


        

      


    


    
    
    
    

    
    





    





    

      
  


    












    


  

  

  

    
タイトルとURLをコピーしました