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で広く使われています。
すべてのシンボルでアイコンフォントが使用されています。
画像アイコンと比較するとアイコンフォントには多くの利点があります:
- アイコンフォントはすべてのデバイスの画面で読みやすく表示されます。
- アイコンは1つのフォントファイルとして管理されます。
- アイコンのサイズや色を選択することができます。
- アイコンにモダンな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が対応するクラスを指定します。