EC-CUBEについてⅡ

レイアウト構成 [contents]

contentsの全体を管理しているのは　/data/Smarty/templates/site_main.tpl　です。
管理画面からの編集は不可です。
管理画面からできるのは各ブロックの編集とページの編集です。
ブロックの編集は左右ブロックの各パーツを編集します。
各パーツを配置するのはウイジェントを使って移動します。

管理画面-デザインの管理-レイアウトの設定
ここを見ていただければEC-CUBEの構成は分かると思います。
何処に配置するかはマウスでドラッグして決めます。
各ブロックの編集は
管理-デザインの管理-ブロック編集から行います。

※ はじめてＥＣ-ＣＵＢＥを使う方は画像を差し替えるだけでも随分変わります
画像が格納されているのはimg/各フォルダです。
まずはそこから始めると良いですよ

各ブロックのコンテンツは独立していますのでheaderと同じような感覚で編集ができますが最大幅は166pxと決まっています。
左右サイドは縦ライン1px余白5pxはsite_main.tplで記述され残り全部がセンターブロックになります。

<table width="166" border="0" cellpadding="0" cellspacing="0"><tr>
<td colspan="3"><img src="<!---->img/side/各タイトル画像" width="166" height="35" alt="カテゴリー"></td></tr>
余白10px込み縦ライン
<tr><td bgcolor="#cccccc"><img src="<!---->img/common/_.gif" width="1" height="10" alt=""></td>
<td>
<!--▼カテゴリの中味-->
<table width="146"ほか>から
ここに各ブロックの中味が入ります。（php制御文）
デフォルトではテーブルタグで最大幅144pxで左右余白あり（利用ガイドは除く） </table>まで
<!--▲カテゴリの中味-->
</td>
<td bgcolor="#cccccc"><img src="<!---->img/common/_.gif" width="1" height="10" alt=""></td></tr> <tr><td colspan="3"><img src="<!---->img/side/各フレームフッター画像" width="166" height="15" alt=""></td></tr>
余白縦10px；
<tr><td colspan="3" height="10"></td> </tr></table>

divを使っての記述
<div style="width:166px;">
  <div><img src="<!---->img/side/各タイトル画像" width="166" height="35" alt="カテゴリー"></div>
   <div style="width:100%; border-left:1px solid #cccccc; border-right:1px solid #cccccc;">
    <div style="margin:10 0 10 0;">
<!--▼カテゴリの中味-->
<table width="146"ほか>から
ここに各ブロックの中味が入ります。（php制御文）
デフォルトではテーブルタグで最大幅144pxで左右余白あり（利用ガイドは除く） </table>まで
<!--▲カテゴリの中味-->
    </div>
   </div>
  <div><img src="<!---->img/side/各フレームフッター画像" width="166" height="15" alt=""></div>
 <div><img src="<!---->img/common/_.gif" width="1" height="10" alt=""></div>
</div>
中味はテーブルタグですが中味についても自信のある方はやって見てください。
デフォルトを表現するためかなり入れ子構造になっていますが別に自分のオリジナルで作成しても166pxサイズを守れば自由にレイアウトできます。

センターブロックの編集
3カラムのセンターブロックですが左右ブロックと同じところに入っています。
ここは新着情報とおすすめ商品が入り400ｐｘになっています。
ほかにメイン画像が入っています。
ここも独立しているので自由に扱えます。
この領域は画像を変えるくらいで問題無いでしょう。
画像の位置は
メイン画像：img/main/image.gif です。
新着情報画像：img/top/news.jpg
おすすめ商品画像：img/top/osusume.jpg

※ 管理画面での編集はやりづらいです。
各ブロックはすべてテーブルで作成されていますので自分で分かりやすいように記述しておけば良いと思います。
最近ではあまりテーブルタグを使った記述は少なくなってきています。
ＨＴＭＬ＋ＣＳＳでサイズを守れば問題無く表示されます。
スタイルも外部ＣＳＳにしておけばサイトのデザイン変更なども容易にできます。
ＣＳＳの置き場はフォルダcssにmy_style.cssとして設置
/data/Smarty/templates/site_frame.tplのheadで指定します。
<link rel="stylesheet" href="<!---->css/my_style.css" type="text/css" media="all" />

※ 間違い記述ミスなどお知らせ頂ければ幸いです。