> For the complete documentation index, see [llms.txt](https://docs.cs-cart.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cs-cart.jp/debuging/file-editor.md).

# ファイルエディター

`ファイルエディタ`は`.../design/themes/theme_name`ディレクトリ以下に置かれているファイルを管理するのに役立ちます。

{% hint style="info" %}
HINT

ファイルエディタはJavascriptベースです。ファイルエディターを利用する場合は、お使いのブラウザでJavascriptを有効にしてください。
{% endhint %}

## ファイルの編集方法：

* 管理パネルの`デザイン > ファイルエディター`へ移動します。
* 左のパネルから目的のディレクトリとファイルを選択します。このパネルは\_.../design/themes/theme\_name\_ディレクトリの構造を示しています。
* コードの部分を編集したら、\_【変更を保存】\_をクリックします。

＜画像＞

{% hint style="warning" %}
警告

現在使用されているテーマのファイルが表示されているかどうかを確認してください。ほかのテーマを編集したい場合は、デザイン > テーマから選択してください。
{% endhint %}

ファイルエディターは、ストアフロントのテンプレートをその場で編集することが可能です。

ストアフロントで目的の要素を選択し、要素の右上のアイコンをクリックしてテンプレートの内容を編集します。

ソースコードは強調されていますので、テンプレートの構造を調べることはとても簡単です。保存された変更はストアフロントでそのまま確認することができます。

{% hint style="info" %}
HINT

設定にある自動キャッシュ再構築の設定をオンにすることを忘れないでください。これにより変更後すぐにデータがキャッシュされ変更をすぐに見ることができます。
{% endhint %}

## ファイルエディターの利用方法

`ファイルエディタ`の使用の一例として、商品のカテゴリページで`カートへ追加`要素の場所を変更する例を見てみましょう。

＜画像＞

`templates > blocks > list_templates > products_list.tpl`をファイルエディタを開き、下記の行を探し、コードから削除してください：

`<>`

* 同じファイルで`<div class=”float-left product-item-image center”>` クラスを持つ要素を探し、画像のように正確に以前のコードをペーストします:

`<>`

* `float-right right`を`<div class=”float-right right add-product”>`から削除し、`<div class=”add-product”>`に変更します。
* 【変更を保存】をクリックします。
* 変更が正確に変更されたことを確認するためにストアフロントのカテゴリーページを開きます。