> 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/theme-development/media-files.md).
# メディアファイル
CS-Cartの全てのメディアファイルは下記のディレクトリに保存されています：
> design/themes/your\_theme\_name/media
メールテンプレート用には、次のディレクトリを使用します：
> design/themes/your\_theme\_name/mail/media
## ディレクトリ構造
### images
* `addons` -アドオンで使用する画像は`addons/your_addon_name/`ディレクトリを使用します。
* `lib` - サードパーティーのライブラリ (jqueryui等)によって使用する画像
* `icons` - アイコンやGIFアニメーション (読み込み中の画像やポインターなど)。
* `patterns` - ビジュアルエディタで追加された背景画像など
* `fonts` - アイコンフォント（詳細は次のパラグラフを確認してください）
## アイコンフォント
アイコンフォントはCS-Cartで広く使われています。\
すべてのシンボルでアイコンフォントが使用されています。
画像アイコンと比較するとアイコンフォントには多くの利点があります：
* アイコンフォントはすべてのデバイスの画面で読みやすく表示されます。
* アイコンは１つのフォントファイルとして管理されます。
* アイコンのサイズや色を選択することができます。
* アイコンにモダンなCSSスタイルを適応させることができます：影やトランジション、アニメーション等
CS-Cartで使用される[IcoMoon](https://icomoon.io/)というサービス利用しており、シンプルにアイコンを利用できます。
次にアイコンの追加や編集の方法を説明します。
＜画像＞
* IcoMoonのサイトへ移動してください。\
[*IcoMoon*](https://icomoon.io/)
* 右上の赤い`IcoMoon App`ボタンをクリックして編集を開始します。
* 目的のアイコンをクリックして選択し､下の`Ganerate Font…`ボタンをクリックします。
＜画像＞
* 作成したアーカイブをダウンロードするにはその`Download`ボタンをクリックします。
* ダウンロードされたファイルを解凍し、CS-Cartをインストールしたディレクトリの次のディレクトリに移動します：`design/themes/your_theme_name/media`
* 解凍して出来た`icomoon/fonts`ディレクトリの中身を`design/themes/your_theme_name/media/fonts`ディレクトリにコピーします。
* `icomoon` ディレクトリ内の\_style.css\_を`custom_icons.less`にファイル名を変更し、`design/themes/your_theme_name/css/tygh`にコピーします。
* `styles.less`ファイル内の`@import` ディレクティブで`custon_icons.less`ファイルを指定します。
```html
@import "custom_icons.less";
```
* 必要に応じて`tygh/custom_icons.less` ファイルのフォントとクラス名へのパスを変更します。
* テキスト内でこれらのアイコンを使用するには、このタイプのhtml要素を作成する必要があります： テンプレートの目的部分に``を記述し、`icon-user`が対応するクラスを指定します。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.cs-cart.jp/theme-development/media-files.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.