カートのデザイン/ ショッピングカートPCtoMobile(WEBインベンター開発)の設置の仕方を分かりやすく解説!

ショッピングカートのデザイン

ピクトモバイルの基本動作のテストが済んだら、今度はデザインに挑戦です。このページでは無料のテンプレートの使い方とデザインの簡単な調整方法を説明したいと思います。

デザインの設定手順

スタイルシートは難しい!

ホームページビルダーでホームページは作れても、スタイルシートは分からないという人は少なくありません。もしそうであるならば、スタイルシートは当分の間いじらない方が良いかもしれません。既製品の洋服を作り直して着る人はまずいません。技術がなければかえって変にしてしまうからです。当方もデザインは得意な方ではありませんが、それでもホームページビルダーで一からデザインするよりテンプレートをそのまま利用した方が少しはましだと思うからです。少なくとも、テンプレートより悪いデザインにはしないでほしいと願っています。とはいうものの、好みはみな違うのでお好きにどうぞ。

いよいよデザインに挑戦!

いよいよデザインに挑戦です。まず最初に、ショッピングカート用に用意された無料のテンプレートを使ってみましょう。それを少し調整するだけでよいなら、ラッキーですね。しかし、オリジナルのデザインにしたいなら少し技術が必要になりますね。それは時間をかけてゆっくり挑戦してください。

無料のテンプレートを使うと最初の設定が初期化されてしまいますので、最初の設定をメモしておくと良いと思います。再設定をしてもほんの少しですから問題ありませんね。

《組み込みスタイルシートの確認》

いくつかのスタイルシートはそれぞれどの部分のデザインを決めていますか?

PCtoMobileには外部スタイルシートがいくつかに分けて組み込まれています。それぞれ特定の部分のスタイルを決定しています。どれがどの部分のスタイルを決定しているかはメインサイトの組み込まれているスタイルシートのところに書かれていますのでそれを見ください。スタイルシートにはクラス名、id名というものがあって、それを使うと特定の箇所のデザインを指定できます。組み込みスタイルシートでどこにどんなクラス名、id名が使われているかをある程度見ておいてください。

《無料テンプレートの使い方》

無料テンプレートを使う際の注意点は何ですか?

無料テンプレート

ショッピングカート用無料のテンプレートが30以上用意されています。2カラム(幅950px)と3カラム(幅1000px)のものです。最近では画面がワイドになってきて多くのサイトで幅950pxぐらいになってきました。もしお好みのデザイン、又はそれに近いものがありましたら、それを使えは早くデザインを完成させることが出来ます。
無料テンプレートの使い方をよく読んでから使ってください。このテンプレートを使う場合の注意点があります。それは、含まれているtempleteフォルダを使う場合です。これをUPするとシステム設定のいくつかの設定が効かなくなるということです。templeteフォルダ内の設定が優先されるからです。それで、templeteフォルダをUPするかどうかは説明をよく読んでから決定してください。・・・・では、テンプレートを使ってみてください。うまく行きましたか。FireFoxや他のブラウザーでもテストしてみてください。

《スタイルシートの調整》

スタイルシートの調整ができますか?

スタイルシートにはクラス名、id名というものがあって、それを使うと特定の箇所のデザインを設定できます。ですから、組み込みスタイルシートでどこにどんなクラス名、id名が使われているかがわかればそこのデザインを変更することが出来るのです。
たとえば、送信ボタンのデザインを変更する場合を例に上げて考えて見ましょう。ショッピングカートで送信ボタンのある画面を表示させて、そのページのソースを見てください。そうすると下記の記述が見つかります。
<input type="submit" value="*****" class='submit'>
送信ボタンがクラス名class='submit'で定義されていることが分かります。そして、このクラス名submitは外部スタイルシートcart_base.cssの約90行目辺りにあります。これを変更すればボタンのデザインは変わります。また、それを削除すればWindows標準のデザインになります。
もう一つ例を挙げましょう。それは幅の変更です。これは大変面倒です。多くの箇所が関係してくるからです。ですから、自信がないならやめておいてください。しかし、どうしても幅をもう少し増やしたいというのでれば、ショッピングカートの幅を調整する方法を参考にして下さい。
フォントを変更したい場合は、フォントの調整方法を参考にしてください。フォントによりデザインはかなり変わりますが、これも勉強が必要なところになります。

《画像のアップロード》

必要な画像を正しい場所にアップロードできますか?

タイトル画像などいくつかの画像は管理からアップロード出来るようになっています。しかし、画像ぐらいはFTPソフトでUPして下さい。正しく画像をUPロードするには画像のサイズとファイル名、そしてUPするフォルダを確認する必要があります。ブラウザーに表示されている画像を変更したい場合は、その画像を右クリックしてプロパティーを確認します。そうすると必要な情報が全て得られます。ファイル名を定めて同じフォルダにUPして上書きしてください。ブラウザーを1回更新するとUPした画像が表示されるはずです。
この同じ要領で画像が変更できない場合があります。それは背景画像です。画像が背景として設定されている場合はプロパティーで見ることが出来ないからです。たとえば、ヘッダーの背景画像を例にしてみましょう。この場合、menu_head.cssの60行目辺りに記述があります。
   background: #ffffff url(../images/top-bg.gif) no-repeat;
その画像のサイズなどを確認すれば、後は変更することが出来ますね。(もっとも、画像処理ソフトが必要になりますが、それはお持ちのことと思います。)

《携帯のデザイン》

携帯スタイルシートにはどんな制限がありますか?

携帯のデザインはPCほど簡単ではありません。といっても、もちろん、PCより単純なはずですね。ただ、使えるタグが制限されていることと、携帯機種により表示が異なることを考慮しなければならないのです。具体的には携帯CSSの採用のところに書いてありますので参考にしてください。やり方としましては、サンプルをまねてその通りにすることである程度のデザインが出来ると思います。
色やフォントサイズはシステム設定【20】で簡単に変更することが出来るようになっています。

《スマートフォンのデザイン》

スマートフォンのデザインで特に考慮すべきことは何ですか?

スマートフォンの性能はPC並みですから、携帯のように制限されているタグやCSSはありません。その点ではむしろPCよりも進んでいて最新のHTMLやCSSが使えるようになっています。スマートフォンで特に考慮すべき点はやはりタッチパネルによる操作であるということでしょう。それで、PCtoMobileではHTML5/CSS3を採用し、タップし易い表示を実現しました。
詳しくは、スマートフォンのデザイン(HTML5/CSS3)をご覧ください。
また、スマートフォンの場合にはタップし易い表示が売り上げにつながることは言うまでもありませんが、どうしてもPCサイトと比べると情報量が少なくなってしまします。それで、スマートフォンでPCサイトを閲覧できるようにもなっています。

《スライダーとカルーセル表示》

スライダーとカルーセル表示は簡単にできますか?

最近は、Flashに代わって、スライダーやカルーセル表示が流行しています。これは、jQueryの普及によるもので、特に全てのスマートフォンやタブレットで利用可能となっています。
PCtoMobileでは標準で高度なスラーダーとカルーセルを搭載していますので、PCとスマートフォンの両方に簡単に設置できます。さらに、PCtoMobile2では、ランキングのカルーセル表示機能も搭載していますので、システム設定で商品番号を設定するだけで望みの商品をカルーセル表示できます。
詳しくは、スライダーとカルーセルを標準搭載をご覧ください。

《PC・スマートフォン・タブレットの表示の切り替え》

タブレットはPCサイト、それともスマートフォンサイト、どちらを見ますか?

PCとスマートフォンとならなんで、タブレットも急速に普及してきました。タブレットの画面サイズは7~10インチといろいろあります。画面サイズに合わせたタブレット専用のサイトまでは準備できませんね。
PCサイトとスマートフォンサイトを切り替えて閲覧できるなら便利ですね。そうするなら、PCサイトの情報量を生かせますし、スマートフォンサイトのタップし易さも生かせます。それで、PCtoMobileでは、PC・スマートフォン・タブレットでPCサイト表示/モバイルサイト表示の切り替え機能を搭載しました。
詳しくは、PC・スマートフォン・タブレットの表示の切り替え機能をご覧ください。

ショッピングカート比較 デジタルコンテンツ販売 決済比較 レンタルショッピングカート ショッピングカートCGI 格言再考
童話の世界 格言集 サプリメント飲み方 じゃんけん 診断テスト カウンセラー オーディオシステム

CSS Template courtesy of DesignsByDarren