CS-Cart.jp開発者ドキュメント
  • はじめに
  • Getting Started
    • CS-Cart開発者向け注意事項
    • CS-Cartの構成
    • デバッグ方法
  • コア
    • Hooks
    • コントローラー
      • Pre&Post コントローラー
    • データベース
      • データベースの構造と命名規則
      • データベース・プレイスホルダー
      • 他のデータベースへの接続
    • ショップフロント
      • ブロック
      • blockメインスキーマ—
      • Dynamic Objects
      • ajaxリクエストの使用方法
      • 特別なCSSセレクター
      • マイクロフォーマット Microformats
      • 通知システム
      • ツールチップ
    • 設定
    • コア関数
    • イベントの通知
    • 言語変数
    • スキーマー
  • アドオン開発
    • フック
      • PHPフック
      • テンプレートフック
    • アドオンチュートリアル
      • 「Hello World」チュートリアル
      • Advanced Add-on チュートリアル
      • 商品リスト、詳細ページのカスタムテンプレートを作成
      • 支払方法の開発
    • アドオンの管理プロセス
    • Add-on スキーマー
      • アドオンの互換性
      • 他のアドオンとの競合・依存設定
    • APIの拡張
    • スキーマーの拡張
    • アドオンのディレクトリ構造
    • アドオンの言語変数
    • .poファイルによる言語ファイルの作成
  • テーマ開発
    • テーマ開発の概要
    • テーマの複製
    • レイアウトの管理
    • トップパネルとヘッダー
    • テーマを使用したショップの設定の変更
    • CSS
    • テーマの言語変数
    • メディアファイル
    • 親テーマ
    • スタイルとビジュアルエディター
    • レイアウトエディター
    • テンプレート
  • デバッグ
    • デバッガー
    • ファイルエディター
GitBook提供
このページ内
  • ディレクトリ構造
  • images
  • アイコンフォント
  1. テーマ開発

メディアファイル

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スタイルを適応させることができます:影やトランジション、アニメーション等

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

<画像>

  • 右上の赤い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が対応するクラスを指定します。

前へテーマの言語変数次へ親テーマ

最終更新 7 か月前

CS-Cartで使用されるというサービス利用しており、シンプルにアイコンを利用できます。

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

IcoMoon
IcoMoon