テンプレートセットとは？
EC-CUBEの醍醐味は、自由なカスタマイズ性にあります。それはシステムだけではなくデザインの変更についてもあてはまります。ソースコードレベルで編集すれば細かいところまで変更が可能になり、原型を留めないほどにデザインを変更することも可能です。
そうしてカスタマイズしたデザインを入れ替える場合は、秋と冬のテンプレートセットを用意しておき、秋から冬になると、用意していた冬のテンプレートに入れ替えることで、一瞬にして冬のデザインにするといったことも可能です。そして、そのテンプレートセットは保存して他のサイト作成時に活用するなどといった使い方も可能です。
テンプレートの複製
独自のテンプレートセットを作成するためには、デフォルトのテンプレートセットをベースに改造していくと、作業がしやすくなります。また、デフォルトのテンプレートを複製し、カスタマイズしていくことで、いつでも元のデザインに戻すことが可能になります。
そこで、まず、デフォルトのテンプレートセットを複製する手順を紹介しましょう。
①まず、デフォルトテンプレートセットをダウンロードします。「デザイン管理＞PC＞テンプレート設定」をクリックし、右側の「ダウンロード」ボタンをクリックすると、テンプレートセットが「tpl_package_default_*****.tar.gz」というような名前でダウンロードされます。これは+Lhaca（http://park8.wakwak.com/~app/Lhaca/）などのフリーソフトで解凍することができます。
②先ほどダウンロードしたテンプレートセットを、圧縮された状態のまま、別の名前で登録します。「デザイン管理＞PC＞テンプレート追加」をクリックし、「テンプレートコード」に適当な英数字を入力します（今回は「tpl2011072801」と名付けました）。「テンプレートファイル」には先ほどダウンロードした「tpl_package_default_*****.tar.gz」のファイルを選択します。そして、「アップロード」ボタンをクリックします。完了メッセージが表示されると、アップロードの完了です。
③再度、「デザイン管理＞PC＞テンプレート設定」を選択してみましょう。先ほどアップロードしたテンプレートが確認できます。「テンプレートテスト」と書いてある方を選択して、「この内容で登録する」ボタンをクリックすると、テンプレートが切り替わります（ただし、この状態では、ダウンロードしたものを再度アップロードしただけなので、画面デザインに変化はありません）。
なお、デザインを大幅に変更したい場合は、デフォルトのテンプレートよりシンプルでカスタマイズしやすい「デザインテンプレート・シンプルバージョン」をベースにした方が便利なケースもあります。「デザインテンプレート・シンプルバージョン」については、詳しくはChapter2を参照してください。
ロゴの入れ替え
「テンプレートテスト」のテンプレートセットが登録できたら、次はこのテンプレートセットをカスタマイズしていきましょう。今回は「logo.gif」ファイルを入れ替えることで、ロゴを変更します。
なお、テスト用ロゴデータは、以下から無料でダウンロードいただけます。
http://www.ec-cube.net/download/testproduct/
①「コンテンツ管理＞ファイル管理」を選択します。左側の「packages」というフォルダをクリックすると、その配下に、先ほどのテンプレートコードの名前のフォルダ（ここでは「tpl201172801」）が存在します。それをクリックするといくつかのフォルダが表示されます。
②「tpl2011072801」の中にある「img」というフォルダをクリックし、さらに「common」というフォルダをクリックすると、右側にファイルの一覧が表示されます。
③「ファイルのアップロード」欄の「参照」ボタンをクリックし、ダウンロードしてきたテスト用ロゴデータ「logo.gif」を選択し、「アップロード」ボタンをクリックします。
④トップページを確認すると、ロゴが変わっていることを確認できると思います。
色の切り替え
次に背景の色を切り替えてみましょう。具体的な手順は以下の通りです。
①先ほどと同様に「コンテンツ管理＞ファイル管理」を選択し、左側の「package」というフォルダ配下にあるテンプレートコードの名前フォルダ（ここでは「tpl2011072801」）をクリックします。すると「css」というフォルダが表示されますので、さらにそのフォルダをクリックすると、右側にCSSファイルの一覧が表示されます。今回は「common.css」を選択して、「ダウンロード」ボタンをクリックします。
②ダウンロードしたファイルの9行目に
background-color: #f5f5f5;
という記述がありますので、そちらを
background-color: #999999;
と変更し保存します。
③「参照」ボタンをクリックして、変更して保存した「common.css」を選択し「アップロード」ボタンをクリックします。
④背景が濃いグレーのトップページになっていれば、修正は成功です。
リファレンスの章にCSSファイルの構造一覧を掲載していますので、参考にして、CSSによるデザイン変更をいろいろと試してみてください。
デザインテンプレートの適用
EC-CUBEオーナーズストアサイト（http://store.ec-cube.net/）では有料、無料のテンプレートセットが多数配信されています。これらテンプレートセットを適用することにより、一から開発を行わなくても簡単に大幅なデザイン変更が可能です。
詳細は、Chapter2で、オーナーズストアからダウンロードしたテンプレートセットの適用方法を記載していますので、確認してください。
テンプレートセットの適用方法は、ダウンロードしたテンプレートセットを「テンプレート追加」で追加し、その後「テンプレート設定」で設定するだけです。
簡単に、フロント画面のデザインを丸ごと変更することができます（以下は、オーナーズストアより無料で配信されている「デザインテンプレートシンプルバージョン」を適用した画面）。