続き。
http://eccube.localhost/
でユーザ入口、
http://eccube.localhost/admin/
で管理画面入口になります。
EC-CUBEのインストール時に設定したIDで管理画面に入ることが出来ます。
とりあえずショップ情報など通り一遍の基本情報設定を済ませます。
したらば早速サイトデザインの編集を行います。
ヘッダフッタ、ブロックの編集などは管理画面上から行うことができます。
が、直接テンプレートいじった方が早いのでそうしましょう。
デフォルトのテンプレートは
/data/Smarty/templates/default/フォルダ以下にありますが、
編集や追加を行ったテンプレートは
/html/user_data/packages/default/フォルダに保存されます。
なんでそんな外から見える位置なんだよ。
実際公式に載ってる事例サイトでも直接覗けるところがちょくちょくあったりします。
パスに/default/という文字が入っていますが、EC-CUBEはデザインテンプレートを丸ごと入れ替えることができる機能が付いており、実行した場合は/default/の部分が取り替えた先のテンプレート名に変更になります。
テンプレートの優先順位はuser_data>Smartyで、user_dataディレクトリにカスタムされたテンプレートが無ければSmartyディレクトリのデフォルトテンプレートを読むようになっています。
本来はデフォルトファイルは触らずカスタムファイルを追加するのが正道ですが、デフォルトテンプレート自体を変更したいので直接書き換えてしまいます。
/data/Smarty/templates/default/header.tplが共通ヘッダ、/data/Smarty/templates/default/footer.tplが共通フッタです。
CSSは/html/user_data/packages/default/css/main.cssです。
直接編集するとユーザ画面で即座に反映されるのがわかります。
テンプレートの記法は、デリミタが<!--{、}-->に変更されていますが普通のSmartyなので慣れていれば簡単です。
画像や外部JSなどを貼りたい場合は/html/user_data/packages/default/フォルダ以下に置き、相対リンクは{$TPL_DIR}で指定します。
サイト全体の大まかな構成を変更したい場合は、デザイン管理→レイアウト管理から行うと簡単です。
左右のウィジェットなどをパーツ単位で移動、削除などを行えます。
サイト構成はおおざっぱにトップページ、商品一覧(及び会員登録や問い合わせページ等)、商品詳細、マイページに分かれています。
サイトトップのレイアウトを適当にドラッグして場所や順番を変更してみると、トップページにすぐ反映されます。
非常に簡単ですね。
商品一覧や商品詳細は元々右カラムに何もない状態になっているのですが、そこにヴィジェットを突っ込むと、中央カラムがヴィジェットに突っ込んでおかしなレイアウトになってしまいます。
CSSを見てみたところ、中央カラムを定義しているdiv#three_maincolumnが幅432pxなのに、その中のコンテンツ記述部分であるdiv#undercolumnが580pxで定義されていました。
何故。
つうかundercolumnとかいかにもフッタっぽい名前なんだけど何故こんな名前なんだろう。
というわけでdiv#undercolumn{width: 580px;}とすれば解決だ、と思えば全然そんなことはありませんでした。
商品ページ内のフォームとかタイトルとかデザインとかが悉く580pxと指定されている。
なんでピクセル指定するかなあ…
ということでもっとも簡単な解決方法はdiv#three_maincolumn{width: 580px;}、div#container {width: 912px;}だと思われます。
横幅が変わるのでヘッダフッタのCSS編集が必要になりますが、それ以外の全コンテンツのCSS編集を行うことに比べればましでしょう、きっと。
EC-CUBEの記事
