KNTS-WEB - EC-CUBEについてⅠ

EC-CUBEについてⅠ

1.EC-CUBEのレイアウトと構成 [Header]

初めてEC-CUBEをインストール、デモサイトが表示されます。
ショッピングサイトをこれから始めるにはまずこのデモサイトをある程度レイアウトしなければなりません。
いちばん簡単なのはダウンロードしたファイルを解凍して出来たファイル郡の画像をオリジナルのものに差し変えてUPする事です。
画像はimgフォルダ以下の各フォルダに格納されています。
とりあえずheader部の画像を変えるだけでも使えます。
エクスプローラから縮小版にして見ていただければ修正しなければならない画像は分かると思います。
その画像を画像作成ソフトを使いオリジナルなものに作り変えUPします。
しかしこの使い方ですとあまりにも変化が無くオリジナルなページとは言えません。
オリジナルなページを作成するには、EC-CUBEのレイアウト構成はどうなっているかを知る必要があります。
管理画面-デザイン：
構成はheader部・contents部・footer部３つのセクションに分かれています。
すべてタグテーブルで構成されていまが、実際はbody以下がユーザーが編集できるようになっています。
HTMLタグで言うと

この部分は本来のheader部で管理画面からの編集は出来ません
この領域を編集するには/data/Smarty/templates/site_frame.tplです。
Background・Css・META等の編集

ヘッダーのカスタマイズ

EC-CUBEのheader部とはテーブルタグの1番目のロゴが入る位置です。
管理画面-デザイン-ヘッダー/フッターの編集からヘッダーを編集します。
このテーブルは独立していますから<table>～</table>で閉めます。
テーブル幅は780pxでcell数は3つで両サイド1pxの余白（グレーの腺が入るように作成されています。

<table width="780" height="150" border=0" cellpadding="0" cellspacing="0" style="background:url('背景画像ファイル名') no-repeat;"><tr>/*heightは背景画像サイズで決めます。*/
<td bgcolor="#cccccc"><img src="img/common/_.gif" width="1" height="1" alt=""></td>
<td width="100%">

ここがhedderロゴ部カスタマイズ領域

</td>
<td bgcolor="#cccccc"><img src="img/common/_.gif" width="1" height="1" alt=""></td>
</tr></table>

<img src="はｈｔｔｐ://貴方のページ/という意味です
実際はもっと複雑に記述されています。
またテーブルタグを使わないで<div>を使っても構いませんdivを使う場合は直接styleを挿入するかcssの編集に書き込んでも構いませんがpassに注意が必要ですので面倒な方はstyleを直接記入してください。

<div style="width:780px;height:150px;background:url('背景画像ファイル名') no-repeat;">/*heightは背景画像サイズで決めます。*/
<div style="width:100%;border-let:1px solid #cccccc; border-right:1px solid #cccccc;">

ここがhedderロゴ部カスタマイズ領域

</div>
</div>

背景画像ファイル名のpassは
img/header/背景画像ファイル名です。
内にはロゴ・画像検索フォーム・Naviバーとかご自分でレイアウトしてください。

※　カスタマイズをするにはHTML・CSSを理解している必要があります。
※　間違い記述ミスなどあればお知らせ頂ければ幸いです。
＜-- more：コンテンツ部 --＞

最終更新日： 2007年12月 8日(土) 16:38 JST; 237 閲覧件数

記事カテゴリ

新着情報

記事

コメント (2日)

トラックバック (2日)

リンク (2週)

新着ファイル (14 日以内)

Connect to Link

ログイン

EC-CUBEについてⅠ

1.EC-CUBEのレイアウトと構成 [Header]

ヘッダーのカスタマイズ