Contents
テーマをカスタマイズするウェブデザイナー向けに、Live Commerceのデザインレイアウトとテーマの統合方法について解説します。
Live Commerceのカタログ画面数は、40画面あります。
40画面を4つのレイアウトパターンで対応しています。
4つのレイアウトパターン
以下はLive Commerceの標準テンプレートで配置された4つのレイアウトです。
(画面イメージをクリックすると、大きい画像で確認できます)
- 青色部分 >> ヘッダー、フッター
- 赤色部分 >> コンテンツ部分
- 黄色部分 >> サイドバー
 |
 |
 |
 |
| 1.トップページ A-1カラム トップページは単一ページになるため、自由設計のレイアウトでも問題ありません。 |
2.カテゴリページ、商品一覧ページ B-2カラム サイドバーは左側に設置 |
3.コンテンツページ C-2カラム ページ管理で作成されたページのテンプレートとして利用されます。 |
4.商品詳細ページ、その他のページ D-1カラム このページが全ページの基本テンプレートとして利用されます。 |
テンプレートファイルとレイアウトパターンの相関関係
Live Commerceのカタログ画面で表示されるデザインパターンは下図の通りです。
| ファイル名 | レイアウトタイプ |
| 404.php | D |
| account-close-success.php | C |
| account-close.php | C |
| account-edit.php | C |
| address-add.php | C |
| address-edit.php | C |
| address.php | C |
| brand.php | D |
| cart-detail.php | D |
| cart.php | D |
| category.php | B |
| checkout-confirmation.php | D |
| checkout-guest-billing-address.php | D |
| checkout-guest-shipping-address.php | D |
| checkout-login.php | D |
| checkout-shipping.php | D |
| checkout-success.php | D |
| contact.php | C |
| create-account-success.php | D |
| create-account.php | D |
| default.php | A |
| listing_default.php / listing_window.php | B |
| login.php | D |
| logoff.php | C |
| myaccount.php | C |
| new_page.php | C |
| order-detail.php | C |
| order.php | C |
| password.php | D |
| point.php | C |
| product.php | D |
| recommend_default.php / recommend_window.php | D |
| review-listing.php | D |
| review-write.php | D |
| review.php | D |
| search-form.php | D |
| search_default.php / search_window.php | D |
| sitemap.php | D |
| tag.php | D |
| wishlist.php | D |
HTMLコーディングとテーマへの統合
コーディングする際は、以下の点を遵守してください。
- HTML5 CSS3 Bootstrap
- Table-less CSS markup
- Safari , Google Chrome Support
- SEO Semantic Coding
- Load Speed Optimization
HTMLへのコーディングが完了したら、Live Commerceのテーマファイルに統合していきます。
Live Commerceへの統合についての注意
コーディングする箇所は、ヘッダー(header.php)、フッター(footer)、サイドバー(sidebar)、CSSファイル(/css/) のみで、40テンプレートファイルのコンテンツ部分を再コーディングすることは推奨していません。
次のソースコードをご覧ください。
これはテーマにある404．phpというテンプレートファイル内に記述されたHTMLソースです。404．phpファイルを含むすべてのコンテンツ表示部分は共通して大外枠にはdivにid=”contents” がセットしてあります。コーダーはこのコーディングルールを確認し、先にHTMLコーディングしたソース内の共通コンテンツ部分には、404．php を参考に同一のクラス名またはセレクタ名をセットしておく必要があります。もしコーダーが独自にクラス名をセットした場合は逆にLive Commerce側のテーマすべてを修正する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php include('include/header.php'); ?> <!--body --> <div id="contents" class="clearfix"> <div class="fullFrame"> <div class="categoryFrame"> <h1><?php echo TEXT_404_TITLE ; ?></h1> <br /> <br /> <p><?php echo TEXT_404_MSG; ?></p> </div> </div> </div> <!--body //--> <?php include('include/footer.php'); ?> |
コンテンツ部分とは、40画面で表示される個別のHTMLソースのことで、テーマに含まれる40のテンプレートファイル（*.php)のことです。この40ファイルをコーディングすることなくCSSとヘッダー、フッター、サイドバーだけでオリジナルデザインになるようにすることが重要です。（そうすれば最小限の労力でオリジナルデザインへ適用することができます）
そのためには、ヘッダーとフッター部分以外の中間に入るソースコードをLive Commerceのオリジナルのコードと一致させておく必要があります。これは絶対条件ではありませんが、コーディング作業を低減するための１つの手段です。
具体的には下記のコードです。このコードをheaderとfooterのセレクタの中間に採用します。
|
1 2 3 |
<!--body --> <div id="contents" class="clearfix"> <div class="mainFrame clearfix"> |
Live Commerceへの統合手順
- 全ページで共通して利用する文字装飾に関するCSSコードを css/common.css にコピーしておきます。
- 全ページで共通して利用するレイアウトに関するCSSコードを css/layout.css にコピーしておきます。
- HTMLコーディングしたヘッダーとフッターのHTMLソースを include/header.php と include/footer.phpに挿入し既存のLive Commerceのテンプレートタグに注意しながら1つ1つ置換します。HTMLソースのみをコピーし、外部インクルードされたファイルはcssフォルダ、Jsフォルダにそれぞれコピーするようにしてください。
- サイドバーのHTMLソースを include/sidebar.php に挿入して既存のテンプレートタグに注意しながら1つ1つ置換えします。
- ここまでの作業で、正しいレイアウトになっているかどうかをブラウザで確認しておきましょう。