スタイルシートでカスタマイズ
スタイルシートを活用したショッピングカートのカスタマイズ方法
ショッピングカートCGIの比較検討
ショッピングカートCGIの
ダウンロードの申込み


ショッピングカートCGIのデザインのカスタマイズの方法 ショッピングカートCGI(買物かごCGI)のデザインのカスタマイズの方法

スタイルシートを活用したショッピングカートのカスタマイズ方法

Ｒｅｓｅｒｖｅ〜Contents-Cart　Ver.10 に組み込まれたスタイルシートを活用したデザインのカスタマイズの方法について説明いたします。今後主流となるスタイルシートにぜひ挑戦してみてください。スタイルシートのすばらしさをきっと理解できるでしょう。

※何らかのテンプレートを用いたショッピングカートのカスタマイズ方法⇒ショッピングカートのカスタマイズ方法
※商品ページをHTMLで自由に制作したい場合⇒タグの貼り方
※PCtoMobile、Contents-Cart では、XHTMLに対応しています。XHTMLを使いたいときにはこちらをご覧ください。⇒HTMLからXHTMLへ
※PCtoMobile-U（Unicode版）にCSSサンプルを用いる時には、CSSファイルをUnicode(utf-8)に保存しなおしてからご利用ください。⇒Unicodeについて
ショッピングカートのカスタマイズの方法CSSテンプレートのダウンロード
下記はショッピングカートreserve930〜Contents-Cartに対応したデザインのCSSテンプレートです。スタイルシートを自由にダウンロードしてお使いください。ファイルを上書きし、必要な色を数箇所だけ下表に従って設定してください。（付属しているshop_info.cgi、form_info.cgiはPCtoMobile専用の設定ファイルです。）

【２カラムのスタイルシート】
設定箇所 white blue green brown purple orange black 設定箇所 bk_brw pink bk_blue red_blue dark_blue silver_blue lime green
サンプル white blue green brown purple orange black サンプル bk_brw pink bk_blue red_blue dark_blue silver_blue lime green
CSSのダウンロード white.lzh blue.lzh green.lzh brown.lzh purple.lzh orange.lzh black.lzh CSSのダウンロード bk_brw.lzh pink.lzh bk_blue.lzh red_blue.lzh dark_blue.lzh silver_bl.lzh limegreen.lzh
【注】付属しているshop_info.cgi、form_info.cgiだけはPCtoMobile専用設定ファイルです。
システム設定【１３】デザインの設定の システム設定【１３】デザインの設定の
テーブルの濃い色 #888888 #425566 #044e05 #623d26 #8c60d0 #cc6602 #373737 テーブルの濃い色 #676050 #fa78bf #072c52 #293c74 #39496b #72a6da #4e8100
テーブルの薄い色 #eeeeee #ececec #eafac2 #f7f0ea #ebe3f0 #fefe1da #000000 テーブルの薄い色 #ece6db #f3ece7 #141414 #eeeeee #eeeeee #e7ebf6 #f2efed
管理テーブルの濃い色 #888888 #425566 #044e05 #623d26 #8c60d0 #cc6602 #373737 管理テーブルの濃い色 #676050 #fa78bf #072c52 #293c74 #39496b #72a6da #4e8100
管理テーブルの薄い色 #eeeeee #ececec #eafac2 #f7f0ea #ebe3f0 #fefe1da #000000 管理テーブルの薄い色 #ece6db #f3ece7 #141414 #eeeeee #eeeeee #e7ebf6 #f2efed
カゴの色 #eeeeee #ececec #d2e1d2 #efdecf #ddcfe1 #fefe1da #000000 カゴの色 #ececec #f3ece7 #141414 #dddddd #eeeeee #e7ebf6 #e2ffb1
HTMLの記述 サンプルを参考にして下さい。 HTMLの記述 サンプルを参考にして下さい。
システム設定【６】分類の設定の システム設定【６】分類の設定の
小分類の表示２ #888888 #356f83 #044e05 #623d26 #8c60d0 #f9b331 #373737 小分類の表示２ #676050 #6948bb #373737 #293c74 #39496b #72a6da
#e89415		 #4e8100
システム設定【２７】宣伝広告機能の設定の システム設定【２７】宣伝広告機能の設定の
関連商品等の枠色 #888888 #878787 #5a5a5a #9e8461 #b193bb #aaaaaa #373737 関連商品等の枠色 #454141 #6948bb #373737 #717171 #9c9c9c #b3b3b3 #a29a8a

【３カラムのスタイルシート】
設定箇所 white-3c blue-3c green-3c brown-3c purple-3c orange-3c black-3c 設定箇所 bk_brw-3c bl_org_3c red_3c colorful_3c red_bl_3c gray-3c yellow-3c
サンプル white-3c blue-3c green-3c brown-3c purple-3c orange-3c black-3c サンプル bk_brw-3c bl_org-3c red_3c colorful-3c red_bl-3c gray-3c yellow-3c
CSSのダウンロード white3.lzh blue3.lzh green3.lzh brown3.lzh purple3.lzh orange3.lzh black3.lzh CSSのダウンロード bk_brw3.lzh bl_org3.lzh red3.lzh colorful3.lzh red_bl3.lzh gray3.lzh yellow3.lzh
【注】付属しているshop_info.cgi、form_info.cgiだけはPCtoMobile専用設定ファイルです。
システム設定【１３】デザインの設定の システム設定【１３】デザインの設定の
テーブルの濃い色 #888888 #425566 #044e05 #623d26 #8c60d0 #cc6602 #373737 テーブルの濃い色 #676050 #fc9c3e #707070 #0036a0 #293c74 #919191 #363636
テーブルの薄い色 #eeeeee #ececec #eafac2 #f7f0ea #ebe3f0 #fefe1da #000000 テーブルの薄い色 #ece6db #ebebeb #eeeeee #ebebeb #eeeeee #f3f3f3 #eeeeee
管理テーブルの濃い色 #888888 #425566 #044e05 #623d26 #8c60d0 #cc6602 #373737 管理テーブルの濃い色 #676050 #fc9c3e #707070 #0036a0 #293c74 #919191 #363636
管理テーブルの薄い色 #eeeeee #ececec #eafac2 #f7f0ea #ebe3f0 #fefe1da #000000 管理テーブルの薄い色 #ece6db #ebebeb #eeeeee #ebebeb #eeeeee #f3f3f3 #eeeeee
カゴの色 #eeeeee #ececec #d2e1d2 #efdecf #ddcfe1 #fefe1da #000000 カゴの色 #ececec #ebebeb #dddddd #ebebeb #dddddd #e1e1e1 #cecece
HTMLの記述 サンプルを参考にして下さい。 HTMLの記述 サンプルを参考にして下さい。
システム設定【６】分類の設定の システム設定【６】分類の設定の
小分類の表示２ #888888 #356f83 #044e05 #623d26 #8c60d0 #f9b331 #373737 小分類の表示２ #676050 #6948bb #707070 #006c00 #293c74 #919191 #363636
システム設定【２７】宣伝広告機能の設定の システム設定【２７】宣伝広告機能の設定の
関連商品等の枠色 #888888 #878787 #5a5a5a #9e8461 #b193bb #aaaaaa #373737 関連商品等の枠色 #454141 #6948bb #707070 #db8400 #717171 #919191 #ff8200

【注】PCtoMobile-U（Unicode版）にCSSサンプルを用いる時には、CSSファイルをUnicode(utf-8)で保存しなおしてからご利用ください。

ショッピングカートのカスタマイズの方法組み込まれているスタイルシート
７つに分割した外部スタイルシートが組み込まれています（【36】デザインの設定）。それぞれが特定の部分のデザインを決めています。
  1. html/css/cart_base.css・・・・・カートに必須のスタイルシート
  2. html/css/menu_header.css・・・・・ヘッダー部分とメニュー部分など全体的なレイアウト
  3. html/css/top_container2.css・・・・・TOP1〜TOP5のページ
  4. html/css/goods_customize.css・・・・・商品一覧表
  5. html/css/class_container.css・・・・・分類説明
  6. html/css/detail_customize.css・・・・・商品詳細画面全体のレイアウト
  7. html/css/detail_container.css・・・・・商品詳細説明部分のレイアウト
上記のスタイルシートに含まれるクラス名、id名を用いることにより容易にページを作成できます。

クラス名、id名は下記の説明図にあるように定められています。 スタイルシートに関する知識がない場合は全体的なレイアウトは変えずに、サンプルどおりに内容だけを変更して用いることをお勧めいたします。そうするなら自動的にＳＥＯ対策が施されたページが出来上がります。　　（⇒ＳＥＯの施策）
しかしながら、これからはスタイルシートが普通に用いられるようになりますから、スタイルシートが理解できるようになることは大切なこととなります。ぜひ、スタイルシートに挑戦なさるようにお勧めいたします。

スタイルシートに関する知識がある方の場合は、cart_base.css以外を、まったく新しく作成することもできます。cart_base.cssはshop.cgiの中で参照しているスタイルシートを含んでいますので、適当に調整しながら使用しますが、必須の外部スタイルシートになります。

スタイルシートの設定カートに必須の共通スタイルシート
html/css/cart_base.css

cart_base.cssは必須の外部スタイルシートです。カート内部の基本スタイル（id名content内のスタイル）やカート内で参照しているクラス名、id名を定義しています。
大体次のようなものが設定されています。
  • カート内部の基本スタイル（id名content内のスタイル）
    • 全体のテキストの大きさ、色、フォント
    • form、h1、h2、h3のマージン
    • リンクの色等
  • その他、カート内で参照しているクラス名、id名を定義
クラス名submitが定義されています。標準のデザインを使うときは削除してください。submitボタンのデザインについてはこのページの最後をご覧ください。⇒ボタンのデザイン

スタイルシートの設定全体的なレイアウトの決定
html/css/menu_header.css

全体の基本スタイルやレイアウトは外部スタイルシートmenu_header.cssで決定されています。これにより、システム設定【１３】でメニューや全体的なレイアウトを作成するのが容易になります。
大幅な変更がない限りそのまま使うことができます。（スタイルシートについて良く分からない人はそのまま使うことをお勧めいたします。ＳＥＯ対策のためにfloatを使用していますので、幅の調整をするとレイアウトが乱れる場合があります。）

スタイルシートは次のように設定されています。
  • 全体の基本スタイル
    • テキストの大きさ、色、フォント
    • bodyのマージンとセンタリング（中央表示を指定）
    • form、h1、h2、h3のマージン
    • リンクの色等
  • メニュー及びトップ画面⇒説明図
ヘッダー部分は、id='siteHead'で定義されています。背景画像がトップの画像（幅820px）になるように組み込んであります。その背景上にロゴや商品検索などを配置できます。
また、id='container'の中に、id='menu'及びid='content'のブロックが設けられています。
こうして全体的なレイアウトが決定されており、それらのブロックの中でリンクやh2、p、ulなどが再定義されています。

<div id='whole_container'>
<div id='siteHead'>
width: 820px;
background-image: url(../images/top-bg.gif);

</div>
<div id='container'>
background: #ffffff url('../images/bg.gif') repeat-y;
width: 820px;
　 <div id="menu">
width: 160px;
メニュー部分


<div>		 <div id="content">
float:right;
width: 653px;


</div>
</div>
</div>

※メニューを右に表示するには⇒メニューを右に表示する方法

商品一覧表のカスタマイズＴＯＰ１〜ＴＯＰ５のスタイルシート
html/css/top_container2.css

ＴＯＰ１〜ＴＯＰ５に関するスタイルシートは、外部スタイルシートtop_container2.cssで定義されています。これにより、システム設定【３０】〜【３４】でのページ作成が容易になります。

スタイルシートは次のように設定されています。
  • メニュー及びトップ画面⇒説明図
id='container2'の中に、id='main2'のテーブルとid='side2'のテーブルが設けられています。
こうして、ＴＯＰ１〜５のページのレイアウトが決定されており、そのテーブルの中でさらなるグロックやリンクやh2、h3、p、ulなどが再定義されています。

<div id='container2'>
　 <table id="main2">
<tr><td>
float: left;
width: 425px;



</td></tr>
</table>		 <table id="side2">
<tr><td>
float:right;
width: 200px;


</td></tr>
</table>
</div>

このブロック内で、<hr>には、both:clearが設定されていますので、floatを解除するために使用できます。
id名newInfoにはoverflow:autoが設定されており、一定の高さを保持できます。

商品詳細ページのカスタマイズ商品一覧表のスタイルシート
html/css/goods_customize.css

商品一覧表の１商品のレイアウトは、外部スタイルシートgoods_customize.cssで定義されています。これにより、システム設定【１４】で一覧表作成が容易になります。

スタイルシートは次のように設定されています。
id='goods_customize'の中に、id='goodsLeft'及びid='goodaRight'のブロックが設けられています。
こうして、商品一覧表の１商品のレイアウトが決定されており、それらブロックの中でリンクやh2、h3、p、ulなどが再定義されています。

<div id='goods_customize'>
width: 316px;
　 <div id="goodsLeft">
float: left;
width: 40%;

</div>		 <div id="goodsRight">
float:right;
width: 55%;


</div>
</div>


TOP1〜5のカスタマイズ分類説明のスタイルシート
html/css/class_container.css

商品一覧表の上部に表示される分類説明の部分のデザインを決定しているのは、外部スタイルシートclass_customize.cssです。分類説明はset_class_plフォルダ内に(分類番号).plの形で登録しておきます。その際に、このスタイルシートが適用されます。

スタイルシートは次のように設定されています。
id='class_container'の中で、リンクやh2、h3、p、ulが再定義されています。
このclass_containerのブロックでは、overflow: auto　が定義されており、常に一定の高さで表示されるようになっています。

<div id='class_container'>
overflow: auto

</div>


その他デザインのカスタマイズ商品詳細ページの全体的なレイアウト
html/css/detail_customize.css

商品詳細ページの全体的なレイアウトは、外部スタイルシートdetail_customize.cssで定義されています。これにより、システム設定【１４】での詳細ページの作成が容易になります。

スタイルシートは次のように設定されています。 id='detail_customize'の中に、id='detailLeft'のテーブル及びid='detailRight'のブロックが設けられています。
こうして、商品詳細ページのレイアウトが決定されており、それらブロックの中でリンクやh2、h3、p、ulなどが再定義されています。

<div id='detail_customize'>
width: 640px;
　 <table id='detailLeft'>
<tr><td>
float: left;
width: 375px;


</td></tr>
</table>		 <div id="detailRight">
float:right;
width: 250px;




</div>
</div>


携帯ショッピングカートのカスタマイズ商品詳細説明の部分のスタイルシート
html/css/detail_container.css

商品詳細画面の詳細説明の部分のレイアウトは、外部スタイルシートdetail_container.cssで定義されています。これにより、商品登録で商品詳細説明のHTML入力が容易になります。

スタイルシートは次のように設定されています。 id='detail_container'の中で、リンクやh2、h3、p、ulが再定義されています。

<div id='detail_container'>


</div>

携帯ショッピングカートのカスタマイズスタイルシートの調整方法
デザインの少しの調整をするときには、ＷＥＢ上からスタイルシートを追加して、再定義します。そうすると、追加した指定の方が優先されます。

例えば、背景画像を用いたいときや、送信ボタンをカスタムしたいときは下記のようにできます。

<style type='text/css'>

body {
background: url(./html/images/bg_grey820.gif) top center repeat-y;　　　←背景画像
}

.submit{
padding-left:1px;padding-top:2px;
border: 0px;
background : url(./html/images/submit_bg.gif) no-repeat 0px 0px;　　　←送信ボタンの背景画像
cursor: pointer;
}

#menu li {background: #f2f2f2 url('./html/images/menu_bg.gif') no-repeat;}　←メニューの↓マーク

</style>

上記のようにしてデザインを変更していくことができます。
そのままでも良いのですが、デザインが決定したら、最後に、それを外部スタイルシートに書き込めば完成です。
もちろん、初めから外部スタイルシートを調整しながらデザインすることもできます。慣れた人はそのほうが簡単かもしれません。


デザインの良し悪しは、用いる画像によっても大きく変わってきます。カート自体のデザインはシンプルにしておいて、画像で全体をグレードＵＰするのはとても賢明な方法といえるでしょう。
CSSの調整メニューを右に表示する方法
スタイルシートを少し変更するだけで、メニューを右に移動することができます。

移動するとこのようになります。⇒bk_brw_right

変更箇所はファイルmenu_header.cssの下記の赤い部分です。

#container{
width: 820px;
background: #ffffff url('../images/bg.gif') repeat-y 660px;
margin: 0px;
padding: 0px;
text-align:left;
}

#menu{
float:right;
width: 160px;
padding: 0px;
background-color: #383224;
border-top: 1px solid #383224;
border-bottom: 1px solid #383224;
border-left: 1px solid #383224;
border-right: 1px solid #383224;
}

#content{
float:left;
width: 653px;
margin: 12px 0 0 3px;
padding: 0;
background-color: #ffffff;
}
携帯ショッピングカートのカスタマイズボタンのデザイン法
submitボタンのデザインには、大きく分けて、３つの方法があります。それぞれに長所、短所があります。
  1. Windowsなどの標準のものをそのまま使う。
    • 使い慣れている。
    • ページのデザインに合わせることはできない。特に、Windows XP スタイル　や　Windows クラシックスタイル　によりデザインが変わる。
  2. スタイルシートで調整する。
    • 簡単に色などを変えることができる。
    • 調整に限界がある（スタイルシートで背景画像を指定する方法もある）。
  3. 画像を使う。
    • デザインを思いのままに行なえる。
    • しかし、下手なデザインはかえってまずい。
したがって、デザインに自信があり、それにこだわるなら、画像を使うべきでしょう。デザインにそれほどこだわらないなら、標準のものが良いでしょう。色だけでも指定したいというときにはスタイルシートがぴったりですね。

【サンプル】

標準の場合：

この場合、外部スタイルシートのcart_base.cssのクラス名submitの記述を削除する必要があります。


スタイルシートを用いた例：

クラス名submitに下記のように追加します。
.submit{
color: #ffffff;
background-color: #555588; /* 背景色 */
border: outset 1px #9999cc; /* 枠の色 */
cursor: pointer;
}


スタイルシートで背景画像を指定：

クラス名submitに下記のように追加します。
.submit{
color: #ffffff;
border: 0px;
background : url(images/submit_bg.gif) no-repeat 0px 0px;
cursor: pointer;
}


画像を用いた例：　　　

この場合、プログラムの該当箇所を下記のように書き換える必要があります。（該当箇所は、「submit」で検索すると見つかります。）

<input type="image" src="images/go.gif" alt="検索">


【参考サイト】
ボタンを飾る
ボタンに色をつけよう
スタイルシートの技
スタイルシートで背景に画像
画像で送信ボタンを作る
ボタンを押させるテクニック


go to home
Copyright (C) 2007　 WEBインベンター　All rights reserved.