EC CUBE

EC CUBEをカスタムします

だいぶ期間が空きましたが、EC CUBEを使ってみようの続きです。

前回設置したEC CUBEにデザインを加えます。
EC CUBEのデザインテンプレートはSmartyで管理されているのですが、Smartyのファイルを直接編集するのはけっこうたいへんなので、管理画面上で編集していく事にします。

デザイン管理「デザイン管理」→「PC」→「テンプレート設定」からデフォルトのテンプレートをダウンロードします。

デザインアップロードダウンロードしたファイルを今度はアップロードして任意の名前に変えます。
すると、標準のテンプレートとは別にオリジナルのテンプレートを使用する事ができます。

デザイン切り替えオリジナルの方のテンプレートに切り替えます。
今後はこのオリジナルのテンプレートに編集を加えて行きます。
基本的にメニューは「デザイン管理」の中にあります。

新規ブロック仮に、左側にナビゲーションを追加するとします。
新しいブロックを追加して、HTMLタグを書き込みます。クラス名もここで付けます。

新規cssクラスの追加新規のcssファイルを作成し、クラスに対する命令を入れます。
とりあえず、背景色を赤くしてみます。
ここでちょっと問題があり、新規cssファイルはそのままでは読み込まれません。

cssの追加「import.css」を開き、新しいcssファイルを中に加えます。

新しいブロックが適用されました!

完成見本はこちら

こんな感じで、変更後のhtmlをブロックごとに分けて、ガリガリ変えて行きましょう。

梅木千世でした。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です