メディアファイル
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
ファイルを指定します。
必要に応じて
tygh/custom_icons.less
ファイルのフォントとクラス名へのパスを変更します。テキスト内でこれらのアイコンを使用するには、このタイプのhtml要素を作成する必要があります: テンプレートの目的部分に
<i class="icon-user"></i>
を記述し、icon-user
が対応するクラスを指定します。
最終更新