CMSでホームページ作成の紹介・ショッピングサイトの構築 [ Ec-Cube ]



CMS[ shop ]:Ec-Cubeのオリジナルテンプレートの作成

オリジナルテンプレートの作成

デフォルト使用の場合EC-CUBEインストールフォルダ内
通常 EcCube/ 以下
アクセス:http://example.com/EcCube/
管理画面:http://example.com/EcCube/admin/

ユーザフォルダ設定をしたフォルダの場合/home/usr_name/pubulic_html/ 以下
当サイトではユーザフォルダを作成して実行していますのでこちらで解説していきます。
アクセス:http://example.com/~EcCube/
管理画面:http://example.com/~EcCube/admin/

下準備:
管理画面-デザインの管理「テンプレートの設定」からデフォルトのテンプレートをローカルへダウンロード

管理画面-デザインの管理から
ダウンロードしたファイルに手を加えないで今度は「テンプレートの追加」でアップロードします。

テンプレートコード:例 Mytemp フォルダ名になります。 
テンプレート名:例 マイテンプレート-1 他のテンプレートとの区別する名前

「テンプレートの設定」に戻り
アップしたテンプレート(テンプレート名:マイテンプレート-1)にチェックを入れこれを使うようにする。

作成:
テンプレートの作成は「デザイン管理」
今回はデザイン管理画面のみで行います。

デフォルトでの作成:デザイン管理

作業する前にEcCubeのテンプレート作成するには各コンテンツにより見せ方を変えることができます。

デザイン管理-レイアウトの設定:
ここではウィジェットによる配置を設定する事と新規ページの作成ができます。
予め全体のレイアウトをどんな風にしたいか考え配置します。

各ページの設定:デフォルト
TOPページ 3カラム(3列表示)

レイアウトの設定の最下段
他のページ:デフォルト
商品一覧・商品・詳細・MYページ・個人ページほか自分で作成した新規ページ
デフォルトでは2カラム(2列表示になります)
このページをウィジェットを使い3カラムにしてもデフォルトでは2カラムのままみたいですのでトップ以外はすべて2カラムとします。

画像の入れ替え:
デフォルト状態では画像のサイズを守り、トップ・メニュー・コンテンツ内の画像を自前の画像と交換します。

画像の差し替えは

user_data/packages/Mytemp/img

以下に各コンテンツ毎に入っていますので画像作成ソフトを使い作成したものと入れ替えてください。

背景を変える:
もし背景を変えたいなら管理画面-デザイン管理のCSSの編集に、
ここでのCSSを記入した場合全体に反映されます。


@charset "utf-8";

@import url("../packages/Mytemp/css/import.css");

以下に
------------------
BODY {
background:#000000; /* BgColor Black */
}
------------------
を加えます。

どうですか?
背景と画像を入れ替えただけでも、デフォルトで使うよりはオリジナル風に見えませんか?