> ## Documentation Index
> Fetch the complete documentation index at: https://foliant-help.iforiti.com/llms.txt
> Use this file to discover all available pages before exploring further.

# テンプレートエディタを開く

> テンプレートエディタは「テンプレート」ページの上に全画面で開きます。ブロック用のビジュアルエディタと、LiquidとHTML用のコードエディタがあります。

テンプレートエディタでは、書類の見た目と印刷される内容を変更できます。エディタは**テンプレート**ページの上に全画面のウィンドウで開きます。ほとんどのテンプレートは2つの方法で編集できます。**ビジュアル**エディタでは、コードを書かずにブロックで書類を組み立てます。**コード**エディタでは、テンプレートのLiquidとHTMLを直接編集します。どちらで変更しても、ページのプレビューは作業に合わせて更新されます。

![ビジュアルモードのテンプレートエディタ](https://mintcdn.com/foliant-dev/AoWxppgqeHqT1nDZ/template-editor/images/editor-overview.png?fit=max\&auto=format\&n=AoWxppgqeHqT1nDZ\&q=85\&s=4c16c3872dcf20e9f32165be1563b3b2)

## エディタを開く

1. Foliantで**テンプレート**に移動します。
2. テンプレートの**操作**メニューを開き、**テンプレートを編集**を選択します。テンプレートの**設定**ページを開き、そこで**テンプレートを編集**をクリックすることもできます。

エディタは常に既存のテンプレートを開きます。新しいテンプレートを作るには、まず「テンプレート」ページで**テンプレートを作成**を使用します（[テンプレートを作成する](https://foliant-help.iforiti.com/jp/templates/create-a-template.md)をご覧ください）。作成が完了すると、新しいテンプレートがエディタで開きます。

エディタを閉じるには、Shopify管理画面のウィンドウの閉じるボタンを使用します。開く前のページに戻ります。

## 画面の構成

**上部のバー**には、テンプレート名と次の操作が表示されます。

| 操作 | 内容 |
| - | - |
| **履歴** | テンプレートのバージョン履歴を開きます。履歴を開いている間、ボタンは**エディタに戻る**と表示されます。 |
| **公開** | **公開を必須にする**がオンで、テンプレートに未公開の下書きがある場合に、「履歴」の代わりにメインのボタンとして表示されます。[変更を保存して公開する](https://foliant-help.iforiti.com/jp/template-editor/save-and-publish.md)をご覧ください。 |
| **テンプレート設定** | エディタを閉じて、テンプレートの設定ページを開きます。テンプレートの対象、名前、書類の種類、言語、配信を設定できます。 |
| **ブロックをJSONで表示** | ビジュアルテンプレートのみです。ブロックをデータとして表示し、エクスポートやインポートができます。[ブロックをJSONでエクスポート・インポートする](https://foliant-help.iforiti.com/jp/template-editor/export-import-blocks.md)をご覧ください。 |
| **スターターに置き換える…** | テンプレート全体を既製のスターターまたはデザインに置き換えます。保存するまで何も変更されません。 |
| **削除** | 確認後にテンプレートを削除します。 |

**上部のバーの下の行**には、次のものがあります。

* モードの切り替え：**ビジュアル**と**コード**。[ビジュアルとコードを切り替える](https://foliant-help.iforiti.com/jp/template-editor/visual-and-code-modes.md)をご覧ください。
* 書類の**用紙**、**ドキュメントの言語**、**第2言語**（コードテンプレート）、**数値の形式**。これらはテンプレートと一緒に保存されます。[プレビュー、用紙サイズ、ズーム](https://foliant-help.iforiti.com/jp/template-editor/preview-paper-and-zoom.md)と[日付、言語、翻訳](https://foliant-help.iforiti.com/jp/template-editor/liquid-dates-and-languages.md)をご覧ください。
* 公開が必須の場合は、**公開中**または**下書き — 未公開の変更があります**のバッジ。
* 保存していない変更がある間は、**未保存の変更**のバッジ。
* ビジュアルエディタでは、**元に戻す**、**やり直す**、**書類のスタイル**、ブロック数。

**メインエリア**はモードによって異なります。

* **ビジュアル**：左にブロックパレット、中央にページ、右にインスペクタがあります。[ブロックを追加・移動・削除する](https://foliant-help.iforiti.com/jp/template-editor/add-and-arrange-blocks.md)をご覧ください。
* **コード**：左に**Liquid変数**と**メタフィールド**のリファレンス付きのコードエディタ、右にライブプレビューがあります。[テンプレートのコードを編集する](https://foliant-help.iforiti.com/jp/template-editor/code-editor.md)をご覧ください。

ページの上には、**PDFをプレビュー**、**透かし: オン** / **透かし: オフ**ボタン（[透かしやスタンプを追加する](https://foliant-help.iforiti.com/jp/template-editor/watermarks.md)をご覧ください）、プレビュー用の注文の選択、ズームボタンもあります。

## テンプレートが開くエディタ

* ブロックで作成したテンプレートは、プランにビジュアルエディタが含まれている場合は**ビジュアル**で開きます。含まれていない場合は**コード**で開きます。[ビジュアルエディタのプラン別の利用可否](https://foliant-help.iforiti.com/jp/template-editor/visual-editor-plans.md)をご覧ください。
* コードで作成したテンプレートは**コード**で開きます。**ビジュアル**タブでブロックに変換できます。
* 購入したデザインから作成したテンプレートは、代わりにデザインエディタで開きます。[デザインをカスタマイズする](https://foliant-help.iforiti.com/jp/designs/customize-a-design.md)をご覧ください。

## 補足

* エディタの外に移動するリンク（**テンプレート設定**、ブランディング設定、プランページなど）をクリックすると、ウィンドウが閉じます。未保存の変更がある場合は、先に**保存して続行**または**破棄して続行**の選択を求められます。
* すでに書類を発行済みの請求書とクレジットノートのテンプレートでは、変更はこれ以降に発行される書類にのみ適用されることがバナーで表示されます。[発行済みの請求書をロックする](https://foliant-help.iforiti.com/jp/invoices-and-numbering/locked-invoices.md)をご覧ください。
* 選択したすべての注文に対して1つの書類を印刷するテンプレート（マニフェスト、注文サマリー、ピッキングリスト）には、専用のブロックと項目があります。これらのプレビューには3件のサンプル注文が使用され、ブロックに条件は設定できません。

## 関連記事

* [ビジュアルとコードを切り替える](https://foliant-help.iforiti.com/jp/template-editor/visual-and-code-modes.md)
* [ブロックを追加・移動・削除する](https://foliant-help.iforiti.com/jp/template-editor/add-and-arrange-blocks.md)
* [テンプレートのコードを編集する](https://foliant-help.iforiti.com/jp/template-editor/code-editor.md)
* [変更を保存して公開する](https://foliant-help.iforiti.com/jp/template-editor/save-and-publish.md)
* [テンプレートを作成する](https://foliant-help.iforiti.com/jp/templates/create-a-template.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.