このエントリーをはてなブックマークに追加
SEOTOOLSロゴ画像

SEOTOOLSニュース 

SEOに関連するニュースリリースを公開しております。
最新のサービス情報を、御社のプロモーション・マーケティング戦略の新たな選択肢としてご活用下さい。

PCtoMobile 、Contents-Cart Ver.13のリリース

PCtoMobile(ピクトモバイル) Ver.13、Contents-Cart Ver.13のリリースのお知らせ。
PC&携帯連動のショッピングカートPCtoMobile(ピクトモバイル) Ver.13、Contents-Cart Ver.13を
リリースいたしましたのでお知らせいたします。このバージョンUPは携帯ショッピングカートのデザインの
大幅な改善を実施したものです。 また、Unicode版では携帯電話でもUTF-8で出力するようにしま
した。

このバージョンUPは下記のショッピングカートで実施いたしました。
PCtoMobile Ver.13.00
PCtoMobile-2 Ver.13.00
PCtoMobile Unicode Ver.13.00
Contents Cart Ver.13.00
Contents Mall Ver.13.00

詳しくは下記をご覧ください。

1.携帯CSSの使用に関する方針
2.文字サイズの指定
3.文字の色の指定
4.背景色付きの見出し
5.spacer.gifを使った罫線
6.spacer.gifを使ったスペース
7.float:leftによる画像の回り込み
8.Unicode版の改良

なお、サンプルはこちらでご覧になれます。携帯電話で実際にご覧になれば絵文字も含めてより一層
良さが分かると思います。
http://wb-i.net/spf_ex.htm
http://wb-i.net/template.htm#css


━━━━━━━━━━━━━━━━━━━━━━━━━━━
1.携帯CSSの使用に関する方針
━━━━━━━━━━━━━━━━━━━━━━━━━━━
携帯電話の進歩に伴い各社ともほとんどの機種(現時点で約90%)でスタイルシートが使えるように
なってきました。しかしながら、PCとは異なり携帯のスタイルシートでは3キャリアの仕様の違いにより
使用が著しく制限されます。下記の大きな制限があります。

1)ドコモではインラインCSSのみ使える。(リンクの色だけ例外)
2)ドコモではインラインCSSでも使用できるCSSは少ない。

それで、ドコモに合わせたデザインが必要になります。もっとも、携帯で必要なデザインはそれほど多く
はありませんから、これでもまずまずのデザインが実現できます。それで、下記の2〜7をデザインに取
り入れました。

なお、3キャリアのXHTMLの仕様は異なり、DOCTYPEも異なっています。さらに、i-modeおよび
SoftBankでは、XHTMLが使用できない機種がまだ約15%ほどあります。プログラムではこれらを
判別して適切なXHTML又はHTMLを出力しています。もちろん、XHTMLに対応していないかなり
古い機種ではCSSは無視されますから、デザインはCSSなしのデザインとなります。しかし、携帯で
インターネットをする人はそんなに古い機種を使ってはいないことでしょう。

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

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

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

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

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

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

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

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

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

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

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

━━━━━━━━━━━━━━━━━━━━━━━━━━━
8.Unicode版の改良
━━━━━━━━━━━━━━━━━━━━━━━━━━━
携帯の場合は、DoCoMo、SoftBankの最近の機種ではutf-8が使えます。しかし、AUではShift_JISのみ
が使える仕様となっています。それで、PCtoMobileのUnicode版Ver.13.00では、下記のように文字コード
を機種ごとに振分けて出力します。

1)DoCoMo、SoftBankの最近の機種:UTF-8
2)AU、及びDoCoMo、SoftBankの旧機種:Shift_JIS
3)3キャリア以外、及びPCからのアクセス:UTF-8

という訳で、DoCoMo、SoftBank、AUの3キャリアに対応し、かつ、Unicode対応の海外の携帯電話の
多くに対応しているはずです。


なお、バージョンUPに際しては下記の手順を参考にしてください。
(新バージョンのカートをダウンロードするために再注文する必要はありません。*****13.LZHでダウンロード
できます。)
http://wb-i.net/advice.htm#up


皆様のご意見を取り入れながらさらに優れたシステムを開発して行きたいと思います。ご指導の程、よろしく
お願いいたします。

--------------------------------------------------------------------------
[ 会社紹介 ]
WEBインベンター
ホームページ http://wb-i.net/ 

ショッピングカートCGIスクリプト(perl言語による)を中心に開発を進めており、PC&携帯対応ショッ
ピングカートを格安で配布しています。

当社開発のショッピングカートSPシリーズは すべての設定をWEB上からでき、管理も充実していま
す。PC&携帯対応はもちろん、SSL、クレジット・コンビニ決済(クロネコ@ペイメント、イプシロン、
ZEUS、NP後払い-NPコネクトライト)にも対応しています。自社アフィリエイトプログラム付きのショッ
ピングカートや、A8.net、moba8.net(携帯アフィリエイト)対応の、さらには、デジタルコンテンツ販売
用のショッピングカートも提供中。


--------------------------------------------------------------------------
[ お問合せ先 ]
本件に関するお問合せは、下記までお寄せ下さい。
--------------------------------------------------------------------------
■■□ プログラム開発 WEBインベンター
■□ URL:http://wb-i.net/ 
□ MAIL:info@wb-i.net 
--------------------------------------------------------------------------
valuepressリリースへ
SEOTOOLS News Letter

SEOに役立つ情報やニュース、SEOTOOLSの更新情報などを配信致します。


 powered by blaynmail
SEOTOOLSリファレンス
SEO対策
SEOの基礎知識
SEOを意識したサイト作り
サイトマップの作成
サイトの登録
カテゴリ(ディレクトリ)登録
カテゴリ登録(モバイル
検索エンジン登録
テキスト広告
検索連動型(リスティング)広告
プレスリリースを利用したSEO


TOPへ戻る