EC-CUBEのインストールが完了し管理画面にログインすると、こんな感じで
メインメニューが表示されてます。
一見しただけで、小売業に携わっている方なら
社内のデータベース管理と変わらない事が
分かると思います。
そのシステムが、まるまるウェブサイト上で
使えてしまうんですねぇ。
現在公開されている新バージョン2.12では、
様々なプラグイン（追加機能）が用意されていて
中には、配送伝票の印刷まで簡単に出来て
しまうようなものもあり、その殆どが無料で
ダウンロード出来ます。
とりま、私の興味はこのEC-CUBEの
デザイン管理メニュー部分なので
そこら辺と睨めっこしてます。
私が知ってるブログサイトなんかとは
全く違って、CSSの編集がバラバラに
小分けされてて、この情報は何処に
記載されてるのぉぉぉ～～～っ！
って感じで探すのが大変だし
その都度見つけて、編集したとしても
すぐに忘れちゃいそうなんで
ここに備忘録として書き出して置こう～～。
これがデフォルト（標準）で用意されている
EC-CUBEのテンプレートです。大まかにヘッダー/フッター部、
3カラム（メイン部分が3分割されていて
サイドバーが両側に二つある）
トップページのメインカラムに、バナー用の
画像を配置するようになってます。
※素人なんで、単語など表現の仕方が
間違ってるかも知れませんので
フィーリングでお察し下さいｗ
デフォルトで用意されているデザイン
（背景色や、ボタンなど）をそのまま利用
するのであれば、デザイン管理のレイアウト設定にあるブロック（パーツ）を、ドラッグして
移動させるだけでも出来ますが
根本から変えてしまおうと言うのであれば
やはり、CSSやページのソースをいじるより
他はありません。
どっから始めようか、、、やっぱ上から攻めましょう。
って事で、ヘッダー部の内容からいきます。
デフォルトでは、ヘッダー内部は左図のように分割されています。
1：ヘッダー部
サイト内の、どのページに移動しても表示されて
いるショッピングサイトの上部。
2：ロゴエリア
お店のロゴを表示させておく部分で画像が
埋め込まれ、ページを移動した際にクリックすると
トップページに戻るようにリンクが貼られています。
画像ではなく、ここに文字だけで表示する事も可能。
3：インヘッダーブロック
ショッピングサイトに登録された顧客が、ログインする
為のエリア。
4：会員が個々の情報を確認する為のエリア。
ボタンが配置されて、関係するページに移動。
今回は「2：ロゴエリア」のロゴ画像を変えてみます。
ロゴエリアの情報は、デザイン管理＞PC＞CSS設定の「common.css」に下記のように
記載されています。必要な部分のみを取り出して表示しました。
*******************************************************************************
/* ==============================================
ヘッダー
=============================================== */
/* レイアウト
----------------------------------------------- */
#header_wrap { ヘッダー周りの情報
border-top: solid 3px #f90; //上部罫線 1本線でサイズは、3ピクセル色はオレンジに設定
min-height: 82px; //高さの最小が82ピクセル
background: url("../img/common/bg_header.gif") repeat-x bottom #fffaf0;
} //背景に「bg_header.gif」と言う画像を指定して、下揃えで横に繰り返し表示。
背景色は薄いオレンジ色
#header { ヘッダー全体の情報
margin: auto; //ヘッダー全体の余白は、表示された状態によって中央に来るよう自動で変更。
width: 980px; //ヘッダーの横幅を980ピクセルに設定
}
#logo_area { ロゴエリアの情報
padding-left: 10px; //内側の余白を、左寄せで10ピクセルに設定
float: left; //ロゴエリアそのものが、左寄せ
width: 390px; //幅は390ピクセル
text-align: left; //テキストは左寄せ
}
#header_utility { 「3：インヘッダーブロック」「4：ヘッダーナビ」を表示するエリアの情報
float: right; //このエリア全体をページの右寄せ
width: 580px; //このエリア全体の幅を580ピクセルに設定
}
#errorHeader { エラーヘッダー？？情報 どの状況下で表示されるのか不明です＾＾；
color: #F00; // 色を赤に設定
font-weight: bold; //表示されるテキストを太字にする。
font-size: 12px; //テキストのサイズを12ピクセルに設定
background-color: #FEB; //背景色を黄色にする。
text-align: center; //テキストを中央揃えにする。
padding: 5px; //内余白を5ピクセルにする。
}
/* ロゴ（テキスト表示の場合）
----------------------------------------------- */
#site_description { サイトの説明文（ロゴの上に小さく表示されているテキスト）
font-size: 90%; //標準サイズの90％の文字サイズ
}
#logo_area h1 { ロゴをテキスト表示する場合の幅と高さを指定している
width: 378px; //幅を378ピクセルに指定
height: 33px; //高さを33ピクセルに指定
}
#logo_area h1 span {
display: none; /* テキストロゴ非表示 */ テキストのロゴを使わない設定
}
******************************************************************************
黄色のマーカーと、赤字部分がCSSの説明分です。
ロゴ画像を変更するだけで、何故「ロゴエリア」以外の説明が必要かはCSSをカスタマイズ
される方ならご存知かと思いますが、ロゴエリアに指定されている幅390ピクセル以上の
サイズを持つ画像データを貼り付けると、エリア外に飛び出して表示されてしまうからです。
大きくデザインを変更したい、ロゴを大きくしたいと言う場合は
サイト全体の幅を広げたり、ヘッダーのユーティリティエリアを縮小したりなど
その周りの情報も、変更する必要性が出てきます。
ロゴ画像を作成したら、「コンテンツ管理」から
左図のように、「ファイル管理」を呼び出し
user_data>packages>default>img>common
へ、ロゴ画像をアップロードします。
ロゴ画像のアップロードが済んだら、デザイン管理＞PC＞ヘッダー/フッター設定のヘッダーを編集し、赤字部分をアップロードした画像名に変更します。
******************************************************************************
<!--▼HEADER-->
<div id="header_wrap">
<div id="header" class="clearfix">
<div id="logo_area">
<p id="site_descriptionEC-CUBE発!世界中を旅して見つけた立方体グルメを立方隊長が直送！"></p> //ロゴの上に表示されているサイト説明テキスト
<h1>
<a href="<!--{$smarty.const.TOP_URLPATH}-->"><img src="<!--{$TPL_URLPATH}-->img/common/logo.gif" alt="EC-CUBE ONLINE SHOPPING SITE" /><span><!--{$arrSiteInfo.shop_name|h}-->/<!--{$tpl_title|h}--></span></a>
</h1>
</div>
******************************************************************************
説明テキストが不要な場合は、
<p id="site_description">EC-CUBE発!世界中を旅して見つけた立方体グルメを立方隊長が直送！</p>の部分を削除で表示されなくなります。
同様にヘッダーの編集にて、下図の箇所選択し、削除するとなります。
ふぅ・・・・・・
ロゴを変更するだけでも、これだけの作業が必要なのです。
ロゴデザイン料やら作業費用を考慮するなら、やはりテンプレートが何万円もするのも納得です。。
写真で着ているタンクトップは、セカンドライフで1リンデンドルで買えるMeshアイテムです。
他の色は50リンデンドルでした。flo:lace_vest
尚、画像はそれぞれサムネイル表示になっているので、クリックして拡大でご覧下さい。
0 件のコメント:
コメントを投稿