> ## 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 でできています。**ビジュアル**エディタは、ブロックとドキュメントスタイルからそのコードを自動で作成します。**コード**エディタでは、コードそのものが表示されます。切り替えは、エディタ上部の**ビジュアル**タブと**コード**タブで行います。切り替えても、Foliant がコードを削除することはありません。通常のブロックに変換できない部分は、**カスタム Liquid** ブロックとして保持されます。

## 始める前に

**ビジュアル**タブを使えるかどうかは、ご利用のプランによって異なります。使えない場合は、タブにそれを含むプランが表示され、コードエディタは通常どおり使えます。詳しくは[ビジュアルエディタのプラン別提供状況](https://foliant-help.iforiti.com/jp/template-editor/visual-editor-plans.md)をご覧ください。

## コードテンプレートをブロックに変換する

1. エディタでテンプレートを開きます。**コード**で開きます。
2. **ビジュアル**タブをクリックします。**ビジュアルに変換**ダイアログが開きます。
3. 始め方を選びます。

| オプション | 動作 |
| - | - |
| **ブロックレイアウトから始める** | **レイアウト**(例: **請求書**、**納品書**、**返品フォーム**)を選び、**ブロックレイアウトを使用**をクリックします。現在のコードはそのレイアウトに置き換えられます。保存するまでは、**破棄**でコードを元に戻せます。保存後も、コードはバージョン履歴に残ります。 |
| **コードをカスタム Liquid ブロックとして残す** | **コードを残す**をクリックします。コードはそのまま保持され、その前後に新しいブロックを追加できます。Foliant は、認識できるセクション(ヘッダー、住所、商品テーブル、合計など)を、同じ注文情報を印刷する場合は通常のブロックに変換します。それ以外はすべて、元の位置のままカスタム Liquid ブロックとして保持します。 |

4. ページを確認してから保存します。

選べるレイアウトはテンプレートによって異なります。注文ごとに 1 つのドキュメント(請求書、クレジットノート、見積書、納品書、返品フォーム、コマーシャルインボイス、発注書、一般注文ドキュメント、配送ラベル、領収書)か、選択したすべての注文で 1 つのドキュメント(ピッキングリスト、注文サマリー)のどちらかです。ドキュメントタイプが設定されていないテンプレートにドキュメントタイプのレイアウトを使うと、そのタイプが設定されます。たとえば請求書のレイアウトを使うと、請求書として採番されます。

## ビジュアルテンプレートのコードを表示・編集する

1. ビジュアルテンプレートで**コード**タブをクリックします。**コンパイルされた Liquid** が表示されます。これは、Foliant がブロックとドキュメントスタイルから生成したコードです。読み取り専用です。
2. 変更するには、**コードを編集**をクリックします。以降はコードエディタが有効になり、保存するとコードが保存されます。
3. 保存すると、Foliant がコードからブロックを読み取り直すため、テンプレートはビジュアルのまま保たれます。

1 つのブロックのコンパイル済みコードを開くこともできます。ブロックを選択し、その**コンテンツ**タブで**コンパイルされた Liquid を表示**をクリックします。

## コードを編集した後でビジュアルに戻す

**ビジュアル**タブをクリックします。Foliant がコードからブロックを読み取ります。

* コードを変更していないブロックは、元のまま戻ります。
* コードがブロックと一致しなくなった部分や、どのブロックにも属さない場所に書かれた部分がある場合は、**ビジュアルに戻しますか?**ダイアログの**カスタム Liquid として保持される部分**に、理由とともに一覧表示されます。
  * **編集されたコード**: ブロックのコードが変更されたため、カスタム Liquid ブロックになります。
  * **ブロック外に記述されたコード**: ブロックの間に追加した新しいコードです。
* 続行するには**ビジュアルに切り替える**を、コードの編集を続けるには **Liquid のままにする**をクリックします。

何も削除されることはなく、切り替えは元に戻せます。切り替える前に、コードのエラーをすべて修正する必要があります。

## テンプレートをスターターに置き換える

上部バーの\*\*スターターに置き換える…\*\*を使うと、エディタの内容がすべてスターターテンプレートまたはデザインに置き換わります。スターターはコードテンプレートのため、ビジュアルテンプレートはコードテンプレートになります。保存するまでは何も変更されず、**破棄**で元の内容に戻せます。

## 補足

* カスタム Liquid ブロックは、他のブロックと同じように移動、スタイル設定、条件の設定ができます。コードは記述したとおりに印刷されます。
* 変換はテンプレートごとに行われ、選択した場合にのみ実行されます。
* 購入したデザインから作成したテンプレートはデザインエディタを使用するため、ここでビジュアルやコードに切り替えることはできません。

## 関連記事

* [テンプレートエディタを開く](https://foliant-help.iforiti.com/jp/template-editor/editor-overview.md)
* [テンプレートのコードを編集する](https://foliant-help.iforiti.com/jp/template-editor/code-editor.md)
* [ブロックリファレンス](https://foliant-help.iforiti.com/jp/template-editor/block-catalogue.md)
* [ビジュアルエディタのプラン別提供状況](https://foliant-help.iforiti.com/jp/template-editor/visual-editor-plans.md)


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