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

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

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

※何らかのテンプレートを用いたショッピングカートのカスタマイズ方法⇒ショッピングカートのカスタマイズ方法
※商品ページをHTMLで自由に制作したい場合⇒タグの貼り方
※PCtoMobile、Contents-Cart では、HTML5、XHTMLに対応しています。HTML5、XHTMLを使いたいときにはこちらをご覧ください。⇒HTMLからHTML5へ
※PCtoMobile-U(Unicode版)にCSSサンプルを用いる時には、CSSファイルをUnicode(utf-8)に保存しなおしてからご利用ください。⇒Unicodeについて

ショッピングカートのカスタマイズの方法無料CSSテンプレート(38個)のダウンロード
下記はショッピングカートreserve〜Contents-Cartに対応したデザインの無料CSSテンプレートです。スタイルシートを自由にダウンロードしてお使いください。利用方法は下記をご覧ください。また、デザインの確認方法はこちらをご覧ください。⇒ 携帯やスマートフォンサイトのテストの方法

※下表のテンプレートのサンプルの場合、メールやフルパスなどの必要な設定を行っていないため動作が不十分なところがあります。それで、デザインだけを参考にしていただければ助かります。動作のサンプルはこちらをご覧ください。⇒ 機能とサンプル

スマートフォンサイトをIE9で見る場合の注意点があります。標準モードで見る場合は問題ないのですが、IE9の互換モードでスマートフォンサイト(HTML5、CSS3)を見ると正しく表示されないことがあります。また、IE9は CSS3のグラデーション には対応していません。Chromeは対応しています。

【2カラムのテンプレート(幅980px)】(2016年06月09日に更新。)
white blue green brown purple orange black
white blue green brown purple orange black
white.zip blue.zip green.zip brown.zip purple.zip orange.zip black.zip

bk_brw gray red red_blue dark_blue silver_blue lime green
bk_brw gray red red_blue dark_blue silver_blue lime green
bk_brw.zip gray.zip red.zip red_blue.zip dark_blue.zip silver_bl.zip limegreen.zip

yellow pink blue_orange moss green std_blue std_1000
yellow pink blue_orange moss green std_blue std_1000
width→1000px
yellow.zip pink.zip blue_org.zip mossgreen.zip std_blue.zip std_1000.zip

【3カラムのテンプレート(幅1080px)】(2016年06月09日に更新。)
white-3c blue-3c green-3c brown-3c purple-3c orange-3c black-3c
white-3c blue-3c green-3c brown-3c purple-3c orange-3c black-3c
white3.zip blue3.zip green3.zip brown3.zip purple3.zip orange3.zip black3.zip

bk_brw-3c bl_org_3c red_3c colorful_3c red_bl_3c dk_blue_3c gray-3c
bk_brw-3c bl_org-3c red_3c colorful-3c red_bl-3c dk_blue_3c gray-3c
bk_brw3.zip bl_org3.zip red3.zip colorful3.zip red_bl3.zip dk_blue3.zip gray3.zip

yellow-3c silver_blue3 lime green3 standard-3c
yellow-3c silver_blue3 lime green3 standard-3c
yellow3.zip silver_bl3.zip limegreen3.zip standard3.zip
※幅の調整方法はこちら⇒ 幅を調整する方法
※スライドショーを設置する方法はこちら⇒ スライドショーを設置する方法

【無料テンプレートの構成と利用方法】
■無料テンプレートのファイル構成■
  readme.txt
  shop_info.cgi(PCtoMobile専用)
  form_info.cgi(PCtoMobile専用)
  calendar_set.pl(カレンダー用の設定ファイルが付属する場合もある)
  html/css(スタイルシートのフォルダ)
     /template(設定ライブラリーのフォルダ)
     /images(画像ファイルのフォルダ)
  smart/css/style.css(スマートフォン用スタイルシート)

■利用方法■
reserve以上のカートで利用できます。htmlフォルダごとUPして上書きすることにより、デザインを変更することができます。
templateフォルダをUPするかどうかは、下記を参考にして決定してください。

templateフォルダをUPしない場合(通常はこの方法)
テンプレートのshop_info.cgiをUPする場合はこのフォルダは必要ありません(PCtoMobileの場合)。
しかし、すでにシステム設定がしてあり、shop_info.cgiをUPできない場合は、templateフォルダ内の設定ライブラリーのファイルをテキストエディターで開くと、システム設定に関する情報が得られます。それに倣ってWEB上から設定すると目的のデザインが得られます。

※PCtoMobile2の場合は、【注2】を参照してください。

■templateフォルダをUPする場合(設定ライブラリー機能の利用)■

templateフォルダをUPすることにより、瞬時にデザインを変更できます。
テンプレートの設定ライブラリーをUPするとシステム設定のデザインに関する設定が無視され、設定ライブラリーの設定が優先的に適用されます

《templateフォルダ内の設定ライブラリー》
 k_color.pl・・・・・(携帯用色の設定)
 k_form1.pl・・・・・(携帯問い合わせの設定)
 k_home.pl・・・・・(携帯用HOIMEの設定)
 k_top1.pl・・・・・(携帯用TOP1の設定)
 k_top2.pl・・・・・(携帯用TOP2の設定)
 k_top3.pl・・・・・(携帯用TOP3の設定)
 pc_color.pl・・・・・(PC用色の設定)
 pc_css.pl・・・・・(PC用スタイルシートの設定)
 pc_footer.pl・・・・・(PC用フッターのカスタマズの設定)
 pc_menu_header.pl・・・・・(PC用メニュー・ヘッダーのカスタマズの設定)
 pc_order.pl・・・・・(PC用注文フォームのカスタマイズの設定)
 pc_order_f.pl・・・・・(PC用注文フォームのフッターの設定)
 pc_order_h.pl・・・・・(PC用注文フォームのヘッダーの設定)
 pc_top1.pl・・・・・(PC用TOP1の設定)
 pc_top2.pl・・・・・(PC用TOP2の設定)
 pc_width.pl・・・・・(PC用幅の設定)

たとえば、設定ライブラリーpc_color.plはPC用カートの色に関する設定ですが、システム設定よりもこちらが優先的に適用されます。逆に、pc_color.plをサーバから削除すると、システム設定が有効になります。

また、TOP1のぺージの内容を変更したい時は、pc_top1.plをテキストエディターで開いて編集してUPします。$top1_html =<<'END_OF_FILE';〜END_OF_FILEの中身を編集します。

PCtoMobileの場合は、設定ファイルshop_info.cgi、form_info.cgiが付属していますので、設定ライブラリーを使わなくてもかまいません。しかし、すでにシステム設定を行なっている場合は、設定ライブラリーを使うことにより、設定をし直すことなくデザインだけを瞬時に変更できます。

また、PCtoMobile以外では、WEB上から注文フォームのヘッダーとフッターをカスタマイズする機能はありませんが、他のカートでも設定ライブラリー(pc_order.pl、pc_order_f.pl、pc_order_h.pl)を使うことにより可能となります。

しかし、他の点でWEB上から設定できる機能がないものに関しましては、設定ライブラリーで利用可能となることはありません。

【注1】PCtoMobile-U(Unicode版)にテンプレートを用いる時には、ファイルをUnicode(utf-8)で保存し直してからからご利用ください。

【注2】PCtoMobile2でshop_info.cgi(PCtoMobile用)を利用した場合は、サンプルを参考にして、下記の初期設定を行ってください。(⇒ PCtoMobile2) 
  1. システム設定【2】一番下のaddress.cgiとlist2のパスの設定
  2. システム設定【5】クーポンの設定
  3. システム設定【7】在庫切れ商品の表示/非表示オプション3,4、日ごと在庫管理(下4つ)、及び、ボリュームディスカウントの設定
  4. システム設定【9】一番上の複数送付先、地域テーブル、地域ごとの送料無料金額、及び、ラッピングからアンケートまでの設定
  5. システム設定【17】その他4(ボリュームディスカウント)と予備1(在庫)の項目名の設定
  6. システム設定【30】変数$carousel_Rank_Dの追加
  7. システム設定【45】ランキングDの設定
  8. システム設定【51】一番下の地域ごとの配達所要日数の設定

ショッピングカートのカスタマイズの方法組み込まれているスタイルシート

7つに分割した外部スタイルシートが組み込まれています(【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・・・・・商品詳細説明部分のレイアウト
  8. html/css/top_mypage.css・・・・・マイページのレイアウト(PCtoMobile、Contents-Cart)
  9. html/css/order_form.css・・・・・注文フォームのスタイスシート(PCtoMoible)
上記のスタイルシートに含まれるクラス名、id名を用いることにより容易にページを作成できます。

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

スタイルシートに関する知識がある方の場合は、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で決定されています。これにより、システム設定【13】でメニューや全体的なレイアウトを作成するのが容易になります。
大幅な変更がない限りそのまま使うことができます。(スタイルシートについて良く分からない人はそのまま使うことをお勧めいたします。SEO対策のためにfloatを使用していますので、幅の調整をするとレイアウトが乱れる場合があります。)

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

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

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


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


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

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

商品一覧表のカスタマイズTOP1〜TOP5のスタイルシート

html/css/top_container2.css

TOP1〜TOP5に関するスタイルシートは、外部スタイルシートtop_container2.cssで定義されています。これにより、システム設定【30】〜【34】でのページ作成が容易になります。

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

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

float: left;
width: 519px;



</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

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

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

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

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


</div>
</div>

なお、画像のみの場合の画像サイズを変更したい時は、下記のようにcart_base.cssの103行目あたりに下記の1行を追加してください。

.image_only_cell img{width:100px;}


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で定義されています。これにより、システム設定【14】での詳細ページの作成が容易になります。

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

<div id='detail_customize'>
width: 728px;
  <table id='detailLeft'>
<tr><td>

float: left;
width: 376px;


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




</div>
</div>


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

html/css/detail_container.css

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

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

<div id='detail_container'>


</div>

携帯ショッピングカートのカスタマイズマイページのスタイルシート
html/css/top_mypage.css

TOP1〜TOP10でチェックした商品の履歴を記述する際に用いるスタイルシートです。記述例は次の通りです。

<div id='mypage' align='left'>

<div id='mypage_top'><span style='color:#ffffff;font-weight:bold;margin-right:15px;'>チェックした商品の履歴(ご利用方法は<a href='./shop.cgi?mode=mypage'><span style='color:#ffffff;text-decoration:underline;'>マイページ</span></a>で)</span></div>
<h2>最近チェックした商品</h2>
$mypage_goods_list
<h2>最近検索したキーワード</h2>
$mypage_keys_list
<h2>最近検索したカテゴリー</h2>
$mypage_class_list
<h2>最近購入した商品</h2>
$mypage_orders_list

</div>

なお、チェックした商品履歴の画像のサイズは標準では、一覧表の画像サイズと同じですが、変更したい時は下記のようにtop_mypage.cssの48行目あたりに下記の1行を追加してください。

.mypage_image_cell img{width:100px;}

【注意】マイページの管理や商品ページの下に表示される履歴のデザインもこのスタイルシートを使用しています。


携帯ショッピングカートのカスタマイズショッピングカートの幅を調整する方法
カートの幅を変更することは簡単ではありません。いろいろなところに変更を加えなければならないからです。
下記にその調整箇所を一覧表にしました。
※サイトの適切な幅に関してはこちらを参考にして下さい。
テンプレートのカートの幅の調整箇所
2カラムの場合最初 980px の例
メインを+α
3カラムの場合最初950px の例
中央を+α
サンプル α=20px の場合のサンプル α=50px の場合のサンプル
menu_header.css width: 980px ⇒980+α (2ヶ所)
width: 770px ⇒770+α (1ヶ所)
width: 776px ⇒776+α (1ヶ所)
width: 950px ⇒950+α (1ヶ所)
margin:767px ⇒767+α (1ヶ所)
cart_base.css width: 980px ⇒980+α (1ヶ所) width: 950px ⇒950+α (1ヶ所)
top_container2.css width: 770px ⇒770+α (1ヶ所)
width: 558px ⇒558+α (1ヶ所)
width: 250px ⇒220+α/2 (1ヶ所)
width: 540px ⇒540+α (2ヶ所)
width: 265px ⇒265+α/2 (1ヶ所)
goods_customize.css width: 379px ⇒379+α/2 (1ヶ所) width: 540px ⇒540+α (1ヶ所)
LeftとRightの%の調整
detail_customize.css width: 768px ⇒768+α (1ヶ所)
width: 370px ⇒370+α (1ヶ所)
width: 540px ⇒540+α (1ヶ所)
width: 520px ⇒520+α (2ヶ所)
classl_container.css width: 770px ⇒770+α (1ヶ所) width: 540px ⇒540+α (1ヶ所)
top_mypage.css width: 770px ⇒770+α (1ヶ所) width: 540px ⇒540+α (1ヶ所)
設定管理【4】 会員登録フォームの幅 768+α 会員登録フォームの幅 540+α
設定管理【13】 商品テーブルの幅 770+α
注文テーブルの幅 770+α
一覧表の画像の幅 ⇒ 140
width='980' ⇒980+α (1ヶ所)
width='690' ⇒690+α (1ヶ所)
商品テーブルの幅 540+α
注文テーブルの幅 540+α
width='950' ⇒950+α (1ヶ所)
width=630' ⇒630+α (1ヶ所)
width='560' ⇒560+α (1ヶ所)
設定管理【14】 1商品の表示幅(画像のみ)⇒ 197 列数(画像のみ表示) ⇒4
1商品の表示幅(画像のみ表示) ⇒適当に調整(130など)
設定管理【27】 お勧め商品の画像幅 ⇒ 140
お問い合わせの設定管理【5】 テーブルの幅 770+α テーブルの幅 540+α
画像top_bg.gif 幅の調整 980+α 幅の調整 950+α
画像main.gif 幅の調整 770+α 幅の調整 540+α
画像top2.gif 幅の調整 540+α


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

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

<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>

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


デザインの良し悪しは、用いる画像によっても大きく変わってきます。カート自体のデザインはシンプルにしておいて、画像で全体をグレードUPするのはとても賢明な方法といえるでしょう。


携帯ショッピングカートのカスタマイズ使用フォントの調整方法
フォントもデザインを大きく左右する大切な要因のひとつです。とくに、VISTA以降ではメイリオ(「明瞭」から来ている)が標準で搭載されています。メイリオはその名の通り、明瞭であるとの評価が高いフォントです。
しかし、横に長いフォントのためこれまでのデザインがかなり崩れてしまう可能性があります。特に、テキストボックスなどでメイリオを指定すると大きく乱れますので、その部分はメイリオにしないほうが賢明です。

上記の点を考慮して、最新版では、スタイルシートで第一フォントにメイリオを指定してもデザインが乱れないように配慮しました。また、これにより、ブラウザーの設定でメイリオを指定してもきれいに表示されます。
第一フォントにメイリオを指定したスタイルシートは、下記のように2箇所でメイリオを指定しています。メイリオの部分を削除すれば元のゴシック体に戻ります。

【menu_header.css】
body,td,p {
font-size : 13px;
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'MS Pゴシック', 'MS PGothic', sans-serif;
color: #555555;
line-height: 1.3;
}

/*Star Html Hack*/
* html body,td,p{font-family:'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;}
*:first-child+html body,td,p{font-family:'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;}
/*Star Html Hack*/

select,input {
font-size : 13px;
font-family: "MS Pゴシック", sans-serif;
color: #555555;
}


【cart_base.css】
#content body,td,p{
font-size : 13px;
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'MS Pゴシック', 'MS PGothic', sans-serif;
color: #555555;
}
/*Star Html Hack*/
* html #content body,td,p{font-family:'メイリオ', 'Meiryo', 'MS Pゴシック', 'MS PGothic', sans-serif;}
*:first-child+html #content body,td,p{font-family:'メイリオ', 'Meiryo', 'MS Pゴシック', 'MS PGothic', sans-serif;}
/*Star Html Hack*/

#content p {
text-align: justify;
text-justify: inter-ideograph;
}

/*テキストエリアのデザイン*/
#content textarea{
font-size : 13px;
width:80%;
color: #555555;
font-family: 'MS Pゴシック', sans-serif;
}
#content select, input {
font-size : 13px;
font-family: 'MS Pゴシック', sans-serif;
vertical-align:middle;
margin-top:2px;
margin-bottom:2px;
}
#content select {
height:20px;
}

XPとVista以降のフォント環境の違いも参照してください。


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: 158px;
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ボタンのデザインには、大きく分けて、3つの方法があります。それぞれに長所、短所があります。
  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="検索">


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


携帯ショッピングカートのカスタマイズFireFox対策(clearfix、Star Html Hack)
FireFoxがシェアを急速に伸ばして20%を超えていると言われています。それで、clearfixハックと呼ばれるFireFox対策のCSSをテンプレートのcart_base.cssの先頭に組み込んでみました。

clearfixハックには何種類かあるようですが、下記のものが一般的です。

/*clearfixハック*/
#content div:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
#content {display: inline-block;}
/* Hides from IE-mac \*/
* html #content {height: 1%;}
#content {display: block;}
/* End hide from IE-mac */

下記などを参照してください。
clearfixの決定版

また、width、padding、borderの解釈がIEとFireFoxでは異なるため、Star Html Hackといわれる手法を一部に採用しました。

/*Star Html Hack*/
* html #menu{width: 160px;}
*:first-child+html #menu{width: 160px;}
/*Star Html Hack*/

こちらに関しては下記をご覧ください。
Internet Explorer 7 CSS攻略法

また、Google Chrome が登場しました。そのスピードの速さが注目されています。FireFoxと大体同じ表示が得られます。しかし、やはり一部見辛いところがあります。
特に、selectボックスの高さは他とは異なり狭いようです。それで、下記のスタイルを追加して同じ表示になるようにしました。

#content select {
height:20px;
}

こちらも参考にしてください。
http://wb-i.net/advice.htm#browser

携帯ショッピングカートのカスタマイズ携帯CSSの採用
携帯電話の進歩に伴い各社ともほとんどの機種でスタイルシートが使えるようになってきました。しかしながら、PCとは異なり携帯のスタイルシートでは3キャリアの仕様の違いにより使用が著しく制限されます。

下記の大きな制限があります。 
1)ドコモではインラインCSSのみ使える。(リンクの色だけ例外)
2)ドコモではインラインCSSでも使用できるCSSは少ない。
 
それで、ドコモに合わせたデザインが必要になります。もっとも、携帯で必要なデザインはそれほど多くはありませんから、これでもまずまずのデザインが実現できます。それで、PCtoMobile Ver.13 〜 Contents-Mall Ver.13、Multi Mail Form Ver.4で、下記の1)〜6)をデザインに取り入れました。
 
なお、3キャリアのXHTMLの仕様は異なり、DOCTYPEも異なっています。さらに、i-modeおよびSoftBankでは、XHTMLが使用できない機種がまだほんの少しあります。プログラムではこれらを判別して適切なXHTML又はHTMLを出力しています。もちろん、XHTMLに対応していない古い機種ではCSSは無視されますから、デザインはCSSなしのデザインとなります。しかし、携帯でインターネットをする人はそんなに古い機種を使ってはいないことでしょう。

1)文字サイズの指定
多くの携帯サイトで文字サイズを小さくする傾向にあります。それで、各社の携帯で大きさを統一することが難しい状況ですが、機種ごとに文字サイズを指定できるようにしました。

システム設定【20】携帯の基本設定の、「文字を1段階小さくする」のところで機種ごとに指定できます。
また、ここで、1を指定すると、下記のように自動的に設定されます。

x-small/xx-small/x-small/12px (i-mode/AU/SoftBank/other(3キャリア以外)
の順)

2)文字の色の指定
文字の色、リンク関係の色をWEB上から指定できるようにしました。しかし、リンク関係の色指定は3キャリアで表示が異なっており同じ表示を実現するのは簡単ではありません。それで、背景色を黒にしたりする止むを得ない場合を除いては無指定にするほうが望ましいでしょう。

3)背景色付きの見出し
タイトルや見出しに背景を付けるだけでデザインや分かりやすさは飛躍的に向上します。この点で3キャリア共に同じ表示を実現できるように努力してみました。

4)spacer.gifを使った罫線
罫線は普通タグ<hr>を使いますが、3キャリアで表示を一致させることはむずかしく、上下のマージンを0にすることはできないようです。
それで、最近多く使われている下記の方法で罫線を表示しました。これにより柔軟な罫線表示が可能になります。

マージン0の高さ1pxの罫線:
<div style='background:gray;'><img src="./p_image/spacer.gif" width='1' height='1'></div>

5)spacer.gifを使ったスペース
限られた携帯画面では行間を適切に取ることは重要になります。それで、この場合も下記のような方法でスペースを確保しました。これにより改行ではできない行間の自由な設定ができます。

高さ5pxの行間のスペースの場合:
<div><img src="./p_image/spacer.gif" width='1' height='5'></div>

6)float:leftによる画像の回り込み
商品のサムネイル画像の回り込みは画面領域の節約と見やすいデザインのためにとても有効で、3キャリアともfloat:leftが使えるのでそれを利用しました。floatの解除は次のように行います。

<img src="" border='0' align='left' style='float:left;' />
・・・・・
<div style='clear:both;'></div>


【テストの方法】携帯やスマートフォンサイトのテストの方法

携帯ショッピングカートのカスタマイズスマートフォンのデザインのカスタマイズ(HTML5/CSS3)
iPhone,AndroidスマートフォンではHTML5/CSS3が利用可能になっており、これからのサイト作成はスマートフォンの場合、HTML5/CSS3が主流になるでしょう。それで、当社のカートでもHTML5/CSS3でデザインできるようにしました。これによりスマートフォンらしい表現を実現できます。

スマートフォンのためのデザイン用にsmartフォルダがあり、その中には、スタイルシートやJavaScript、plファイル、画像などが含まれています。

samrtフォルダの構成:
  cssフォルダ
    style.css・・・・・スマートフォン用CSS
    reset.css
  imagesフォルダ
    title.png・・・・・・スマートフォンのタイトル画像
    arrow.png
  jsフォルダ
    autoresize.jquery.js
    autoresize.js
    jquery.js
  home.pl・・・・・・・・スマートフォンのHOME
  top1.pl 〜 top5.pl
  form1.pl

ショッピングカートによりスマートフォン用に出力されるHTMLは下記のようになります(初期設定)。

<!DOCTYPE HTML>
<html lang="ja">
<head><meta charset="UTF-8">  (又は、Shift_JIS)
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=2.0,user-scalable=yes">
<link rel="stylesheet" href="smart/css/reset.css">
<link rel="stylesheet" href="smart/css/style.css">
・・・・・・・・
<script src="smart/js/jquery.js"></script>
<script src="smart/js/autoresize.jquery.js"></script>
</head>
<body style="background-color:#ffffff">
<div style="font-size:15px;" id="whole_style">
<h1 style='text-align:center;margin:0;'><img src="./smart/images/title.png" alt="・・・・"></h1>
<div id="content">
・・・・・・・・・

・・・・・・・・・
<script src="smart/js/autoresize.js"></script>
</div>
</div>
</body>
</html>

これでお分かりのように、スマートフォン画面のデザインは、スタイルシートstyle.cssで指定できます。reset.cssは機種間の差異をなくすためのものです。

smart/css/reset.css
smart/css/style.css
style.cssには、ショッピングカートの基本デザインとHOME、TOP1〜TOP5、問合せフォーム のデザインを定めるスタイルシートが含まれています。主に、ボタンやリンクの領域の大きさが指定されており、タップし易い画面を実現するために用いられています。CSS3により、リストビュ−や角丸、シャドウボックスなどを取り入れることができます。

また、smartフォルダに含まれている**.plファイルを編集することにより、HOME、TOP1〜TOP5、問合せフォームをHTML5で自由にカスタマイズできます。これは、テキストエディターでもできますし、、システム設定【20】からスマートフォンサイトの編集をWEB上からもできます。

また、スマートフォン画面のタイトル画像smart/images/title.pngで、サンプル画像(PNG画像)の横幅は320pxになっています。タイトル画像をお店用に変更する時にはFTPソフトによりUPして上書きして下さい。

また、含まれているJavaScriptは、TEXTAREAのリサイズ機能を実現するためのものす。それ以外には、カルーセル表示のためにjQueryを利用しています。⇒ カルーセル表示

文字コードはUTF-8(初期値)又はShift_JISを選択できるようにしました(PCtoMobile-Uniocde版はUTF-8のみ)。HTML5では、UTF-8が推奨されていますが、Shift_JISでも問題なく動きます。まだ日本ではShift_JISの方が便利な場合が多く、Shift_JISでないと困る場合もあります。しかし、特に、Shift_JISでなければならない理由がなければ、UTF-8を用いることができます。変更する時はk_shop_pl/design.plの5行目で設定してください。

【注意】クレジット決済代行会社の多くはUTF-8に対応していないため、注文完了画面だけ常にShift_JISで出力されるようにしてあります。こうすることにより、決済画面でPCと携帯とスマートフォンで文字コードを統一できます。

文字のサイズや表示スケールはシステム設定【20】の「文字を一段階小さくする」のところで設定できます。初期値は、15pxになっていますが、たとえば、14pxにしたいときは下記のように設定します。
x-small/xx-small/x-small/14px:1.0:1.0:2.0
また、ショッピングカートの各ページの「見出しのデザイン(色)」は携帯と共通でシステム設定【20】で設定できます。

商品画像についてですが、これは、携帯用にシステム設定【20】で設定したサイズを自動で約1.5倍に拡大して表示されます。
  • サムネイル画像の場合は、1.5倍(75px→→→105px)
  • 拡大画像の場合は300pxで表示
  • サムネイル画像は50px固定(PCtoMobile〜Contents-Mallの場合)
PCtoMobile〜Contents-Mallの場合、スマートフォンの性能と画像の解像度の向上に合わせて、商品画像は実寸で読み込み、300pxで表示します。こうすることにより、ズームアップしたときにも画像がきれいに見えるようになります。(一方、携帯の方はこれまで通り、ImageMagickで適切なサイズにリサイズして表示されます。)

また、スマートフォンの商品一覧表では画像のみの表示になります。その際のスタイルは、style.cssの最後の部分にあるクラス名GoodsDispalyで定義されています。全体の高さは初期値145pxですが、画像のたてのサイズに合わせて変更してください。表示される商品件数は、システム設定【20】で設定される約2倍で3の倍数になります。設定が10の場合には、18個表示されます。

さらに、携帯用の絵文字や半角カタカナについてですが、絵文字は自動でカットされ、半角カタカナはすべて全角カタカナに変換されて出力されます。それで、たとえば携帯用の商品説明に半角カタカナが含まれていても全角カタカナに変換されます。

また、PC・スマートフォン・タブレットでPCサイト表示/モバイルサイト表示の切り替え機能を搭載しました。display=pc、又は display=mobileとして呼び出すことにより表示を切り替えることができます。

サンプルでは、スマートフォンサイトのトップページの下の方に下記を追加しています。
 smart/home.plファイル:
   <li><a href="./index.cgi?display=pc">PCサイトを表示する</a></li>

また、PCサイトの下に、システム設定【13】のカスタマイズのところで、下記を加えてあります(スマートフォン及びタブレットのときのみモバイル表示になりまが、PCでは機能しません)。
   <a href='./index.cgi?display=mobile'>モバイルサイト表示(スマートフォン用)</a>

index.cgiの代わりに、shop.cgi?display=pc、又は display=mobileとして表示を切り替えることも出来ます。
さらに、スマートフォンの場合、PCのHOMEで自動的にMobile表示に戻ることが出来ます。

注)スマートフォンサイトをIE9で見る場合の注意点があります。標準モードで見る場合は問題ないのですが、IE9の互換モードでスマートフォンサイト(HTML5、CSS3)を見ると正しく表示されないことがあります。また、IE9は CSS3のグラデーション には対応していません。

スマートフォンの場合にはタップし易い表示が売り上げにつながることは言うまでもありません。しかし、どうしてもPCサイトと比べると情報量が少なくなってしまいます。それで、スマートフォンでPCサイトを閲覧したいという方も多くおられます。この切り替え機能はそうした要望に応えるものとなります。

※HOME、TOP1〜TOP5の6ページに加え、特定商取引法、購入方法のページで合計8ページ作成できます。携帯やスマートフォンサイトの作成のポイントは1ページを長めに作成することです。その方が使い勝手がよくなるからです。それで、この8ページに全てを納めるようにする(詰め込む)ことは大変良い方法といえます。

【テストの方法】携帯やスマートフォンサイトのテストの方法



Copyright (C) 2013WEBインベンター All rights reserved.