 ショッピングカートのカスタマイズの方法
|
デザインの方法は、下記のC/S/s/G/Xタイプが組み込まれています（【13】デザインの設定のS/G/Xの選択 で設定）。
- Cタイプ・・・自由にカスタムするタイプ（初期の設定）
- Sタイプ・・・メニューを中央上部に表示するタイプ
- sタイプ・・・メニューを表示せず、フレーム内にショッピングカートを埋め込むんで使うタイプ
- Gタイプ・・・商品検索窓を上部右側に配置するタイプ
- Xタイプ・・・商品検索窓を左側に配置するタイプ
CタイプはWEB上からデザインを自由に変更できるタイプです。これを用いて望みのデザインに自由にカスタマイズすることができます。
カスタマイズの要領は次の通りです。システム設定【１３】のデザインの設定のところをご覧になれば分かるように、ＨＴＭＬは一覧表をはさむ形で記述します。まず、望みのページをホームページ作成ソフトで作成します。そこに、ダミーの一覧のテーブルを配置します。プログラムはその部分に自動的に一覧表を挿入する形で表示しますので、その前後の部分を【１３】の入力欄にコピー貼り付けします。
スタイルシートは用意したものを使うことができますが、ショッピングカートで使われているcart_base.cssは必須となります。
【ホームページテンプレートの活用】
さて、望みのページを作成しようとしても、そう簡単に洗練されたページができるものではありません。プロに頼めば何十万円もするでしょう。それで、優れたデザインでしかも安く仕上げる方法を提案したいと思います。それは、テンプレートモンスターなどのプロのデザインしたホームページテンプレートを活用することです。7,000円ほどで優れたデザインを自分のページで使えるのです。
また、OSWDではCSSを活用したシンプルなXHTMLテンプレートが無料で配布されています。それを活用することもできます。これは、テキストエディタだけで作成することができます。
《注意》テンプレートにはFlashを使ったものと使わないものがあります。Flashを使ったテンプレートを加工するにはFlash編集用のプログラムが必要であり、かなりの技術が必要になります。Flashを使わないものに関してはホームページ作成ソフトと画像処理ソフトで十分です。
次の例はそれを実際に組み込んだものです（あくまでもサンプルなので細かい所まで完全に作っているわけではありません）。
- PCtoMobile Ver.11 を用いたサンプル
- reserve930++を用いたサンプル
- Multi-AFF Ver.960+ (又は、epsilon-NPZ 、PCtoMobile)を用いたサンプル
- Contents-Cart Ver.960+ を用いたサンプル
これを行なうためには以下のカスタマイズが必要です。
- デザインの組み込み
- メニューのカスタマイズ
- 商品一覧表のカスタマイズ
- 商品詳細ページのカスタマイズ
これに伴い、色やサイズなどを設定する必要があります。
以下にその方法を説明いたしますが、その前に、初期のデザインでショッピングカートが動くことを十分に確認してください。商品も５，６個ほど本番と同じように登録しておくとデザインを合わせるのに役立ちます。
【注意】幅の変更はかなり面倒になります。幅に関係したすべての部分を調整する必要があるからです。現在、カートの幅は820pxになっています。これは大きすぎず、小さすぎず、適切なサイズであるように思われます。特に必要でないならこのサイズのまま使われることをお勧めいたします。
|
ショッピングカートへのデザインの組み込み
|
ここでは、OSWDのCSSを活用したXHTMLテンプレートを用いたカスタマイズの方法を説明致します。下記のテンプレートを用いてみましょう。色も合わせやすいデザインですね。
MultiFlex-2
用いるショッピングカートはPCtoMobile Ver.11です。
フォルダ構成を下記のよう作成してください。このようにするとパスの変更をせずに済みます。（ファイルがごちゃごちゃになるので、フォルダ構成をすっきりさせたいときには、スタイルシートや画像のパスを変更する必要がありますので、まずはこの構成でテストしてみると良いと思います。）
- shop.cgi
- imgフォルダ(画像用フォルダ)
- cssフォルダ(CSS用フォルダ)
- layout2.html
- index.html
- ・・・・・・・
用いるテンプレートがXHTMLなので、set.plの２２行目で、XHTMLを選択します。テンプレートの１行目を見てXML宣言<?xml
version='1.0' encoding='Shift_JIS'?>があるかどうかを確認してください。あるときは1、ないときは2を設定して合わせます。
また、cart_base.cssのbodyのtext-align:centerを削除しておいてください。
【注意】XML宣言の省略、text-align:centerの用い方は、いずれもIEのバグに対する対処方法で、必ずしも文法に沿うものではありませんが、これが一般的な対処の仕方になっています。
さらに、文字コードをShift_JISにします。そのために、すべてのhtmlファイルの８行目の charset=iso-8859-1 を charset=Shift_JIS
に変更し、また、lang='ja' とします。それから、名前をつけて保存する際に、エンコードをShift_JISを選択して保存してください。
テンプレートの幅は770pxです。最近ではディスプレイの画面が大きくなってきたので、これを830pxに変更しておきましょう。こうしておくと、ショッピングカートの幅の設定を変更しないで済みます。style_screen.cssを開いて幅の設定を下記のように変更してください。（一括置換でOKです。）
770→830 755→815 590→650 569→629 428→488 408→468
191→221 119→139 272→302 173→193
それから、背景画像の幅を調整する必要があります。830pxに合わせて調整した背景画像をこちらからダウンロードできます。（ダウンロード⇒bg830.zip）
また、style_screen.cssのfont-familyを用いたいフォントに変更しておきましょう。ここではまず、１７行目だけをfont-family: 'MS UI Gothic';に変更しておきます。他のfont-familyの変更は必要に応じて行います。
これで、テンプレートの修正が終わりました。このようになりました。⇒ MultiFlex-2(830px)
さて、layout2.htmlを使って商品一覧ページの原型を作ります。
商品一覧ページの原型： layout2_template.html
プログラムは（-----ここに商品一覧表が挿入される-----）の部分に自動的に一覧表を挿入する形で表示しますので、その前後の部分をシステム設定【１３】の入力欄にコピー貼り付けします。
ヘッダー部分：
<div class="page-container-2">（<body>の後）
・・・・・・・
<div id="content">
フッター部分：
</div>
・・・・・・・
</div>（</body>の前）
次に、スタイルシートを設定します。layout2.htmlの１２行目のタイルシートの下記の部分をコピーして、Cタイプのスタイルシートの記述の一番上に追加してください（【36】Cタイプのスタイルシート）。スタイルシートは順序が大切で、後の方の設定が優先されます。
<link rel="stylesheet" type="text/css" media="screen,projection"
href="./css/style_screen.css" />
このとき、【36】Cタイプのスタイルシートの入力枠の中に記述されている下記の背景画像の設定を削除しておく必要があります。
body {
background: url(./html/images/bg_grey820.gif) top center repeat-y;
}
これで、まず、ショッピングカートを動かしてみてください。ここまでくれば完成したも同然ですね。文字化けしている部分もあるかもしれませんが、いずれ使用しない文字なので安心してください。
幅はテンプレートのほうで合わせましたから、この場合は必要ありませんが、その必要があるときは下記の点を設定する必要があります。
表の幅を設定しましょう。
- システム設定の【13】デザインの設定の テーブルの幅 及び注文テーブルの幅を一覧表の幅に設定する
- システム設定の【4】会員制＆ポイント制 の会員登録フォームの幅 も同じ値に設定する
- システム設定の【14】商品一覧のテーブル＆詳細説明のデザインの １商品の表示幅を適当に調整する（複数列表示の場合）
これで、全体の形ができてきたと思います。次は、色を合わせてください。
システム設定の【13】デザインの設定の
- 壁の色（又は壁紙のＵＲＬ）
- テーブルの濃い色 と テーブルの薄い色
- 管理テーブルの濃い色 と 管理テーブルの薄い色
- カゴの色
|
メニューのカスタマイズ
|
今度はいよいよメニューにリンクを貼りましょう。望みのリンクを１つ１つ貼ることもできますが、カテゴリーや会員用メニューを表示させるための変数を活用することができます。
まず、会員用のメニューをどこに配置するか決めなくてはなりません。
例えば、変数$member_link_G_ulを下記のよう形で上手に挿入してください。あるいは、$url_entry_mode=****を使って会員用の登録、変更などのリンクを１つ１つ作ることも出来ます。
また、ログインメッセージは$log_in_mess を配置することにより表示できます。
<div class="nav2">
$member_link_G_ul
</div>
<!-- Buffer after header -->
<div class="buffer">
<div style='margin:7px;color:#777777'>$log_in_mess</div>
</div>
分類とカテゴリー（キーワード）のリンクのＵＲＬは下記のように設定します。
分類**/**の場合：URL=$url_class=**%2F**
カテゴリー*****の場合：URL=$url_category=***** （*****はエンコードしてあれば望ましい）
この場合、下記のように変数を設定してみました。
<p class="sidebar-maintitle">SHOPPING MENU</p>
$top_link_ul
$category_link_ul
$class_link_ul
後はお好みに応じてスタイルシートでデザインを修正してください。例えば、下記のように変更してみましょう。
.nav3 ul のmargin bottom を5px
.sidebar-maintitle のmargin bottom を0px
ここまでで、このようになりました。⇒ヘッダーとメニューの部分
また、TOP1〜5、購入方法、問合せ、特定商取引法などのＵＲＬは下記のように設定します。
$url_mode=***** ここで、*****=top1〜5、look（かごの中へ）、howto（購入方法）、ask（問合せ）、law（商取引法）など。
変数の意味はシステム設定【１３】のところに記されています。サンプルを参考にして設定してください。
|
商品一覧表のカスタマイズ
|
標準で組み込まれている表のほかに、【14】商品一覧のテーブルのデザインのところで一覧表をカスタマイズをすることができます。メニューと同じように変数を表中に組み込むことにより商品データを表示することができます。
まず、【14】商品一覧のテーブルのデザインのところで、列数を決めてください。さらに、一覧のカスタマイズ＝1 に設定します。それから、一覧のテーブルのＨＴＭＬを記述します。この場合、すでに組み込まれているスタイルシートgoods_customize.cssを活用できますし、まったく新しくデザインすることもできます。
形がどうしても崩れてうまくいかない時は、テーブルで構成すると良いかもしてません。
今度は、表中の画像や説明文、そして価格などを変数で置き換えて行きます。変数の意味はシステム設定の【１４】の所に記されています、サンプルに倣って組み込んでください。
表の枠のデザインはなかなか難しい部分です。スタイルシートをうまく使って、破線にしたりなど工夫することもできます。例えば、下記のように記述できます。
<table width='270' height='150' border="0" cellspacing="0"
cellpadding="10" style="margin:12px 0px 0px 0px;border-right-style:dotted;
border-right-width:1px;border-bottom-style:solid; border-bottom-width:1px">
</table>
今取り上げている例では、初めから組み込まれているスタイルシートを用いました。この場合、見出しの行の高さがいくぶん大きくなるようですので、調整が必要ですね。下記のように修正してみました。
.goods_customize h2{
height: 20px; ・・・・・・・に修正
}
|
商品詳細ページのカスタマイズ
|
詳細ページはFタイプとWタイプの二つが組み込まれています。
- Fタイプ・・・それほど大きくない画像（横300ピクセル前後）の場合に適しています。他の２枚の画像はポップＵＰで表示します。
- Wタイプ・・・大きい画像の場合に適しています。画像を縦に３つ表示します。
【14】商品詳細のデザインのところで詳細ページをカスタマイズすることができます。一覧表のカスタマイズと同じように変数を記入することにより商品データを表示することができます。
まず、【13】デザインの設定の詳細表示の選択＝C に設定します。詳細ページのＨＴＭＬをシステム設定【14】商品詳細のデザインのところに記述します。この場合、すでに組み込まれているスタイルシートdetail_custamize.css、detail_container.cssを活用できますし、まったく新しくデザインすることもできます。
先と同じように、、表中の画像や説明文、そして価格などを変数で置き換えて行きます。変数の意味はシステム設定の【１４】の所に記されています、サンプルに倣って組み込んでください。
今取り上げている例では、初めから組み込まれているスタイルシートを用いました。この場合、見出しの行の高さがいくぶん大きくなるようですので、商品一覧表と同様の調整が必要ですね。下記のように修正してみました。
#detail_container{
width: 630px;・・・・・・・に修正
}
#detail_container h2{
height: 20px; ・・・・・・・に修正
}
ここまでで、このようになりました。⇒商品一覧表の部分
|
TOP1〜5の作成
|
epsilon_NPZ〜Contents-CartではTOP1〜5をＷＥＢ上から作成できます。
TOP1〜5のＨＴＭＬをシステム設定【30】〜【34】のところに記述します。この場合、すでに組み込まれているスタイルシートtop_container2.cssを活用できますし、まったく新しくデザインすることもできます。
組み込む際のテーブルの幅は、システム設定の【13】デザインの設定の商品テーブルの幅と同じにしてください。
先と同じように、表中の画像や説明文、そして価格などを変数で置き換えてゆきます。変数の意味はシステム設定の【30】の所に記されています、サンプルに倣って組み込んでください。
今取り上げている例では、初めから組み込まれているスタイルシートを用いました。この場合、見出しの行の高さがいくぶん大きくなるようですので、商品一覧表と同様の調整が必要ですね。下記のように修正してみました。
.main2Block h2{
height: 20px; ・・・・・・・に修正
}
.side2Block h2{
height: 20px; ・・・・・・・に修正
}
ここまでで、このようになりました。⇒TOP1の部分
|
その他の調整
|
全体の文字のサイズやフォントを見直す必要があるかもしれません。というのは使用するテンプレートのほとんどがアルファベットを使ったページで、文字サイズが小さいのが普通だからです。それを大きくすると形が崩れる場合がありますので、なかなか大変な作業になることがありますが、頑張ってください。
また、ちょっとした隙間が気になる場合もあります。Paddingやmarginを調整しますが、IEとFireFoxの表示の違いに対処するのは簡単ではありませんから、時にはどちらかを犠牲にしなければならない場合もあるでしょう。
スタイルシートの解説に関しては、とほほのスタイルシート入門のページを参考にすると良いと思います。
その他のカスタマイズ機能として下記のものがあります。メニューのカスタマイズの際に変数を記入することにより表示されます。 変数は、$aff_link_table（アフィリエイト用
）、$adv_link_table（広告宣伝用）です。
- アフィリエイト・プログラムの左のメニューへの表示（【26】アフィリエイト・プログラムのための設定）。
- 宣伝広告用のテーブルの挿入（【27】宣伝広告機能の設定）。
|
携帯用ショッピングカートのＴＯＰページのカスタマイズ
|
Multi-AFF、Contents-Cartでは、携帯用ショッピングカートのＴＯＰページもＷＥＢ上から簡単に作成できます。生成されるＴＯＰページは３キャリア対応になっています。
システム設定の【35】携帯のHOMEのHTMLの設定 のところで、変数を使って記述します。変数の意味はシステム設定の【35】の所に記されています、サンプルに倣って組み込んでください。
|
