メディアファイル

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というサービス利用しており、シンプルにアイコンを利用できます。

次にアイコンの追加や編集の方法を説明します。

＜画像＞

• IcoMoonのサイトへ移動してください。 IcoMoon

• 右上の赤い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ファイルを指定します。

@import "custom_icons.less";

• 必要に応じてtygh/custom_icons.less ファイルのフォントとクラス名へのパスを変更します。

• テキスト内でこれらのアイコンを使用するには、このタイプのhtml要素を作成する必要があります： テンプレートの目的部分に<i class="icon-user"></i>を記述し、icon-userが対応するクラスを指定します。