デザインレイアウトの作成

テーマをカスタマイズするウェブデザイナー向けに、Live Commerceのデザインレイアウトとテーマの統合方法について解説します。

Live Commerceのカタログ画面数は、41画面あります。
41画面を6つのレイアウトパターンで対応しています。
 

6つのレイアウトパターン

以下はLive Commerceの標準テンプレートで配置された6つのレイアウトです。
(画面イメージをクリックすると、大きい画像で確認できます)

  • 青色部分 >> ヘッダー、フッター
  • 赤色部分 >> コンテンツ部分
  • 黄色部分 >> サイドバー
Layout_top_page Layout_category_top_page Layout_product_listing Layout_product
1.トップページ
A
-3カラム
トップページは単一ページになるため、自由設計のレイアウトでも問題ありません。
2.カテゴリページ
B
-3カラム
3.商品一覧ページ
C
-2カラム
サイドバーは左側に設置
4.商品詳細ページ
D
-2カラム
サイドバーは右側に設置
Layout_new_page Layout_1colum
5.コンテンツページ
E
-2カラム
ページ管理で作成されたページのテンプレートとして利用されます。
6.その他のページ
F
-1カラム
このページが全ページの基本テンプレートとして利用されます。

その他に、テーマディレクトのlang ディレクトリにある言語別の画像ボタンもデザインしておきましょう。
 

テンプレートファイルとレイアウトパターンの相関関係

Live Commerceのカタログ画面で表示されるデザインパターンは下図の通りです。

 ファイル名  レイアウトタイプ
 404.php  F
 account-close-success.php  E
account-close.php  E
account-edit.php  E
 address-add.php  E
 address-edit.php  E
 address.php  E
 brand.php  F
 cart-detail.php  F
cart.php  F
 category.php  B
 checkout-confirmation.php  F
 checkout-guest-billing-address.php  F
 checkout-guest-shipping-address.php  F
 checkout-login.php  F
 checkout-shipping.php  F
 checkout-success.php  F
 contact.php  E
 create-account-success.php  D
 create-account.php  D
 default.php  A
 listing_default.php / listing_window.php  C
 login.php  F
 logoff.php  F
 myaccount.php  E
 new_page.php  E
 order-detail.php  E
 order.php  E
 password.php  F
 point.php  E
 product.php  D
 recommend_default.php / recommend_window.php  C
 review-listing.php  C
 review-write.php  D
review.php  B
 search-form.php  F
 search_default.php / search_window.php  C
 sitemap.php  F
 tag.php  F
 tell-friend.php  E
 wishlist.php  F

 

HTMLコーディングとテーマへの統合

コーディングする際は、以下の点を遵守してください。

  1. W3C Valid XHTML/CSS
  2. XHTML 1.0 Strict
  3. Table-less CSS markup
  4. Safari 3+, Opera9+, Google Chrome, FF3+, IE8
  5. SEO Semantic Coding
  6. Load Speed Optimization

HTMLへのコーディングが完了したら、6のHTMLファイルをLive Commerceのテーマファイルに統合していきます。
 

Live Commerceへの統合についての注意

コーディングする箇所は、ヘッダー(header.php)、フッター(footer)、サイドバー(sidebar)、CSSファイル(/css/) のみで、41テンプレートファイルのコンテンツ部分を再コーディングすることは推奨していません。

次のソースコードをご覧ください。

これはテーマにある404.phpというテンプレートファイル内に記述されたHTMLソースです。404.phpファイルを含むすべてのコンテンツ表示部分は共通して大外枠にはdivにid=”contents” がセットしてあります。コーダーはこのコーディングルールを確認し、先にHTMLコーディングしたソース内の共通コンテンツ部分には、404.php を参考に同一のクラス名またはセレクタ名をセットしておく必要があります。もしコーダーが独自にクラス名をセットした場合は逆にLive Commerce側のテーマすべてを修正する必要があります。

コンテンツ部分とは、41画面で表示される個別のHTMLソースのことで、テーマに含まれる41のテンプレートファイル(*.php)のことです。この41ファイルをコーディングすることなくCSSとヘッダー、フッター、サイドバーだけでオリジナルデザインになるようにすることが重要です。(そうすれば最小限の労力でオリジナルデザインへ適用することができます)

そのためには、ヘッダーとフッター部分以外の中間に入るソースコードをLive Commerceのオリジナルのコードと一致させておく必要があります。これは絶対条件ではありませんが、コーディング作業を低減するための1つの手段です。

具体的には下記のコードです。このコードをheaderとfooterのセレクタの中間に採用します。

 

Live Commerceへの統合手順

  1. 全ページで共通して利用する文字装飾に関するCSSコードを css/common.css にコピーしておきます。
  2. 全ページで共通して利用するレイアウトに関するCSSコードを css/layout.css にコピーしておきます。
  3. HTMLコーディングしたヘッダーとフッターのHTMLソースを include/header.phpinclude/footer.phpに挿入し既存のLive Commerceのテンプレートタグに注意しながら1つ1つ置換します。HTMLソースのみをコピーし、外部インクルードされたファイルはcssフォルダ、Jsフォルダにそれぞれコピーするようにしてください。
  4. サイドバーのHTMLソースを include/sidebar.php に挿入して既存のテンプレートタグに注意しながら1つ1つ置換えします。
  5. ここまでの作業で、正しいレイアウトになっているかどうかをブラウザで確認しておきましょう。

Was this article helpful?