文章テンプレート生成HTMLの変更方法｜カスタマイズ解説

例えば「D欄」を追加したい場合は、 下のコードをコピーして追加します。

<div class="input-group">
<label>D欄</label>
<input type="text" id="d">
</div>

---

② JavaScriptに追加する

下の部分に追加します。

const d = document.getElementById("d").value;

---

③ 出力部分に追加する

文章に表示したい場所へ追加します。

D欄：${d}

---

④ 項目名を変更する方法

「A欄」を「住所」に変えたい場合 下の2か所を変更します。

<label>住所</label>

住所：${a}

---

⑤ テキストを変更する方法

下の部分を書き換えるだけで 文章を自由に変更できます。

${name}さんこんにちは。

↓ 例

${name}様、お世話になっております。

---

⑥ コピー機能はいらない場合

このボタン部分を削除します。

<button class="copy-btn" onclick="copyText()">
コピー
</button>

---

⑦ デザインの色を変える方法

この部分の色コードを変更します。

background:#4f46e5;

↓ 例

background:pink;
background:#ff69b4;
background:skyblue;

---

⑧ 完成イメージ

入力欄を増やしたり、 文章を変更することで オリジナルの文章生成ツールを作れます。