EC-CUBE デザイン管理 [ECサイト・ネットショップ]

EC-CUBEの「デザイン管理」

• レイアウト設定
• ページ詳細設定
• ブロック設定
• ヘッダー/フッター設定
• CSS設定
• テンプレート設定・追加

レイアウト設定

デザイン管理 レイアウト設定では、TOPページ、商品一覧ページ、商品詳細ページなど、ECサイト（ネットショップ）の各ページのレイアウトをブロックごとにドラッグ、ドロップで編集することができます。

EC-CUBEは、マウスのみの簡単操作でレイアウトをカスタマイズすることができます。

サイト内の各要素につき、ブロックごとでのレイアウト設定をすることができます。

ページ項目一覧はページ詳細設定に掲げてあります。

ブロックを新規追加

初期設定では9つのブロックがありますが、任意でブロックを新規追加して、配置することができます。

「ブロックを新規入力」をクリックで、ブロック編集画面が表示されます。

ブロック名

新規追加するブロックの名前を入力します。日本語での入力が可能です。

上限は50文字です。

ファイル名（.tpl）

新規ブロックのファイル名を入力します。tplファイルのため半角英数で入力します。

上限は50文字です。

内容（ブロックの内容）

ブロックの内容を入力します。プレーンテキストだけでなく、html等の入力が可能です。

デザイン管理＞レイアウト設定

ページ詳細設定

デザイン管理 ページ詳細設定では、ECサイト（ネットショップ）のトップページや商品一覧ページ、商品詳細ページをはじめ、店舗情報や会員ページなど、サイトの各ページのメイン部分（ヘッダー、フッター、ブロック部分以外の部分）のコンテンツをHTML編集することができます。

EC-CUBE ページ項目

PC版、スマートフォン版、モバイル版（ガラケー版）の各ページの詳細を編集することができます。

標準では以下の項目があります。

• TOPページ
• 商品一覧ページ
• 商品詳細ページ
• MYページ
• MYページ/会員登録内容変更(入力ページ)
• MYページ/会員登録内容変更(完了ページ)
• MYページ/お届け先追加･変更
• MYページ/お気に入り一覧
• MYページ/購入履歴詳細
• MYページ/ログイン
• MYページ/退会手続き(入力ページ)
• MYページ/退会手続き(完了ページ)
• 当サイトについて
• 現在のカゴの中
• お問い合わせ(入力ページ)
• お問い合わせ(完了ページ)
• 会員登録(入力ページ)
• ご利用規約
• 会員登録(完了ページ)
• 特定商取引に関する法律に基づく表記
• 本会員登録(完了ページ)
• 商品購入/ログイン
• 商品購入/お届け先の指定
• 商品購入/お届け先の複数指定
• 商品購入/お支払方法・お届け時間等の指定
• 商品購入/ご入力内容のご確認
• 商品購入/ご注文完了
• プライバシーポリシー

ページ詳細設定では、サイトのコンテンツ部分の編集を行うため、ヘッダー・フッターについては、ヘッダー/フッター設定、ブロックそのものについての編集は、ブロック設定、ブロックの配置・レイアウトの設定は、レイアウト設定でそれぞれ編集・設定します。

なお、ヘッダー・フッター・ブロックは、設定にもよりますが、サイトの共通部分になります。

デザイン管理＞ページ詳細設定

ブロック設定

デザイン管理 ブロック設定では、ECサイト（ネットショップ）の各ページに表示させるブロックを登録、編集することができます。ブロックは、ヘッダーログイン、サイドバーコンテンツなど、サイト内で共通して使用できるサイトパーツになります。

各ページでのブロックの配置はレイアウト設定で編集を行います。ブロックの配置については、「レイアウト設定」でマウスのみの操作で設定することができます。

ブロック設定 入力項目

ブロックの入力項目です。ファイル名はtplファイルのため半角英数で入力する必要があります。

• ブロック名 (上限50文字)
• ファイル名 .tpl (上限50文字)
• ブロック内容

ブロックの内容編集にはHTMLを使用することができます。

ブロック　項目

現在登録されているブロックが表示されます。

標準では以下の項目があります。

• カテゴリ
• 利用ガイド
• かごの中
• 商品検索
• 新着情報
• ログイン
• おすすめ商品
• カレンダー
• 【ヘッダー】ログイン

EC-CUBEにおける「ブロック」は、様々なページの共通部分の要素として使用します。サイト内の各ページのコンテンツ部分については、ページ詳細設定で編集します。

デザイン管理＞ブロック設定

ヘッダー フッター設定

デザイン管理 ヘッダー フッター設定では、ECサイト（ネットショップ）の全ページ共通で使用するヘッダー部、フッター部の編集をすることができます。
ECサイト各ページでのヘッダー、フッターの使用（表示）の有無は、ページ詳細設定で個別設定することができます。

ヘッダー部

サイト上部のロゴや会員ログイン、商品リストへのメニュー等、ECサイトのすべてのページに共通で表示させる部分です。

フッター部

サイト下部のクレジットなど、ECサイトのすべてのページに共通で表示させる部分です。

ヘッダー・フッター以外のサイトパーツ

ヘッダー部・フッター部以外のサイトパーツの設定は次の箇所で編集します。

ブロック（ヘッダー・フッター以外の共通部分）

EC-CUBEにおいて、サイトの各ページに共通で表示させる部分は、「ブロック」と呼ばれ、ブロック設定で編集することができます。

サイトのコンテンツ部分

ヘッダー・フッター・ブロックといった共通部分ではなく、各ページの固有の情報であるコンテンツ部分に関する編集は、ページ詳細設定で編集することができます。

デザイン管理＞ヘッダー フッター設定

CSS設定

デザイン管理のCSS設定で、EC-CUBEのサイト内のウェブデザインのCSS装飾を行います。EC-CUBEは標準で、bloc.css、bloc_alpha.css、common.css、contents.css、import.css、popup.css、print.css、reset.css、table.cssのCSSファイルがありますが、これらのCSSファイルの編集のほか、任意のCSSファイルを追加することができます。

スタイルシート（Style Sheets）、CSSは、装飾や配置などを行い、html文書の見た目に関する指定をする仕組みになっています。ウェブサイトの文字、背景などの色の指定や各要素の大きさ、レイアウトの細かい配置などを指定します。

CSSについては、「CSS(Cascading Style Sheets)プロパティのアルファベット順インデックス」をご参照ください。

ホームページのCSS・スタイルシート編集方法については、「ホームページのCSS・スタイルシート編集方法」をご参照ください。

CSS設定 入力項目

新規でCSSファイルを追加する場合は、CSSファイル名とCSSの内容を記述します。

CSSファイル名

.css (上限50文字)

任意のCSSファイル名を入力します。ファイル名になるため、半角英数で入力します。

CSS内容

CSSの内容を記述します。

CSS　一覧

標準では以下のCSSが実装されています。

• bloc.css
• bloc_alpha.css
• common.css
• contents.css
• import.css
• popup.css
• print.css
• reset.css
• table.css

CSSを追加した際は、追加されたCSSが一覧に表示されます。

CSSについてはこちら⇒css3 property reference index

デザイン管理＞CSS設定

デザインテンプレート設定・追加

EC-CUBEは、「テンプレート」としてECサイトのウェブデザインをひとまとめにすることができます。テンプレートとはサイトの雛形で、EC-CUBEテンプレートは、ECサイトにおけるウェブデザインの基本的なサイトの雛形になります。

デザイン管理 テンプレート設定では、EC-CUBEテンプレートの設定を行います。

デザインテンプレート設定

デザイン管理のテンプレート設定で、テンプレートを選択し、「この内容で登録する」ボタンを押すと、選択したテンプレートへデザインを変更することができます。

デフォルト data/Smarty/templates/default/

テンプレートは、ダウンロードすることもできます。

デザイン管理＞テンプレート設定

デザインテンプレート追加

デザイン管理 テンプレート追加では、ECサイト（ネットショップ）に適用するウェブデザインのデザインテンプレートを新たに追加します。

.tar、.tar.gz形式で圧縮されたファイルをアップロードすることができます。

テンプレートパッケージのアップロード

テンプレートパッケージのアップロードを行います。
アップロードしたパッケージは、「テンプレート設定」で選択できるようになります。

テンプレートコード

テンプレート名

テンプレートファイル
※ファイル形式は.tar/.tar.gzのみ

アップロード可能ファイルは圧縮形式のみになりますので、テンプレートを構成する各ファイルをまとめて圧縮する必要があります。

デザイン管理＞テンプレート追加

⇒EC-CUBE Reference Index

デザイン管理

PC　モバイル　スマートフォン

• レイアウト設定
• ページ詳細設定
• ブロック設定
• ヘッダー/フッター設定
• CSS設定
• テンプレート設定・追加

EC-CUBE（イーシーキューブ）は、ECサイト（電子商取引用ウェブサイト、ネットショップ）構築に特化した、ショッピングサイトCMS（コンテンツマネジメントシステム）です。（EC-CUBEをベースとしたECサイト制作・ネットショップ構築（ネット販売用ホームページ制作）は現在お取り扱いしていません）

⇒EC-CUBE Reference Index

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ