---
title: カスタムテンプレートの使い方を教えてください。
description: コンテンツ定義の設定で、テンプレート編集の項目にHTMLを記述することで、対象の項目を任意のHTMLに置き換えることができます。
category: howto
---

import StructuredDataFaqs from '@site/src/components/StructuredDataFaqs';

<StructuredDataFaqs faqs={[
    { question: "カスタムテンプレートの使い方を教えてください。", answer: "コンテンツ定義の設定で、テンプレート編集の項目にHTMLを記述することで、対象の項目を任意のHTMLに置き換えることができます。" }
]} />

[コンテンツ定義](/ja/docs/management/content-structure-topics-group/#項目設定)の設定で、テンプレート編集の項目にHTMLを記述することで、対象の項目を任意のHTMLに置き換えることができます。  
項目に注釈を入れたり、背景色を変更したり、任意のクラスを追加するのにご利用ください。  

## 設定箇所 
設定したい[コンテンツ定義](/ja/docs/management/content-structure-topics-group/#項目設定)の編集画面にて、内容を変更したい項目の、「編集」ボタンをクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/aef8272a5958ee9ec2fa8aa25e05a321.png)

項目設定が開くので[カスタムテンプレート]->[テンプレート編集]に記述します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/322739b3e23a3fe8cd8926aae2810e63.png)

## 設定例
### Slug
例えば以下の記述をSlugのカスタムテンプレートに入力すると、フロントエンドへのリンクを追加できます。

```smarty
<tr id="disp_topics_id" class="">
  <th class="rounded-0 bg-light">
    <label class="fw-bold">Slug</label>

    <span
      class="text-gray-600 ms-1"
      data-bs-toggle="tooltip"
      title=""
      data-bs-original-title="IDの代わりに識別子を指定できます。"
    >
      <i class="fe fe-help-circle"></i>
    </span>

    <span class="small text-gray-700 ms-2">(ID: {$formData.topics_id|escape})</span>
  </th>

  <td>
    <input
      type="text"
      name="slug"
      value="{$formData.slug|escape}"
      size="80"
      class="form-control"
    />

    {if $formData.slug}
      {assign var="newsId" value=$formData.slug}
    {elseif $formData.topics_id}
      {assign var="newsId" value=$formData.topics_id}
    {/if}

    {if $newsId}
      <span>フロントエンドで確認:</span>
      <a href="{$smarty.const.ROOT_URL}/news/{$newsId|escape:'url'}" target="_blank" rel="noopener noreferrer">
        <i class="fe fe-external-link me-1"></i>{$smarty.const.ROOT_URL}/news/{$newsId|escape}
      </a>
    {/if}
  </td>
</tr>
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/4f16920f52cea930c3685415599f7403.png)

:::danger
テーブル構成と、フォーム部品(name、id)などは変更しないでください。  
:::

:::caution
項目設定で設定した他の設定は反映されなくなります。
:::

### タイトル
例えば以下の記述をタイトルのカスタムテンプレートに入力すると、タイトルの項目名を変更できます。  

```smarty
<tr id="topics_subject">
    <th class="bg-light"><label class="fw-bold">議題</label><span class="badge bg-secondary ms-1">必須</span></th>
    <td>
        {if !$docmeta.is_primary && $primaryRow.subject!=''}
            <p class="major_language">
                <span class="step">{$primaryRow.subject|escape}</span>
            </p>
        {/if}
        <input type="text" id="subject" name="subject" value="{$formData.subject|escape}" size="100" class="form-control"/>
        <br>
        <span class="hint">現在の議題：{$formData.subject|escape}の変更は注意深くしてください。</span><br>
        <span class="hint">変更が必要な場合は、前回のタイトルとの違いに留意してください。</span><br>
    </td>
</tr>
```

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bd567f042b809ffd6c274046e72bba86.png)

:::danger
テーブル構成と、フォーム部品(name、id)などは変更しないでください。  
:::

:::caution
項目設定で設定した他の設定は反映されなくなります。
:::

### テキスト
例えば以下の記述をテキスト項目のカスタムテンプレートに入力すると、一度入力して更新したテキストの変更ができなくなります。

```smarty
<th class="bg-light">
    <label class="fw-bold">
        テキスト
    </label>
    <code class="small text-gray-600 ms-2">ext_col_02</code>
</th>
<td>
    <div class="ext_item_0" data-ext_type="0" data-default_value="">
        {if $cols.0.value != ''}
        <div><input type="text" name="ext_col_02" value="{$cols.0.value}" size="80" class="form-control" readonly></div>
        {else}
        <div><input type="text" name="ext_col_02" value="" size="80" class="form-control"></div>
        {/if}
    </div>
</td>
```

:::danger
テーブル構成と、フォーム部品(name、id)などは変更しないでください。  
:::

:::caution
項目設定で設定した他の設定は反映されなくなります。
:::

## 関連ドキュメント
- [管理画面プラグインを使ってKuroco管理画面に任意のCSSを適用する](/ja/docs/tutorials/apply-css-to-a-kuroco-management-screen-with-the-plugin/)
- [コンテンツ編集画面の表示を変更できますか？](/ja/docs/faq/can-i-modify-the-display-of-the-content-editor-screen/)
- [コンテンツ編集画面の表示を変更する](/ja/docs/tutorials/change-the-display-of-the-content-editing-page/)
- [コンテンツ編集画面に公開URLを開くボタンを追加できますか？](/ja/docs/faq/can-i-add-a-button-to-open-the-public-url-from-the-content-edit-screen/)