> ## 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、CSSを編集し、注文フィールドを挿入し、変数リファレンスを使い、コードエラーを修正します。

コードエディタでは、テンプレートを細かく自由に編集できます。テンプレートはHTMLとCSSにLiquidを組み合わせたものです。LiquidはShopifyと同じテンプレート言語で、`{{ order_name }}` は注文名を表示し、`{% for line_item in line_items %}` はアイテムごとに繰り返します。Foliantの注文変数はShopify Order Printerの変数に準拠しているため、Order Printer用に書かれたテンプレートはほとんどそのまま使えます。コードエディタはすべてのプランで利用できます。

## コードエディタを開く

エディタでテンプレートを開き、**コード**タブをクリックします。コードテンプレートは直接ここで開きます。ビジュアルテンプレートの場合は、まずコンパイルされたコードが表示されます。変更するには**コードを編集**をクリックします。[ビジュアルとコードの切り替え](https://foliant-help.iforiti.com/jp/template-editor/visual-and-code-modes.md)をご覧ください。

左側のパネルには3つのタブがあります。

| タブ | 表示内容 |
| - | - |
| **コード** | シンタックスハイライト付きのテンプレートのコードです。現在の行と列が下部に表示されます。 |
| **Liquid変数** | 使用できる変数とフィルターがグループ別(一般変数、明細行の詳細、顧客の詳細など)に表示されます。**リファレンスを検索**も使えます。 |
| **メタフィールド** | 注文、顧客、商品、バリエーションのメタフィールドを表示する方法です。[テンプレートでのメタフィールド](https://foliant-help.iforiti.com/jp/template-editor/metafields.md)をご覧ください。 |

右側のパネルはライブプレビューです。入力を止めると、すぐに更新されます。

## フィールドを挿入する

1. フィールドを入れたい位置にカーソルを置きます。
2. **フィールドを挿入**をクリックします。
3. **フィールドを検索**でフィールド(例:「tracking」や「SKU」)を検索し、クリックします。

Foliantがカーソル位置にLiquidを挿入します(例:`{{ shipping_address.city }}`)。`{{ line_item.sku }}` などの明細行のフィールドは、明細行のループ内でのみ機能します。ループ自体を挿入するには**明細行アイテム**を挿入してください。

## コードを検索する

**フィールドを挿入**の隣にある検索ボタンをクリックする(またはコード内で ⌘F / Ctrl+F を押す)と、テンプレート内のテキストを検索できます。

## コードエラー

エディタは入力中にコードをチェックし、問題を余白に表示します。

* **エラー**があると保存できず、プレビューも一時停止します。閉じていない `{{` や `{%` はエラーになります。エラーはエディタ上部の**コードエラー**バナーに一覧表示され、それぞれに**行へ移動**があります。
* **警告**は誤りの可能性がある箇所を示しますが、保存は可能です。例えば、不明なLiquidのフィルター、タグ、オブジェクト、不明なHTMLタグやCSSプロパティ、閉じていないHTMLタグなどです。

保存時にもFoliantがテンプレートをチェックします。Liquidが読み取れること、HTMLタグの対応が取れていること、インラインSVGに描画要素のみが含まれていることが必要です。問題がある場合は保存に失敗し、**更新に失敗しました**バナーに最大5件の問題が表示されます。行番号が分かる場合は行番号も表示されます。

テンプレートは保存できてもプレビューを表示できない場合は、バナーにLiquidのメッセージと、分かる場合は行番号が表示されます。

## 良いテンプレートを書くには

* 金額はセント単位です。必ず `{{ total_price | money }}` などの金額フィルターで表示してください。[テンプレートでの金額と通貨](https://foliant-help.iforiti.com/jp/template-editor/liquid-money-and-currency.md)をご覧ください。
* メモや住所など、顧客が入力したテキストには `| escape` を使ってください:`{{ note | escape }}`。
* 書類の言語に合わせて表示を変えたい文言には `{{ 'subtotal' | t }}` を使ってください。[日付、言語、翻訳](https://foliant-help.iforiti.com/jp/template-editor/liquid-dates-and-languages.md)をご覧ください。
* VATにはFoliantの組み込みスニペットを使ってください。`{% include 'vat_breakdown' %}` はVATの内訳表を、`{% include 'legal_notes' %}` は法的注記(リバースチャージ、輸出、IOSSなど)を表示します。

## 補足

* 番号付きテンプレート(請求書、クレジットノート、見積書)のどこにも `document_number` が表示されていない場合、Foliantは書類の末尾に番号を記載した小さな行を追加します。[テンプレートでの書類番号](https://foliant-help.iforiti.com/jp/template-editor/liquid-document-numbers.md)をご覧ください。
* コードテンプレートのページ番号と表ヘッダーの繰り返しは、テンプレートの設定ページの**ページレイアウト**で設定します。
* Shopify Order PrinterやOrder Printer Proからテンプレートを移行するには、テンプレートページの**テンプレートをインポート**を使ってください。[Order Printerからテンプレートをインポートする](https://foliant-help.iforiti.com/jp/templates/import-from-order-printer.md)をご覧ください。

## 関連記事

* [注文オブジェクトと一般的な変数](https://foliant-help.iforiti.com/jp/template-editor/liquid-order-variables.md)
* [Liquidフィルター](https://foliant-help.iforiti.com/jp/template-editor/liquid-filters.md)
* [ビジュアルとコードの切り替え](https://foliant-help.iforiti.com/jp/template-editor/visual-and-code-modes.md)
* [プレビュー、用紙サイズ、ズーム](https://foliant-help.iforiti.com/jp/template-editor/preview-paper-and-zoom.md)


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