ショッピングカートのデザイン
ピクトモバイルの基本動作のテストが済んだら、今度はデザインに挑戦です。このページでは無料のテンプレートの使い方とデザインの簡単な調整方法を説明したいと思います。
デザインの設定手順
- スタイルシートの確認
- サイトの幅の調整
- 無料テンプレートの使い方
- スタイルシートの調整
- 画像のアップロード
- 携帯のデザイン
- スマートフォンのデザイン
- スライダーとカルーセル表示
- PC・スマートフォン・タブレットの表示の切り替え
スタイルシートは難しい！
ホームページビルダーでホームページは作れても、スタイルシートは分からないという人は少なくありません。もしそうであるならば、スタイルシートは当分の間いじらない方が良いかもしれません。既製品の洋服を作り直して着る人はまずいません。技術がなければかえって変にしてしまうからです。当方もデザインは得意な方ではありませんが、それでもホームページビルダーで一からデザインするよりテンプレートをそのまま利用した方が少しはましだと思うからです。少なくとも、テンプレートより悪いデザインにはしないでほしいと願っています。とはいうものの、好みはみな違うのでお好きにどうぞ。
いよいよデザインに挑戦！
いよいよデザインに挑戦です。まず最初に、ショッピングカート用に用意された無料のテンプレートを使ってみましょう。それを少し調整するだけでよいなら、ラッキーですね。しかし、オリジナルのデザインにしたいなら少し技術が必要になりますね。それは時間をかけてゆっくり挑戦してください。
無料のテンプレートを使うと最初の設定が初期化されてしまいますので、最初の設定をメモしておくと良いと思います。再設定をしてもほんの少しですから問題ありませんね。
《組み込みスタイルシートの確認》
いくつかのスタイルシートはそれぞれどの部分のデザインを決めていますか？
PCtoMobileには外部スタイルシートがいくつかに分けて組み込まれています。それぞれ特定の部分のスタイルを決定しています。どれがどの部分のスタイルを決定しているかはメインサイトの組み込まれているスタイルシートのところに書かれていますのでそれを見ください。スタイルシートにはクラス名、id名というものがあって、それを使うと特定の箇所のデザインを指定できます。組み込みスタイルシートでどこにどんなクラス名、id名が使われているかをある程度見ておいてください。
《サイトの幅の調整》
サイトの幅を簡単に調整できますか？
サイトのデザインで一番頭を悩ませるのはサイトの幅の決定です。通常これを簡単に変更することは難しいでしょう。
しかし、PCtoMobileの最新版では、サイトの幅の自動リサイズ機能を搭載しています。
これにより、望みのサイトの幅に瞬時に変更できます。また、ブラウザーの幅に応じて自動で変化するリキッドデザインも可能になっています。・・・これまで大変頭を悩ませていたサイトの幅の問題から開放されます。
システム設定【13】「サイトの幅の自動リサイズ機能」のところで設定します。
サンプルで体験 ⇒ PCtoMobile
《無料テンプレートの使い方》
無料テンプレートを使う際の注意点は何ですか？
ショッピングカート用無料のテンプレートが30以上用意されています。2カラムと3カラムのものです。最近では画面がワイドになってきて多くのサイトで幅1000pxぐらいになってきました。もしお好みのデザイン、又はそれに近いものがありましたら、それを使えは早くデザインを完成させることが出来ます。
無料テンプレートの使い方をよく読んでから使ってください。このテンプレートを使う場合の注意点があります。それは、含まれているtempleteフォルダを使う場合です。これをUPするとシステム設定のいくつかの設定が効かなくなるということです。templeteフォルダ内の設定が優先されるからです。・・・・では、テンプレートを使ってみてください。うまく行きましたか。
《スタイルシートの調整》
スタイルシートの調整ができますか？
スタイルシートにはクラス名、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;
その画像のサイズなどを確認すれば、後は変更することが出来ますね。（もっとも、画像処理ソフトが必要になりますが、それはお持ちのことと思います。）
《スマートフォンのデザイン》
スマートフォンのデザインで特に考慮すべきことは何ですか？
スマートフォンの性能はＰＣ並みですから、携帯のように制限されているタグやＣＳＳはありません。その点ではむしろＰＣよりも進んでいて最新のHTMLやCSSが使えるようになっています。スマートフォンで特に考慮すべき点はやはりタッチパネルによる操作であるということでしょう。それで、PCtoMobileではHTML5/CSS3を採用し、タップし易い表示を実現しました。
詳しくは、スマートフォンのデザイン（HTML5/CSS3）をご覧ください。
また、スマートフォンの場合にはタップし易い表示が売り上げにつながることは言うまでもありませんが、どうしてもPCサイトと比べると情報量が少なくなってしまします。それで、スマートフォンでＰＣサイトを閲覧できるようにもなっています。
《スライダーとカルーセル表示》
スライダーとカルーセル表示は簡単にできますか？
最近は、Flashに代わって、スライダーやカルーセル表示が流行しています。これは、jQueryの普及によるもので、特に全てのスマートフォンやタブレットで利用可能となっています。
PCtoMobileでは標準で高度なスラーダーとカルーセルを搭載していますので、PCとスマートフォンの両方に簡単に設置できます。さらに、PCtoMobile2では、ランキングのカルーセル表示機能も搭載していますので、システム設定で商品番号を設定するだけで望みの商品をカルーセル表示できます。
詳しくは、スライダーとカルーセルを標準搭載をご覧ください。
《PC・スマートフォン・タブレットの表示の切り替え》
タブレットはPCサイト、それともスマートフォンサイト、どちらを見ますか？
PCとスマートフォンとならなんで、タブレットも急速に普及してきました。タブレットの画面サイズは7～10インチといろいろあります。画面サイズに合わせたタブレット専用のサイトまでは準備できませんね。
PCサイトとスマートフォンサイトを切り替えて閲覧できるなら便利ですね。そうするなら、PCサイトの情報量を生かせますし、スマートフォンサイトのタップし易さも生かせます。それで、PCtoMobileでは、PC・スマートフォン・タブレットでＰＣサイト表示/モバイルサイト表示の切り替え機能を搭載しました。
詳しくは、PC・スマートフォン・タブレットの表示の切り替え機能をご覧ください。
スタイルシート
スタイルシートは情報とデザインを完全に分離する画期的な技術ですね。 しかも、少しの情報量でかなり変化にとんだデザインを可能にします。是非、マスターしたいと思います。まず、知っておきたいことは、設定の優先順位でしょう。まず、後に書いたものが優先されること、さらにクラス名よりid名の方が優先されること。そして、タグ内に直接書き込んだものが最優先されますね。あまり使いたくないですが、どうしてもだめな時はこの手を使います。
デーブルによるレイアウト
スタイルシートの考え方からすればテーブルでレイアウトを組むことは正しくありません。しかし、テーブルによるレイアウトはなかなか崩れないという長所があります。それで、CSSとテーブルによるハイブリットのデザインを組むことがあります。注意すべき点は論理的な強調が正しくなされるようにするということです。デザインを取り払った時、ページの論理的な構成が正しくなるようにするということです。
画像処理ソフト
デザインに欠かせないのが画像処理ソフトです。適切な画像を使うとそれだけで見栄えが格段に良くなります。デザインの専門家ならPhotoShopを使うでしょうが、高くて手が出せませんね。ホーページビルダーに付いているウエブアートデザイナーかPaint Shop Proなど安いもので何とか我慢しましょうか。
ただ、覚えておきたいのは画像でかなり変わるということです。ショッピングカート自体のデザインはシンプルにしておいて、画像で全体をグレードＵＰするのはとても賢明な方法なのです。
オリジナルデザインの組み込み
ピクトモバイルにはオリジナルのデザインも組み込むことが出来ます。たとえば、テンプレートモンスターなどでは優れたテンプレートが安く購入できます。そうしたテンプレートも組み込むことが出来ます。その方法に関しましては、デザインのカスタマイズ方法のところを参考にして下さい。