EC-CUBE 2.13.x系
デザイン設定ガイド
1 テンプレートの設定

2デザイン/レイアウトの設定

EC-CUBE 2.13バージョンベースしてマニュアルしております。
超大型アップデートEC-CUBE最新版3.0には、変化したので、ご了承くださいませ。

登録/適用したテンプレートをカスタマイズしたり、画面の表示項目やレイアウトを変更したい場合は、以下の操作を行います。

CSSを直接編集する

デザインやレイアウトを制御するスタイルシート(CSS)は、管理画面から直接編集可能です。

1設定画面にアクセス

EC-CUBEの管理画面にログインし、「デザイン管理」→「PC」→「CSS設定」メニューをクリックします。

設定画面にアクセス

2対象のCSSファイルの選択

画面下部の「編集可能CSSファイル」の一覧から、編集したいCSSファイルの「編集」をクリックします。

対象のCSSファイルの選択

3CSSの編集

CSSの編集を実施し、「この内容で登録する」ボタンをクリックします。

CSSの編集

4設定内容の確認

確認メッセージが表示されますので、問題なければ「OK」ボタンをクリックします。

設定内容の確認

5設定完了

正しく設定されると、完了メッセージが表示されます。
「OK」ボタンをクリックして作業を終了します。

設定完了

6表示の確認

ショップにアクセスし、ブラウザをリロード(再読み込み)します。
CSSの設定が正常に行われると、変更が適用されます。

設定変更の際に403エラーが表示されたら

ショップで使用するドメイン名のWAFを一時的に「OFF」に設定してください。

Zenlogicサポートサイト - WAF(WEBアプリケーションファイアウオール)

HTML/文言を直接編集する

ショップを構成するテンプレートに含まれるHTMLや文言などは、管理画面から直接編集可能です。
さまざまなページ構成要素に合わせ、以下の3つの編集メニューが用意されています。

※ それぞれの操作手順はほぼ同じになりますので、ここではまとめてご案内します。

ページ詳細設定 トップページや商品ページ、会員ページなど、主要なページのメイン部分の内容を編集します。
ブロック設定 本ページの「3. レイアウト/表示項目を変更する」で使用するブロック(ページを構成するパーツ)単位で内容を編集します。
ヘッダー/フッター設定 全ページ共通のヘッダー/フッター部分の内容を編集します。
1設定画面にアクセス

EC-CUBEの管理画面にログインし、「デザイン管理」→「PC」から、編集を実施したいメニューをクリックします。

設定画面にアクセス

2対象のファイルの選択

画面下部の一覧から、編集したいページ/ブロックの「編集」をクリックします。

※ 「ヘッダー/フッター設定」ではこの操作はありません。

対象のファイルの選択

3HTML/文言の編集

画面上部に対象のファイルが読み込まれますので、必要な編集を実施し、「登録する」ボタンをクリックします。

HTML/文言の編集

4設定内容の確認

確認メッセージが表示されますので、問題なければ「OK」ボタンをクリックします。

設定内容の確認

5設定完了

正しく設定されると、完了メッセージが表示されます。
「OK」ボタンをクリックして作業を終了します。

設定完了

6表示の確認

ショップにアクセスし、ブラウザをリロード(再読み込み)します。
設定が正常に行われると、編集内容が反映されます。

設定変更の際に403エラーが表示されたら

ショップで使用するドメイン名のWAFを一時的に「OFF」に設定してください。

Zenlogicサポートサイト - WAF(WEBアプリケーションファイアウオール)

レイアウト/表示項目を変更する

ページを構成するレイアウトや表示要素は、ブロック(ページを構成するパーツ)の配置で自由に変更可能です。
また、これを利用して、ページのレイアウトを3列/2列/1列に切り替えることも可能です。

1設定画面にアクセス

EC-CUBEの管理画面にログインし、「デザイン管理」→「PC」→「レイアウト設定」メニューをクリックします。

設定画面にアクセス

2対象のページの選択

画面下部の一覧から、レイアウトを変更したいページの「編集」をクリックします。

対象のページの選択

3レイアウトの変更

画面上部に対象のページが読み込まれますので、レイアウトの変更を実施し、「登録する」ボタンをクリックします。

レイアウトの変更

  • ページ内で配置したい場所にブロックをドラッグします。
  • ブロックの「全ページ」にチェックを入れると、全ページ共通で同じ場所に表示されます。
  • ブロックの内容自体を変更したい場合は、本ページの「HTML/文言を直接編集する」をご参照ください。
  • 保存はページごとに必ず実施してください。
4設定内容の確認

確認メッセージが表示されますので、問題なければ「OK」ボタンをクリックします。

設定内容の確認

5設定完了

正しく設定されると、完了メッセージが表示されます。
「OK」ボタンをクリックして作業を終了します。

設定完了

6表示の確認

ショップにアクセスし、ブラウザをリロード(再読み込み)します。
設定が正常に行われると、編集内容が反映されます。

設定変更の際に403エラーが表示されたら

ショップで使用するドメイン名のWAFを一時的に「OFF」に設定してください。

Zenlogicサポートサイト - WAF(WEBアプリケーションファイアウオール)