{"__v":1,"_id":"5544d76bd8833c0d00582808","category":{"__v":1,"_id":"5544d76ad8833c0d00582805","pages":["5544d76bd8833c0d00582807","5544d76bd8833c0d00582808"],"project":"55227389b4a0de0d00de7e28","version":"5544d76ad8833c0d00582801","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-13T04:13:51.890Z","from_sync":false,"order":9999,"slug":"_-2","title":"開発者向けツール"},"project":"55227389b4a0de0d00de7e28","user":"552342f6e20da719000e7925","version":{"__v":1,"_id":"5544d76ad8833c0d00582801","forked_from":"55227389b4a0de0d00de7e2b","project":"55227389b4a0de0d00de7e28","createdAt":"2015-05-02T13:55:54.059Z","releaseDate":"2015-05-02T13:55:54.059Z","categories":["5544d76ad8833c0d00582802","5544d76ad8833c0d00582803","5544d76ad8833c0d00582804","5544d76ad8833c0d00582805","5544d76ad8833c0d00582806"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.0.0","version":"4.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-13T05:43:22.707Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"**ファイルエディタ**は*.../design/themes/theme_name* ディレクトリ以下に置かれているファイルを管理するのに役立ちます。\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"ファイルエディタはJavascriptベースです。ファイルエディターを利用する場合は、お使いのブラウザでJavascriptを有効にしてください。\",\n  \"title\": \"ヒント\"\n}\n[/block]\n# ファイルの編集方法:\n\n- 管理パネルの**デザイン >  ファイルエディター**へ移動します。\n- 左のパネルから目的のディレクトリとファイルを選択します。このパネルは*.../design/themes/theme_name*ディレクトリの構造を示しています。\n- コードの部分を編集したら、*【変更を保存】*をクリックします。\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/In56gSdQBC60tu3Mmogg_tpl003.png\",\n        \"tpl003.png\",\n        \"1210\",\n        \"468\",\n        \"#1d5890\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"現在使用されているテーマのファイルが表示されているかどうかを確認してください。ほかのテーマを編集したい場合は、デザイン > テーマから選択してください。\",\n  \"title\": \"注意\"\n}\n[/block]\nファイルエディターは、ストアフロントのテンプレートをその場で編集することが可能です。\n\nストアフロントで目的の要素を選択し、要素の右上のアイコンをクリックしてテンプレートの内容を編集します。\n\nソースコードは強調されていますので、テンプレートの構造を調べることはとても簡単です。保存された変更はストアフロントでそのまま確認することができます。\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"設定にある*自動キャッシュ再構築*の設定をオンにすることを忘れないでください。これにより変更後すぐに、データがキャッシュされ変更をすぐに見ることができます。\",\n  \"title\": \"ヒント\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"ファイルエディターの利用方法\"\n}\n[/block]\n**ファイルエディタ**の使用の一例として、商品のカテゴリページで**カートへ追加**要素の場所を変更する例を見てみましょう。\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/d6MNye8RRF6YcIkE9qjZ_fileeditor.png\",\n        \"fileeditor.png\",\n        \"984\",\n        \"726\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n\n*templates > blocks > list_templates > products_list.tpl* をファイルエディタを開き、下記の行を探し、コードから削除してください:\n\n<<>>\n\n- 同じファイルで`<div class=”float-left product-item-image center”>` クラスを持つ要素を探し、画像のように正確に以前のコードをペーストします:\n\n<<>>\n\n- *float-right right*を`<div class=”float-right right add-product”>`から削除し、`<div class=”add-product”>`に変更します。\n\n- 【変更を保存】をクリックします。\n\n- 変更が正確に変更されたことを確認するためにストアフロントのカテゴリーページを開きます。","excerpt":"ファイルエディターでは、CS-Cartの管理パネルからテーマファイルのソースコードを直接編集することが出来ます。","slug":"file-editor","type":"basic","title":"ファイルエディター"}

ファイルエディター

ファイルエディターでは、CS-Cartの管理パネルからテーマファイルのソースコードを直接編集することが出来ます。

**ファイルエディタ**は*.../design/themes/theme_name* ディレクトリ以下に置かれているファイルを管理するのに役立ちます。 [block:callout] { "type": "info", "body": "ファイルエディタはJavascriptベースです。ファイルエディターを利用する場合は、お使いのブラウザでJavascriptを有効にしてください。", "title": "ヒント" } [/block] # ファイルの編集方法: - 管理パネルの**デザイン > ファイルエディター**へ移動します。 - 左のパネルから目的のディレクトリとファイルを選択します。このパネルは*.../design/themes/theme_name*ディレクトリの構造を示しています。 - コードの部分を編集したら、*【変更を保存】*をクリックします。 [block:image] { "images": [ { "image": [ "https://files.readme.io/In56gSdQBC60tu3Mmogg_tpl003.png", "tpl003.png", "1210", "468", "#1d5890", "" ] } ] } [/block] [block:callout] { "type": "warning", "body": "現在使用されているテーマのファイルが表示されているかどうかを確認してください。ほかのテーマを編集したい場合は、デザイン > テーマから選択してください。", "title": "注意" } [/block] ファイルエディターは、ストアフロントのテンプレートをその場で編集することが可能です。 ストアフロントで目的の要素を選択し、要素の右上のアイコンをクリックしてテンプレートの内容を編集します。 ソースコードは強調されていますので、テンプレートの構造を調べることはとても簡単です。保存された変更はストアフロントでそのまま確認することができます。 [block:callout] { "type": "info", "body": "設定にある*自動キャッシュ再構築*の設定をオンにすることを忘れないでください。これにより変更後すぐに、データがキャッシュされ変更をすぐに見ることができます。", "title": "ヒント" } [/block] [block:api-header] { "type": "basic", "title": "ファイルエディターの利用方法" } [/block] **ファイルエディタ**の使用の一例として、商品のカテゴリページで**カートへ追加**要素の場所を変更する例を見てみましょう。 [block:image] { "images": [ { "image": [ "https://files.readme.io/d6MNye8RRF6YcIkE9qjZ_fileeditor.png", "fileeditor.png", "984", "726", "", "" ] } ] } [/block] *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”>`に変更します。 - 【変更を保存】をクリックします。 - 変更が正確に変更されたことを確認するためにストアフロントのカテゴリーページを開きます。