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

3画像/案内文の変更

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

ショップのトップページやヘッダー部分に表示する画像/案内文を変更します。

ロゴ画像を変更する

テンプレートには、初期状態でヘッダー部分にサンプルのロゴが表示されるように、画像を同梱しています。
これをお客様オリジナルのロゴ画像に変更することが可能です。

1ロゴ画像の準備

以下の要領で、オリジナルのロゴ画像を作成します。

サイズ 幅 390ピクセル以下 × 高さ 60ピクセル以下
種別 gifファイル
ファイル名 logo.gif
2ロゴ画像のアップロード

作成したロゴ画像を、FTPでサーバーにアップロードします。
以下のパスのファイルを、作成した画像ファイルで上書きします。

(インストールディレクトリ)/data/Smarty/templates/(テンプレート名)/
_packages/img/common/logo.gif

(インストールディレクトリ)/html/user_data/packages/(テンプレート名)/
img/common/logo.gif

インストールディレクトリ

EC-CUBEのインストール時に、EC-CUBEのプログラムファイルを設置したディレクトリです。
例えば以下のようなパスになります。

/htdocs/default/eccube-2.13.4
テンプレート名 「STEP1 テンプレートの設定」でテンプレートを追加する際に設定した「テンプレートコード」になります。
EC-CUBE標準のテンプレートをご利用の場合は、「default」になります。
3表示の確認

ショップにアクセスし、ブラウザをリロード(再読み込み)します。
アップロードが正常に行われると、ロゴ画像がオリジナルのものに置き換わります。

案内文を変更する

ヘッダー部分のロゴ画像の上部に表示しているテキストを変更します。

1設定画面にアクセス

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

設定画面にアクセス

2案内文の編集

画面上部の「ヘッダー編集」内の以下の部分のテキストを編集し、「登録する」ボタンをクリックします。

案内文の編集

3設定内容の確認

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

設定内容の確認

4設定完了

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

設定完了

5表示の確認

ショップにアクセスし、ブラウザをリロード(再読み込み)します。
案内文の設定が正常に行われると、ショップ名がテキストで表示されます。

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

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

メイン画像を変更する

テンプレートには、初期状態でトップページにサンプルのメインイメージが表示されるように、画像を同梱しています。
これをお客様オリジナルのメイン画像に変更することが可能です。

1メイン画像の準備

以下の要領で、オリジナルのメイン画像を作成します。

サイズ

ショップの表示カラム(列)数により、大きさが変わります。

3カラムの場合 … 横幅 570px 以下
2カラムの場合 … 横幅 740px 以下

※ 高さの指定は特にありません。
種別 JPEGファイル
ファイル名

以下の2種類を作成します。

bnr_top_main.jpg … 通常時の画像
bnr_top_main_on.jpg … マウスオーバー時の画像
2メイン画像のアップロード

作成したメイン画像を、FTPでサーバーにアップロードします。
以下のパスのファイルを、作成した画像ファイルで上書きします。

(インストールディレクトリ)/data/Smarty/templates/(テンプレート名)/
_packages/img/banner/bnr_top_main.jpg

(インストールディレクトリ)/data/Smarty/templates/(テンプレート名)/
_packages/img/banner/bnr_top_main_on.jpg

(インストールディレクトリ)/html/user_data/packages/(テンプレート名)/
img/banner/bnr_top_main.jpg

(インストールディレクトリ)/html/user_data/packages/(テンプレート名)/
img/banner/bnr_top_main_on.jpg

インストールディレクトリ

EC-CUBEのインストール時に、EC-CUBEのプログラムファイルを設置したディレクトリです。
例えば以下のようなパスになります。

/htdocs/default/eccube-2.13.4
テンプレート名 「STEP1 テンプレートの設定」でテンプレートを追加する際に設定した「テンプレートコード」になります。
EC-CUBE標準のテンプレートをご利用の場合は、「default」になります。
3表示の確認

ショップにアクセスし、ブラウザをリロード(再読み込み)します。
アップロードが正常に行われると、メイン画像がオリジナルのものに置き換わります。

以上でショップデザインの変更作業は完了です。