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

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

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

※何らかのテンプレートを用いたショッピングカートのカスタマイズ方法⇒ショッピングカートのカスタマイズ方法
※商品ページをHTMLで自由に制作したい場合⇒タグの貼り方
※PCtoMobile、Contents-Cart では、XHTMLに対応しています。XHTMLを使いたいときにはこちらをご覧ください。⇒HTMLからXHTMLへ
※PCtoMobile-U（Unicode版）にCSSサンプルを用いる時には、CSSファイルをUnicode(utf-8)に保存しなおしてからご利用ください。⇒Unicodeについて
ショッピングカートのカスタマイズの方法無料CSSテンプレート（36個）のダウンロード
下記はショッピングカートreserve〜Contents-Cartに対応したデザインの無料CSSテンプレートです。スタイルシートを自由にダウンロードしてお使いください。利用方法は下記をご覧ください。また、デザインの確認方法はこちらをご覧ください。⇒ 携帯やスマートフォンサイトのテストの方法

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

【２カラムのテンプレート】

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

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

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

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

《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をテキストエディターで開いて編集してＵＰします。$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）を使うことにより可能となります。

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

【注】PCtoMobile-U（Unicode版）にテンプレートを用いる時には、ファイルを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・・・・・商品詳細説明部分のレイアウト
  8. html/css/top_mypage.css・・・・・マイページのレイアウト（PCtoMobile、Contents-Cart）
  9. html/css/order_form.css・・・・・注文フォームのスタイスシート（PCtoMoible）
上記のスタイルシートに含まれるクラス名、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'で定義されています。背景画像がトップの画像（幅850px）になるように組み込んであります。その背景上にロゴや商品検索などを配置できます。
また、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>

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

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

スタイルシートは次のように設定されています。 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>

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

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

<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の４８行目あたりに下記の１行を追加してください。

.mypage_image_cell img{width:100px;}

【注意】マイページの管理や商品ページの下に表示される履歴のデザインもこのスタイルシートを使用しています。
携帯ショッピングカートのカスタマイズショッピングカートの幅を調整する方法
カートの幅を変更することは簡単ではありません。いろいろなところに変更を加えなければならないからです。
下記にその調整箇所を一覧表にしました。

テンプレートのカートの幅の調整箇所
２カラムの場合（最初 850px の例）
（メインを+α）		 ３カラムの場合（最初950px の例）
（中央を+α）
サンプル α=60px の場合のサンプル α=20px の場合
menu_header.css width: 850px ⇒850+α　（３ヶ所）
width: 653px ⇒653+α　（１ヶ所）
width: 667px ⇒670+α　（１ヶ所）		 width: 950px ⇒950+α　（１ヶ所）
margin:767px ⇒767+α　（１ヶ所）
cart_base.css width: 850px ⇒850+α　（１ヶ所） width: 950px ⇒950+α　（１ヶ所）
top_container2.css width: 640px ⇒640+α　（１ヶ所）
width: 425px ⇒425+α　（１ヶ所）
width: 205px ⇒205+α/2　（１ヶ所）		 width: 540px ⇒540+α　（２ヶ所）
width: 265px ⇒265+α/2　（１ヶ所）
goods_customize.css width: 316px ⇒316+α/2　（１ヶ所）
LeftとRightの％の調整(35%/60%)		 width: 540px ⇒540+α　（１ヶ所）
LeftとRightの％の調整
detail_customize.css width: 640px ⇒640+α　（１ヶ所）
width: 375px ⇒375+α　（１ヶ所）		 width: 540px ⇒540+α　（１ヶ所）
width: 520px ⇒520+α　（２ヶ所）
classl_container.css width: 640px ⇒640+α　（１ヶ所） width: 540px ⇒540+α　（１ヶ所）
top_mypage.css width: 640px ⇒640+α　（１ヶ所） width: 540px ⇒540+α　（１ヶ所）
設定管理【４】 会員登録フォームの幅 640+α 会員登録フォームの幅 540+α
設定管理【１３】 商品テーブルの幅 640+α
注文テーブルの幅 640+α
width='850' ⇒850+α　（１ヶ所）
width='550' ⇒560+α　（１ヶ所）
width='650' ⇒650+α　（１ヶ所）		 商品テーブルの幅 540+α
注文テーブルの幅 540+α
width='950' ⇒950+α　（１ヶ所）
width=630' ⇒630+α　（１ヶ所）
width='560' ⇒560+α　（１ヶ所）
設定管理【１４】 １商品の表示幅 318+α/2
１商品の表示幅（画像のみ） 147+α/4		 列数(画像のみ表示)　⇒4
１商品の表示幅(画像のみ表示)　⇒適当に調整(130など)
お問い合わせの設定管理【５】 テーブルの幅　640+α テーブルの幅　540+α
画像top_bg.gif 幅の調整 850+α 幅の調整 950+α
画像main.gif 幅の調整 650+α 幅の調整 540+α
画像top2.gif 幅の調整 540+α


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

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

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

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


デザインの良し悪しは、用いる画像によっても大きく変わってきます。カート自体のデザインはシンプルにしておいて、画像で全体をグレードＵＰするのはとても賢明な方法といえるでしょう。
携帯ショッピングカートのカスタマイズ使用フォントの調整方法
フォントもデザインを大きく左右する大切な要因のひとつです。とくに、VISTAではメイリオ（「明瞭」から来ている）が標準で搭載されています。メイリオはその名の通り、明瞭であるとの評価が高いフォントです。
しかし、横に長いフォントのためこれまでのデザインがかなり崩れてしまう可能性があります。特に、テキストボックスなどでメイリオを指定すると大きく乱れますので、その部分はメイリオにしないほうが賢明です。

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

【menu_header.css】
body,tr,td {
font-size : 13px;
font-family: 'メイリオ', 'MS UI Gothic';
color: #555555;
line-height: 1.1;
}
select,input {
font-size : 13px;
font-family: 'MS UI Gothic';
color: #555555;
}

【cart_base.css】
#content tr,td,p {
font-size : 13px;
font-family: 'メイリオ', 'MS UI Gothic';
color: #555555;
}
#content select,input {
font-size : 13px;
font-family: 'MS UI Gothic';
color: #555555;
}

※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ボタンのデザインには、大きく分けて、３つの方法があります。それぞれに長所、短所があります。
  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がシェアを急速に伸ばして２０％を超えていると言われています。それで、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の決定版

また、widｔｈ、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とは異なり携帯のスタイルシートでは３キャリアの仕様の違いにより使用が著しく制限されます。

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

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

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

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

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

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

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

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

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

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

６）float:leftによる画像の回り込み
商品のサムネイル画像の回り込みは画面領域の節約と見やすいデザインのためにとても有効で、３キャリアとも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=1.0,user-scalable=no">
<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で自由にカスタマイズできます。

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

また、含まれているJavaScriptは、TEXTAREAのリサイズ機能を実現するためのものす。それ以外にはJavaScriptは使用せず、動作の安定とスピード重視の設計になっています。

文字コードは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と携帯とスマートフォンで文字コードを統一できます。このように通常はUTF-8でHTMLを出力し、注文完了画面や問合せ完了画面の時にHTMLをShift_JISに切り替えて出力するこの方式は【特許出願中】です。

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

商品画像についてですが、これは、携帯用にシステム設定【20】で設定したサイズを自動で約1.5倍に拡大して表示されます。
  • サムネイル画像の場合は、1.5倍（75px→→→105px）
  • 拡大画像の場合は15/11倍（220px→→→300px）
さらに、携帯用の絵文字や半角カタカナについてですが、絵文字は自動でカットされ、半角カタカナはすべて全角カタカナに変換されて出力されます。それで、たとえば携帯用の商品説明に半角カタカナが含まれていても全角カタカナに変換されます。

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


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