ZencartテンプレートとCSS作成のポイント
2008/11/11(火)
Drupalサイト2件、Zencartサイト2件をほぼ同時進行で制作中です・・・
そんな中でZencartテンプレートとCSS制作の際のポイントをメモっておきます。
- オリジナルテンプレート名を仮にfoolとします。まずtemplatesディレクトリにfoolディレクトリを作成します。Defaultテンプレートからincludes/templates/template_default/template_info.phpをコピーして、$template_name = 'fool template'とし、これをfoolディレクトリ直下にアップします。
- 次に空のcssを作って、includes/templates/fool/css/stylesheet_fool.cssとしてアップします。stylesheet_xxx.cssのxxxは何でも構いません。これでincludes/templates/template_default/css/stylesheet.cssをオーバライドしてくれ、スタイル設定が何もない状態になります。
- includes/templates/template_default/common/tpl_main_page.phpをコピーして、includes/templates/fool/common/tpl_main_page.phpにオーバライドします。この時Zencartの基本設計にはいささか古くなっている部分もあり、コンテンツ部分と両サイドバーはテーブルレイアウトになっているのを<div>でボックス要素に変更しておくと、SEOだけでなく後先のデザイン変更もかなり楽になるはずです。
- <table><tr><td>をはずす際に、ついでにバナー表示とか、IPアドレス表示とか不要と思われる部分もバッサリ削除しちゃいましょう！<div id="mainWrapper">以外では、コンテンツ部分、左サイド、右サイドの3つにブロック分け、その内側にスペース用のブロックを作るマークアップだけで十分のはずです。SEO的にもコンテンツ部分を上に置いておくといいでしょうね。
- これでcssを作り上げていけばいいのですが、defaultテンプレートのスタイルを残さないとレイアウトがボロボロになってしまう部分があります。ここがこの記事のミソです：.forward{float:right;}
.back{float:left;}
.floatingBox{width:47%;}
.clearBoth{clear:both;}forwardとbackは、ボタンや一部のボックス要素のスタイルなのですが、これを外すと、「小計：1000円」としたいところが、「1000円 小計：」とかになってしまいます。また.floatingBoxというクラス設定はコンテンツ欄を立て2列にするもので、これも外してしまうと、縦長の間抜けなレイアウトになってしまいます。オリジナルのcssにもこの4つ設定はそのまま使いましょう。
- あとはそれぞれのページを見つつ、addressやfieldset、label、input、select等に縦のマージンが必要になってくるはずです。
Zencartは意外と少ないスタイル設定で、オリジナルテンプレートが作れると思います。