---
title: "テンプレートの作成"
url: https://docs.catalyst.zoho.com/ja/tutorials/payslip-generator-app/nodejs/create-template/
description: "Catalystコンポーネントを使用して、動的なカスタム給与明細テンプレートからPDFドキュメントを生成し、生成したドキュメントをエンドユーザーにメールで送信する基本的なWebアプリを構築します。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "Catalyst SmartBrowz"
    url: /ja/smartbrowz/getting-started/introduction/
  - name: "Templates"
    url: /ja/smartbrowz/help/templates/create-templates/
---

# テンプレートの作成

[Catalyst SmartBrowz](https://docs.catalyst.zoho.com/ja/smartbrowz/getting-started/introduction/)コンポーネントの[Templates](https://docs.catalyst.zoho.com/ja/smartbrowz/help/templates/create-templates/)を使用して、カスタムテンプレートを作成する必要があります。このテンプレートには、給与明細のデザインとスタイルが含まれます。このテンプレートがPDFとして生成され、エンドユーザーにメールで送信されます。

テンプレートを作成するには：

1. コンソールで*Catalyst SmartBrowz*サービスアイコンをクリックし、**Start Exploring**をクリックします。
![catalyst_payslip_smartbrowz_homescreen](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/payslip-generator-smartbrowz.webp)

2. Convertの下にある**Templates**をクリックして*Templates*コンポーネントにアクセスし、**Create Template**をクリックします。
![catalyst_payslip_create_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/payslip-generator-smart-browz-tempaltes.webp)

3. *Custom*を選択し、テンプレート名として「**Payslip**」と入力して、**Create**をクリックします。
![catalyst_payslip_name_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_name_template.webp)

テンプレートエディタとテンプレートプレビューウィンドウが表示されます。
![catalyst_payslip_blank_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_blank_template.webp)

4. 以下のコードをコピーして、下記の説明に従って適切なエディタに貼り付けてください：
  * 以下のHTMLコードをHTMLエディタに貼り付けます

**HTML**

```xml
<!DOCTYPE html>
<html>
  <head>
    <title>Payslip</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container mt-5 mb-5">
      <div class="row">
        <div class="col-md-12">
          <div class="text-center lh-1 mb-2">
            <h6 class="fw-bold color_primary">{{company}} Payslip</h6>
            <span class="fw-normal color_sec"
              >Payment slip for the month of {{month}} {{year}}</span
            >
          </div>
          <div class="d-flex justify-content-end">
            <span>Working Branch: NewYork</span>
          </div>
          <br>
          <div class="row">
            <div class="col-md-10">
              <div class="row">
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">EMP Code</span>
                    <small class="ms-3 color_sec">{{employeeId}}</small>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">EMP Name</span>
                    <small class="ms-3 color_sec">{{employeeName}}</small>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">Mode of Pay</span>
                    <small class="ms-3 color_sec">{{paymentMethod}}</small>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">Ac No.</span>
                    <small class="ms-3 color_sec">*******</small>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <div>
                    <span class="fw-bolder color_primary">Designation</span>
                    <small class="ms-3 color_sec">{{designation}}</small>
                  </div>
                </div>
              </div>
            </div>
            <table class="mt-4 table table-bordered">
              <thead class="bg-dark text-white">
                <tr>
                  <th scope="col">Earnings</th>
                  <th scope="col">Amount</th>
                  <th scope="col">Deductions</th>
                  <th scope="col">Amount</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">Basic</th>
                  <td>{{basicSalary}}</td>
                  <td>Tax</td>
                  <td>{{deductions}}</td>
                </tr>
                <tr>
                  <th scope="row">Allowances</th>
                  <td>{{allowances}}</td>
                  <td colspan="2"></td>
                </tr>
                <tr class="border-top">
                  <th scope="row">Total Earning</th>
                  <td>{{totalEarnings}}</td>
                  <td>Total Deductions</td>
                  <td>{{deductions}}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="row">
            <div class="col-md-4">
              <br />
              <span class="fw-bold">Net Pay : {{netSalary}}</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <br />
        <p>**** This is a system generated payslip ****</p>
      </div>
    </div>
  </body>
</html>

```

* CSSタブをクリックして、以下のコードを貼り付けます

**CSS**

```css
body {
        font-family: "Times New Roman", Times, serif;
      }
      table {
        width: 100%;
        border-radius: 5px solid;
        border-spacing: 0;
        margin-bottom: 20px;
      }
      tr {
        border: solid 1px #524f4f;
        border-top-color: #524f4f;
      }
      th,
      td {
        padding: 8px;
        text-align: left;  
        color: #101f3e;
        background-color: #fff;
      }
      th {
        background-color: #f8f9fb !important;
        color: #7888a8;
      }
      p {
        text-align: center;
        color: black;
      }
      .color_primary {
        color: black;
      }
      .color_sec {
        color: #4d618a;
      }

```

> **Note:** エディタを使用して独自のカスタムテンプレートデザインを作成することもできます。また、*JavaScriptエディタ*を使用して複雑なテンプレートを作成したり、*JSON Dataエディタ*を使用してプレースホルダー値を入力したりすることもできます。

5. **Save**をクリックします。右側のプレビューセクションから、ユーザーにレンダリングされるテンプレートを確認できます。
![catalyst_payslip_html_css_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_html_css_template.webp)

6. **Settings**をクリックして、テンプレートのスタイルとフォーマットをさらに調整します。
![catalyst_payslip_template_setting_highlight](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/template-settings-smart-browz-payslip-generator.webp)

7. 各種オプションを活用して、テンプレートの視覚的なフォーマット要素をお好みに合わせてスタイル設定してください。*Live Preview*セクションではすべての変更がリアルタイムでレンダリングされ、ユーザーに表示されるテンプレートが確認できます。
![catalyst_payslip_template_settings_style](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_template_settings_style.webp)

> **Note:** このチュートリアルでは、**Output Format**をPDFに設定することを推奨します。

8. **Save Settings**をクリックして設定を保存します。テンプレートのカスタマイズが完了したら、テンプレート名の近くにある**戻る矢印アイコン**をクリックします。
![catalyst_payslip_template_back_highlight](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_template_back_highlight.webp)

カスタムテンプレートが保存され、Catalystが生成した一意の**Template ID**が表示されます。Templatesコンポーネントの詳細については、[こちらのヘルプドキュメント](https://docs.catalyst.zoho.com/ja/smartbrowz/help/templates/create-templates/)を参照してください。
![catalyst_payslip_template_saved_ID_highlight](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_template_saved_ID_highlight.webp)