日本発!ECオープンソースEC-CUBE無料・開店
EC-CUBE

準備

インストール

初期設定

管理・機能

ポイント機能をOFFにする
まず仮会員登録をしたい
会員登録通知を管理者にもしたい
★重量別送料


メール内容のカスタマイズ
異なる手数料の設定
JNBのJ-振 リンクの張り込み

Topページのカスタマイズ
商品一覧ページのカスタマイズ
商品詳細ページのカスタマイズ
「当サイトについて」のカスタマイズ
会員登録フォームのカスタマイズ
非会員・買物フォームのカスタマイズ
  配送日指定を削除する
買い物カート(中を見る)のページ



Topページのカスタマイズ
 フッター
会員登録フォームのカスタマイズ
受注確認ページのカスタマイズ
 配送日指定を削除する

モバイルメールのカスタマイズ
注文確認メールに送料、手数料、ポイント数を記載する
ポイント機能をモバイルにも反映する


画像表示・検索窓ほか
便利な無料素材を使って綺麗に早く


・受注が入っているのにメールが届かない!

日本発!ECオープンソースEC-CUBE

EC−CUBE
開発コミュニティサイト

EC−CUBE
マニュアルサイト


貝パッチワークキット
最低限これだけやっていればとりあえず開店できる
公開カスタマイズ・逆引きマニュアル  EC-CUBE取り急ぎ導入計画

レイアウト設定 ブロック編集

2 新規ブロックの作成


デフォルト のブロックでは物足りないと思います。ですので、あらたにブロックを作る必要があります。

実際のサイトを例に見てみます。

左カラム
 商品カテゴリー
 検索
 利用ガイド
 カレンダー
・自前の宣伝

中央
 新着情報
 (RSSで配信できるニュース)
 おすすめ商品
 (任意でピックアップした商品)↑どちらも「コンテンツ管理」で内容の登録・変更をします。

右カラム
 ログイン
 現在のカゴの中
・自前の宣伝
・自前のバナー
・自前のQRコード

のものが自分で作り足したブロックです。

WEB管理画面(http://あなたのドメイン/cube/admin/)
デザイン管理>レイアウト設定 
を、ひらいてみます。

デフォルトで用意されているブロック以外は自分で作ります。

新規ブロックの作成

上記参考サイトで作り足したブロックはだいたい2種類に大別出来ます。

 宣伝タイプ 空白を埋めるため、小さな宣伝スペースを置くことにしました。
小さなテーブルを作ります。
 バナータイプ 同じ要領で「Topボタン」や「QRコードの貼り付け」ができます。
リンク先の情報を持った画像を貼り付けます。

WEB管理の デザイン管理>「ブロック編集」を開きます。

1 分かりやすいブロック名と、半角英数のファイル名を付け、テキストフィールドにhtmlでソースを記入します。(HP作成ソフトで内容を作って、こちらにコピペーするのが簡単です。)

プレビューボタンを押すと、ソースでどのようなものが出来ているか、表示することができます。
これでよいようでしたら「登録」ボタンを押して登録します。。

 

実 例

テーブル型ブロック 例


ブロック名 宣伝テーブル
ファイル名 ad

<table width="14%" height="347">
<tr>
<td width="62%"><div align="center"><a href="http://www.tokihouse.com/design/otona_conof/conof.html" target="_blank"><img src="http://www.tokihouse.com/cube/image/conof.jpg" alt="コノフ" width="100" height="133" border="0"></a></div></td>
</tr>

<tr>
<td><a href="http://www.tokihouse.com/design/otona_iron/irondai.html" target="_blank"><img src="http://www.tokihouse.com/cube/image/stand-irondai.jpg" alt="斉藤アイロン台" width="111" height="200" border="0"></a></td>
</tr>
</table>


<table>から</table>の黄色の範囲内がテーブルを表しています。
テーブルの中には、<tr>から</tr>までのものが、二つ入ってます。
上記を参考にするときは画像リンク先のURL画像サイズのバランスalt値 などの変更を忘れずに。

最後は「登録」ボタンを押して、下のリストに自分が今作成したブロックが追加されているか確認して下さい。

 

 

 バナー型ブロック 例


ブロック名 リンク Toki Houseバナー
ファイル名 tokihouse

<a href="http://www.tokihouse.com/">
<img src="http://www.tokihouse.com/tokihouse-ba.gif" width="160" height="50" border="0" style="float:left;></a>


直接 バナーを埋め込むhtmlです。ただこのようなバナー型のブロックを複数配置する場合に、ブラウザによっては回り込みが見られますので、忘れずに style="float:left; をいれてあげると良いです。

最後は「登録」ボタンを押して、下のリストに自分が今作成したブロックが追加されているか確認して下さい。

 

こうして好きなだけブロックを作り、出来上がったブロックは「レイアウト設定」で好きな場所に配置して下さい。

 

既存ブロックのカスタマイズ

ブロック名をクリックすると、フィールド内にHTMLソースが表示されます。

既存のブロックも、文字色や背景色、あるいはリンク先など、ここで自由に変更させることが可能です。

ソースを全てコピーして、HP作成ソフトで開くと変更も簡単にできます。

 

 

 

 

 

 

Home > デザインの変更 Topページ

 

クラスアップアイテム デザインインテリア