EC-CUBE(イーシーキューブ)無料テンプレート配布サイトまとめ

公開日:  最終更新日:2015/03/27

簡単にECサイトを構築できるオープンソースのEC-CUBEはテンプレートも充実していて、デザイン・HTMLコーディング作業なしでいったんサイトをオープンさせることも可能です。そんな無料・有料テンプレートの紹介や導入方法をまとめました。

ecc_ss

EC-CUBEのテンプレートとは

EC-CUBEには簡単に外見を変更できるように、予めデザインされたひな型(テンプレート)という仕組みが用意されています。
テンプレートを利用することで、見た目の変更に掛かる時間を大幅に削減することができます。

EC−CUBEのテンプレートはPC用、スマホ用とそれぞれ別々に設定することができ、テンプレートの切り替えも管理画面から手軽に行うことができます。

テンプレートの設定作業はおおよそ以下の流れで行います。

(1)テンプレートを入手する

EC−CUBEのテンプレート配布サイトから自分好みのテンプレートをダウンロードします。
テンプレートの中には有料のものもあるので注意が必要です。

(2)テンプレートのアップロード

入手したテンプレートをEC-CUBEの管理画面からアップロードします。
アップロードする際に、管理用に名前をつけられるので複数のテンプレートを試す場合はわかりやすい名前をつけるようにすると良いでしょう。

(3)テンプレートの切り替え

管理画面に先ほどアップロードしたテンプレートが表示されているはずですので、
そちらを指定して登録すればテンプレートの切り替えは完了です。

詳しい設定の仕方はEC-CUBEの設定マニュアルがありますのでこちらをご覧ください。
http://www.ec-cube.net/document/template/template.pdf

無料テンプレート配布サイト一覧

EC-CUBEのテンプレートを入手する方法はいくつかありますが、最初にいきなり有料のものを購入するのも抵抗があると思います。そこでEC-CUBEの無料テンプレートを配布しているサイトをいくつかご紹介します。

EC-CUBE オーナーズストア

無料テンプレートの数は少ないですが、EC-CUBEの開発を行っている株式会社ロックオンさんが運営しているサイトですので信頼感があります。
また、テンプレート適用方法の動画があるなどサブコンテンツも充実しているのでEC-CUBEを使うのであれば一度は訪れておくと良いでしょう。
URL:http://www.ec-cube.net/owners/

クロールストア

EC-CUBEのシルバーパートナー会社である株式会社C-Rowlさんが運営する配布サイトです。
以前有料で配布していたテンプレートが現在で無料になって配布されているのでお得感が感じられるでしょう。
URL:http://www.c-rowl.com/store/

ファーストサーバ テンプレートダウンロード

レンタルサーバーを提供しているファーストサーバ社によるEC-CUBEのテンプレートダウンロードサイトです。
ファーストサーバ社はEC-CUBEに特化したレンタルサーバーサービスも提供しており、EC-CUBEには力を入れているようです。
ダウンロードには個人情報の入力が必要ですが、ファーストサーバのサービスを契約していなくてもダウンロードできるようになっています。
URL:https://ec-cube.fsv.jp/FS-APL/FS-Form/form.cgi?Code=tmp

無料のテンプレートをまとめて検索できるサイトは実はあまりありません。ですのでもし無料テンプレートを使う場合には上記のサイトを利用するか、Googleなどの検索エンジンで「EC-CUBE 無料テンプレート」などのキーワードで検索してみてください。

デザイン性の高い企業ECなら有料テンプレートを買おう

時間はないけどせっかくECサイトをやるならおしゃれにしたい!でも無料テンプレートでは物足りない。。。
そんな方には有料テンプレートの利用をおすすめします。

EC-CUBEでは有料テンプレートが豊富にありますので、あなたの気に入るデザインがきっと見つかるでしょう。

EC-CUBE オーナーズストア

無料テンプレートでも詳解したEC-CUBE オーナーズストアです。
3万円弱のテンプレートから、高いものでは20万近くするものまで取り揃えられています。
やや高価に見えるかもしれませんが、その価格に見合った高品質なテンプレートが揃えられています。
EC-CUBEの本家サイトとも言うべき場所で、デザインテンプレートだけでなく様々な追加機能オプションも販売されているのが特長です。
URL:http://www.ec-cube.net/owners/

EC-BEE

EC-BEEはEC-CUBEバージョン2.11のテンプレート販売サイトです。
あまり自信がない方でも安心して購入できるよう、購入後の設置やカスタマイズのサポートも行っています。
テンプレートの価格は5000円程度からと低価格なものも用意されているのが魅力です。
URL:http://cof.jp/

ECテンプレート

EC-CUBE用テンプレート販売サイトです。
数はさほど多くありませんが、定期的に割引をしているようで、次の割引開始日時がわかるようになっているユニークなサイトです。
URL:http://www.ec-templates.com/

テンプレートをカスタマイズするには

ここまで、EC-CUBEのテンプレートを有料・無料問わず紹介してきましたが、実はEC-CUBEのテンプレートは独自にカスタマイズすることも可能です。
必要な知識はHTMLとCSSに加え、Smartyと呼ばれるPHPのテンプレートエンジンを理解していないと難しいでしょう。
これらの知識がない場合は外部の開発業者にカスタマイズを委託して行うなどしなければなりません。

もしこれらの条件をクリアして、自分たちでカスタマイズにチャレンジする場合は、EC-CUBEのテンプレート構成やカスタマイズの流れを簡単にご紹介しますので参考にしてください。

EC-CUBEのファイル構成

EC-CUBEをダウンロードし解凍すると「data」と「html」の2つのディレクトリとCOPYINGというファイルが出現します。
それぞれの役割は以下のようになっています。

data

EC-CUBEを動かすプログラム本体が格納されているディレクトリです。
Webブラウザからは絶対に見えない場所に設置しましょう。
デザインテンプレートが配置されるのもこのdataディレクトリ以下にある「Smarty」ディレクトリの中になります。

html

EC-CUBEにおいて、Webブラウザとやり取りするインターフェイスの役割を担ったファイルが置かれています。
ですのでdataと違い、Webブラウザから見える場所に置いてください。

COPYING

ライセンスが記載されているテキストファイルです。

EC-CUBEのテンプレート構造

EC-CUBEのテンプレートはdata/Smarty/templatesの下に配置されますが、
そこから更にPC用、スマートフォン用、ガラケー用のデバイスごとと管理画面用の計4つのディレクトリに分かれて構成されています。

admin

管理画面用のテンプレートが格納されているディレクトリになります。
商品管理や受注管理など、管理者向けページの内容になっています。

default

PC用テンプレートが格納されているディレクトリです。

mobile

ガラケー用テンプレートが格納されているディレクトリです。

sphone

スマートフォン用テンプレートが格納されているディレクトリです。

default、mobile、sphoneの中身はカートや商品ページなど基本的に同じ内容になっています。

テンプレートファイルの構成

default、mobile、sphoneのテンプレートファイルの中身ですが、
多少の差異はありますがおおよそ以下の3つの要素から構成されています。

ページ

各URLにアクセスされた時の表示内容が記述されています

ブロック

各ページの中で部分的に入れ替える要素が記述されています

フレーム

上記ページやブロックを呼び出す内容が記述されています

テンプレートのCSSやJSファイル

こちらはディレクトリの場所が異なります。
data/Smarty/template以下ではなく、html/user_data/packages/の下にあるテンプレートディレクトリの中に、
CSSやJavascriptファイルが存在しおり、こちらを編集することになります。

もちろん、先ほどの「Smarty」の中に直接CSSやJavascriptを記述することも可能ですが、
管理のしやすさや運用のしやすさを考えると、こちらのCSSやJavascriptファイルで対応するようにした方が良いでしょう。

テンプレートファイルの書き方

EC-CUBEのテンプレートファイルは「Smarty」と呼ばれるPHP用に開発された、HTMLを拡張したような独自の構文で記述されています。

SmartyとEC-CUBE(PHP)の関係ですが、基本的にはEC-CUBEのシステム側(PHP)で用意されたデータをSmartyの方で参照してHTMLの中に組み込んで表示する、といった形になります。

Smartyの書き方についてはこちらがわかりやすく記述されていますのでご覧ください。

管理人おすすめ「安心・安全」レンタルサーバーはコチラ!

価格・サーバースペックだけでなく、安定性やセキュリティ、サポート面から判断しました。個人運用だけでなく企業様におすすめのサーバーになります。

順位 イメージ サービス名/説明
1位 カゴヤジャパン
公式サイトへ
カゴヤ・ジャパン
中小企業・小規模ECなど安定が必要なWebサイト運営に最適。専用サーバーが高品質で低価格です。
2位 エックスサーバー
公式サイトへ
エックスサーバー
使用者からの信頼が厚い、高速・多機能・高安定性をウリにしているサービス。
3位 さくらインターネット
公式サイトへ
さくらインターネット
個人におすすめのライト(月額129円)から、ビジネスプランまで幅広いラインナップ。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP ▲