EC-CUBE（その２）トップページを編集する

最初に表示されるEC-CUBEそのままの画面ではさすがに淋しいですよね。
というわけでフレームの背景色を変えて、トップの画像をカスタマイズしてみます。

フレームの背景色を変更する

フレームの背景色は以下のCSSで設定されています。

\html\user_data\packages\default\css\main.css

このCSSの14行目にフレームの全体の背景色が定義されています。このbackground-colorのRGBをいじってブラウザを更新してみてください。

body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #555555;
    background-color: #ffe9e6;  ←ここ
    font-size: 72.5%;
    line-height: 150%;
    letter-spacing:1px;
}

背景色が変ったでしょうか？僕は白にしてみました。

商品カテゴリーの背景色を変更する

先ほどの変更で、商品カテゴリーだけがピンク色のままで浮いてしまいました。白にしなけりゃよかったー…
なので商品カテゴリーの背景色も変更します。先ほどのCSSの245行目に商品カテゴリーの背景色が定義されています。

div#categoryarea {
    width: 144px;
    padding: 10px;
    border: solid 1px #ccc;
    background-color: #fff1e3;
}

どんどん白くなっていきますねー。

ヘッターの画像を変更する

ヘッターの画像は以下のページに置いてあります。トップ画面同様これを同名で別の画像に差し替えても変更されます。

\html\user_data\packages\default\img\header\bg.gif
\html\user_data\packages\default\img\header\logo.gif

元の画像を残したままや、.jpgにしたい場合は呼び出し元となるCSSを変更する必要があります。
そのヘッダーの画像設定も先ほどのCSSにあります。122行目を見てみてください。

div#header {
    background: url("../img/header/bg.gif");  ←ここ
    width: 780px;
    height: 95px;
    margin: 0 auto;
}
div#header h1 a {
    float: left;
    display: block;
    margin: 8px 0 0 0;
    width: 292px;
    height: 81px;
    background: url("../img/header/logo.gif");  ←ここ
}

上記のファイル名を変更したい別の画像のファイル名にし、\html\user_data\packages\default\img\header\にそのファイルを置けば、変更されているはずです。

トップ画像を変更する

トップの画像を変更する場合は管理画面から変更できます。
管理画面のデザイン管理を選択→サイドバーのページ詳細設定を選択→下の方に編集可能ページがあるのでTOPページのメイン編集をクリック
すると以下のコードが表示されるので、23行目の部分を変更してください。

<!--{*
 * This file is part of EC-CUBE
 *
 * Copyright(c) 2000-2007 LOCKON CO.,LTD. All Rights Reserved.
 *
 * http://www.lockon.co.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
 *}-->
<div id="flasharea">
  <img src="<!--{$TPL_DIR}-->img/main/image.gif" alt="EC-CUBEイメージ" />  ←ここ
</div>

で、登録ボタンを押してトップページを見てみてください。表示されましたか？されない人もいたかもしれません。

~~僕のバージョンでは表示されなかったです。なぜか上記のコードが登録後にダブルクオートがエスケープされてしまってました。~~
（php.iniのmagic_quotes_gpcがOnになっていただけでした。ごめんよEC-CUBE）
なので、直接上記ファイルを編集します。対象ファイルは以下のファイルです。

\html\user_data\packages\default\top.tpl

これを直接編集したらオッケーです。

ちなみにトップ画像は以下のページに置いてあります。これを同名で別の画像に差し替えても変更されます。

\html\user_data\packages\default\img\main\image.gif

これで素のままのEC-CUBEからは多少脱出できました＼(^o^)／