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

スタイルシートでカスタマイズ

HOME

ショッピングカートCGIの
ダウンロードの申込み

サイトマップ


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

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

無料CSSテンプレートのダウンロード
無料テンプレートの利用方法
組み込まれているスタイルシート
カートに必須の共通スタイルシート
全体的なレイアウトの設定
ＴＯＰ１～ＴＯＰ５のスタイルシート
商品一覧表のスタイルシート
分類説明のスタイルシート
商品詳細ページの全体的なレイアウト
商品詳細説明の部分のスタイルシート
マイページのスタイルシート
ショッピングカートの幅を調整する方法 (サイトの幅の自動リサイズ機能ーリキッドデザイン)
スタイルシートの調整方法
使用フォントの調整方法
メニューを右に表示する方法
ボタンのデザイン
FireFox対策（clearfix、Star Html Hack）
携帯CSSの採用
スマートフォンのデザインのカスタマイズ（HTML5/CSS3）

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

無料CSSテンプレート（17個）のダウンロード

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

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

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

【２カラムのテンプレート】（2023年4月3日に更新。サイトの幅のリサイズ機能に対応。）

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	moss green	blue_orange	standard
yellow	moss green	blue_orange	standard
			標準回復用テンプレート

yellow.zip	mossgreen.zip	blue_org.zip	standard.zip

※幅の調整方法はこちら⇒ 幅を調整する方法
※スライドショーを設置する方法はこちら⇒ スライドショーを設置する方法

【無料テンプレートの構成と利用方法】（2019/2/26更新）
【1】無料テンプレートのファイル構成
　　readme.txt(このファイル)
　　html/css/(スタイルシート)
　　　　　/images/(画像ファイル)
　　　　　/template/(★設定ライブラリー)
　　smart/css/style.css（スマートフォン用スタイルシート）
　　calendar_set.pl（カレンダープログラム）
　　set_class_pl/（リサイズ用）
　　carousel/（リサイズ用）

【2】利用方法
下記のカートで利用できます。
　　PCtoMobile/2/PC/Unicode
　　Contents-Cart
　　Contents-Mall

フォルダごとそのままＵＰして上書きすることにより、デザインを変更することができます。
利用方法：
（１）フォルダごとそのままＵＰして上書きします。
（２）システム設定【13】「サイトの幅の自動リサイズ機能」を設定します。
　　　　　　　2カラムのテンプレートの場合、サイトの幅の最小値は960pxです（デフォルト）。
　　　　　　　　　　設定例：/auto/960/1920/
（３）設定ライブラリーを必要に応じて調整します（下記を参照）。

標準のデザインに戻すときは、「標準回復用の2カラムのテンプレート（standard）」を適用してください。（UP後、templateフォルダは不要ですので削除してください。）

【3】templateフォルダ（設定ライブラリー）の機能の活用法
テンプレートの設定ライブラリーをＵＰするとシステム設定のデザインに関する設定が無視され、設定ライブラリー（templateフォルダ）の設定が優先的に適用されます。

《templateフォルダ内の設定ライブラリー》
　　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_width.pl・・・・・（PC用幅の設定）
　　k_color.pl・・・・・（モバイル用色の設定）
　　pc_top1.pl・・・・・（PC用TOP1の設定のサンプル）
　　pc_top2.pl・・・・・（PC用TOP2の設定のサンプル）
　　k_home.pl・・・・・（ガラケー用HOIMEの設定のサンプル）
　　k_top1.pl・・・・・（ガラケー用TOP1の設定のサンプル）
　　k_top2.pl・・・・・（ガラケー用TOP2の設定のサンプル）
　　k_top3.pl・・・・・（ガラケー用TOP3の設定のサンプル）
　　k_form1.pl・・・・・（ガラケー用問い合わせの設定のサンプル）

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

また、TOP1のぺージの内容を変更したい時は、pc_top1.plをテキストエディターで開いて編集してＵＰします。$top1_html =<<'END_OF_FILE';～END_OF_FILEの中身を編集します。あるいは、pc_top1.plを削除してから、システム設定【30】「トップ１のページのHTMLの設定」を編集しますが、$top1_htmlの中身をコピーして利用することもできます。

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

組み込まれているスタイルシート

７つに分割した外部スタイルシートが組み込まれています（【36】デザインの設定）。それぞれが特定の部分のデザインを決めています。

html/css/cart_base.css・・・・・カートに必須のスタイルシート
html/css/menu_header.css・・・・・ヘッダー部分とメニュー部分など全体的なレイアウト
html/css/top_container2.css・・・・・TOP1～TOP5のページ
html/css/goods_customize.css・・・・・商品一覧表
html/css/class_container.css・・・・・分類説明
html/css/detail_customize.css・・・・・商品詳細画面全体のレイアウト
html/css/detail_container.css・・・・・商品詳細説明部分のレイアウト
html/css/top_mypage.css・・・・・マイページのレイアウト（PCtoMobile、Contents-Cart）
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'> 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>

※メニューを右に表示するには⇒メニューを右に表示する方法
※Amazon風のサイドメニューはmenu_header.cssの最後の部分のid名「HoverMenu」で調整できます。

ＴＯＰ１～ＴＯＰ５のスタイルシート

html/css/top_container2.css

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

スタイルシートは次のように設定されています。

メニュー及びトップ画面⇒説明図

id='container2'の中に、id='main2'のテーブルとid='side2'のテーブルが設けられています。
こうして、ＴＯＰ１～５のページのレイアウトが決定されており、そのテーブルの中でさらなるグロックやリンクや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

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

スタイルシートは次のように設定されています。

商品一覧表⇒説明図

id='goods_customize'の中に、id='goodsLeft'及びid='goodaRight'のブロックが設けられています。
こうして、商品一覧表の１商品のレイアウトが決定されており、それらブロックの中でリンクや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行目あたりに下記の１行を追加してください。

.image_only_cell img{width:100px;}

分類説明のスタイルシート

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: 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が再定義されています。

マイページのスタイルシート

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

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

ショッピングカートの幅を調整する方法

カートの幅を変更することは簡単ではありません。いろいろなところに変更を加えなければならないからです。
下記の表にその調整箇所を一覧表にしました。

また、サイトの幅の自動リサイズ機能を搭載しました。

2023/04/03更新《サイトの幅の自動リサイズ機能（リキッドデザイン）》

ショッピングカートの最新版に「サイトの幅の自動リサイズ機能」を搭載しました。システム設定【13】の所で幅のサイズやautoの設定をします。また、自動リサイズしない画面も指定できます。

この機能は、下記のカートに搭載されています。
　　　　PCtoMobile-PC/PCtoMobile/PCtoMobile2/PCtoMobile-Unicode
　　　　Contents-Cart/Mall

サンプル⇒ PCtoMobile2

この機能により下記のことが可能となります。
（１）1つの設定でサイトの幅とサイドメニューの幅を決定できます。
（２）autoの設定により、ブラウザーの幅に合わせて自動的に変化させることができます。これによりリキッドデザインを実現します。
（３）autoの設定の時にも、固定幅の画面を指定できます。

指定の方法（システム設定【13】）は下記のとおりです。
【指定方法】
（１）(サイトの幅)/auto/(サイトの幅の最小)/(サイトの幅の最大) /(注文フォームのカスタマイズ【52】のサイトの幅) /(左サイドのメニューの幅)/(メニューの高さ1～20)/(メニューの位置L/R)
（２）サイトの幅をpx単位で指定（横幅に関係する他の指定は無視される）。（デフォルトは980px）
（３）autoの時はブラウザーの幅で自動的にリサイズします。その時の最小値、最大値を指定。指定できるサイズの最小値960（メニューの幅が200pxの時）、最大値1920。
（４）注文フォームのカスタマイズ（システム設定【52】）が適用される画面では、autoは機能せず、サイトの幅だけが指定できます。
（５）※左サイドのメニューの幅を200pxから350pxの範囲で指定できます。（デフォルトは200px）
（６）メニューの高さは1から20段階まで指定できます。（デフォルトは6）
（７）サイドメニューの位置を左（L）又は右（R）に指定できます。（デフォルトは左）
※何も指定しないときは、この機能はoffとなり、幅に関係する他の指定が有効となります。

【自動リサイズしない画面の指定】
画面番号をコンマで区切ってして指定します。
　　画面番号：注文フォーム[1]、会員購入履歴[2]、会員登録フォーム[3]、カートの中[4]、口コミ情報[5]、
　　特定商取引法[6]、問合せフォーム[7]、商品詳細画面[8]、マイページ[9]、TOP1～10[10+n]。

リサイズ可能なサイトの幅は、960px～1920pxで、画像の幅や表示数は下記のようになります。

	最小値 (ﾒﾆｭｰ200px)	⇔	最大値 (ﾒﾆｭｰ200px)
サイトの幅	960px	1500px ﾒﾆｭｰ240px	1920px
商品一覧表（詳細表示）の画像の幅（1行の表示数は2～3個）	133px	142px (3個)	172px
商品一覧表（画像のみ）の画像の幅（1行の表示数は4～7個）	157px	220px (5個)	220px
詳細画面の商品の拡大画像の幅	327px	640px	最大927.5px 又は、実寸
TOPページの画像(左)	97px	157px	200px
TOPページの画像(右)	73px	113px	150px
メイン画像（NivoSlider）　横と高さの比率1000:300(2カラム)	幅750px 高さ225px	1250px 375px	幅1710px 高さ387px まで表示
カルーセル（閲覧履歴）の画像（画像サイズは幅140px）	130px 5個	152px (7個)	161px (9個)
カルーセル（ランキング）の画像（画像サイズは幅110px）	130px (5個)	131px (7個)	145px (9個)
お勧め商品の画像の幅	162px	220px	220px

※サイトの適切な幅に関してはこちらを参考にして下さい。

テンプレートのカートの幅の調整箇所
	２カラムの場合（最初 980px の例）（メインを+α）
サンプル	α=20px の場合のサンプル
menu_header.css	width: 980px ⇒980+α　（2ヶ所） width: 770px ⇒770+α　（１ヶ所） width: 776px ⇒776+α　（１ヶ所）
cart_base.css	width: 980px ⇒980+α　（１ヶ所）
top_container2.css	width: 770px ⇒770+α　（１ヶ所） width: 558px ⇒558+α　（１ヶ所） width: 250px ⇒220+α/2　（１ヶ所）
goods_customize.css	width: 379px ⇒379+α/2　（１ヶ所）
detail_customize.css	width: 768px ⇒768+α　（１ヶ所） width: 370px ⇒370+α　（１ヶ所）
classl_container.css	width: 770px ⇒770+α　（１ヶ所）
top_mypage.css	width: 770px ⇒770+α　（１ヶ所）
設定管理【４】	会員登録フォームの幅 768+α
設定管理【１３】	商品テーブルの幅 770+α 注文テーブルの幅 770+α 一覧表の画像の幅　⇒ 140 width='980' ⇒980+α　（１ヶ所） width='690' ⇒690+α　（１ヶ所）
設定管理【１４】	１商品の表示幅（画像のみ）⇒ 197
設定管理【27】	お勧め商品の画像幅 ⇒ 140
お問い合わせの設定管理【５】	テーブルの幅　770+α
画像top_bg.gif	幅の調整 980+α
画像main.gif	幅の調整 770+α
画像top2.gif

スタイルシートの調整方法

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

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

<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以降ではメイリオ（「明瞭」から来ている）が標準で搭載されています。メイリオはその名の通り、明瞭であるとの評価が高いフォントです。
しかし、横に長いフォントのためこれまでのデザインがかなり崩れてしまう可能性があります。特に、テキストボックスなどでメイリオを指定すると大きく乱れますので、その部分はメイリオにしないほうが賢明です。

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

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

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

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

【cart_base.css】
#content body,td,p{
font-size : 13px;
font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳＰゴシック', 'MS PGothic', sans-serif;
color: #555555;
}
/*Star Html Hack*/
* html #content body,td,p{font-family:'メイリオ', 'Meiryo', 'ＭＳＰゴシック', 'MS PGothic', sans-serif;}
*:first-child+html #content body,td,p{font-family:'メイリオ', 'Meiryo', 'ＭＳＰゴシック', '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: 'ＭＳＰゴシック', sans-serif;
}
#content select, input {
font-size : 13px;
font-family: 'ＭＳＰゴシック', sans-serif;
vertical-align:middle;
margin-top:2px;
margin-bottom:2px;
}
#content select {
height:20px;
}

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

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

スタイルシートを少し変更するだけで、メニューを右に移動することができます。

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

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

#menu{
float:right;
width: 196px;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0;
padding: 1px 0 0 0;
}

#content{
float:left;
width: 770px;
margin: 0;
padding: 0;
}

#HoverMenu .HoverLi div{
display: none;
position: absolute;
Z-index:10;
top: -59px;/*①開始TOP*/
right: 196px;/*②開始LEFT*/
margin: 0;
padding: 0 0 3px 0;
border: 1px solid #ccc;/*③枠線の太さと色*/
border-left: 1px solid #ccc;/*④左枠線の太さと色*/
background-color: #fff;/*⑤背景色*/
border-radius: 5px 0 0 5px;
}

ボタンのデザイン法

submitボタンのデザインには、大きく分けて、３つの方法があります。それぞれに長所、短所があります。

Windowsなどの標準のものをそのまま使う。
- 使い慣れている。
- ページのデザインに合わせることはできない。特に、Windows XP スタイル　や　Windows クラシックスタイル　によりデザインが変わる。
スタイルシートで調整する。
- 簡単に色などを変えることができる。
- 調整に限界がある（スタイルシートで背景画像を指定する方法もある）。
画像を使う。
- デザインを思いのままに行なえる。
- しかし、下手なデザインはかえってまずい。

したがって、デザインに自信があり、それにこだわるなら、画像を使うべきでしょう。デザインにそれほどこだわらないなら、標準のものが良いでしょう。色だけでも指定したいというときにはスタイルシートがぴったりですね。

【サンプル】

標準の場合：

この場合、外部スタイルシートの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の行間のスペースの場合：

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

・・・・・

<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】からスマートフォンサイトの編集をＷＥＢ上からもできます。

また、スマートフォン画面のタイトル画像は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倍に拡大して表示されます。

商品一覧表のサムネイル画像は112px～141pxの範囲で自動的にリサイズされる
他のサムネイル画像の場合は、1.5倍（75px→→→112px）
拡大画像の場合は画面サイズに応じて、300px～394pxで表示
詳細ページのサムネイル(10個)の画像は50px～68px

PCtoMobile～Contents-Mallの場合、スマートフォンの性能と画像の解像度の向上に合わせて、商品画像は実寸で読み込み、300px～394pxで表示します。こうすることにより、ズームアップしたときにも画像がきれいに見えるようになります。（一方、携帯の方はこれまで通り、ImageMagickで適切なサイズにリサイズして表示されます。）

また、スマートフォンの商品一覧表では画像のみの表示になります。全体の高さは画像のたてのサイズ+50pxとなります。表示される商品件数は、システム設定【20】で設定される約2倍で3の倍数になります。設定が10の場合には、18個表示されます。

【最新バージョンにおける画像変換処理(ImageMagick)の利用】
(1)PCとモバイルで画像変換処理の利用の選択
PCの場合：システム設定【13】【27】で、画像変換処理をしない場合はその部分でnoneを指定します。
　　①商品一覧表などのサムネイルの画像
　　②商品拡大画像
　　③詳細ページ内のサムネイル10
　　④おすすめ8商品
モバイルの場合：システム設定【2】で、画像変換処理をしない場合はnoneを指定します。
　　⑤サムネイルの画像

(2)画像変換処理を利用しない場合
ImageMagickが使えないサーバーを含め、全く使用しない場合は、下記の設定を変更してください。
　　set.plファイルの18，19行目を下記のように設定します。
　　　　$convert_use =0;#PC用
　　　　$convert_mb_use =0;#モバイル用

(3)ImageMagickのバグ（高負荷問題）に対応
ImageMagickが高負荷になり500エラーを起こすことが報告されていますが、この現象はマルチスレッド処理を行わないことで回避できます。最新バージョンではこの対策を施しました。

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

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

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

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

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

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

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

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

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

go to home

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