---
title: 事前に保存したHTMLをWysiwygエディタで呼び出す
description: よく使用するHTMLは事前に保存しておき、Wysiwygエディタから呼び出せます。このドキュメントでは、HTMLの保存方法からWysiwygエディタで呼び出す方法までを説明します。 
---

## 概要
よく使用するHTMLは事前に保存しておき、Wysiwygエディタから呼び出せます。  
このドキュメントでは、HTMLの保存方法からWysiwygエディタで呼び出す方法までを説明します。  

### 学べること
以下の手順で事前に保存したHTMLをWysiwygエディタで取得します。
- [テンプレートを保存する](#テンプレートを保存する)
- [テンプレートを呼び出す](#テンプレートを呼び出す)

## テンプレートを保存する
まずはよく使用するHTMLをWYSIWYGテンプレートに保存します。
[環境設定] -> [WYSIWYG専用テンプレート]をクリックします。

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

[追加]をクリックします。

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

以下のように設定します。

|項目|値|
|:--|:--|
|タイトル|任意のタイトル|
|ボディ|任意のHTML|
|公開設定|公開する|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/40512af58b2d87aa7763c9ceba6c2f25.jpg)

:::tip
[Source]のボタンをクリックするとHTMLのソースが表示されるので、直接クラス名の付与等が可能です。
:::

設定が完了したら[追加する]をクリックしてテンプレートを保存します。  

同様に必要なテンプレートをいくつか保存します。

## テンプレートを呼び出す
保存したテンプレートはコンテンツ編集画面のWYSIWYGエディタで呼び出せます。

### テンプレートを挿入する
WYSIWYGエディタのTemplatsアイコンをクリックし、利用するテンプレートをクリックします。  
テンプレート名にカーソルを載せると、テンプレートの内容がプレビューされるので、確認してクリックすると、エディタ内にテンプレートの内容が挿入されます。  

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