快適通販

今日の作業はこのショップをカスタマイズがメインだった。
今回は画面の表示サイズの横幅を縮小した。

今までは横幅は1024pxに合わせていた。
kaitekituhan1024

これは2月のリアルドロップシッピングの新サービス開始後にこのようにした。
旧サービスのときは横幅800pxに合わせていた。
何故、新サービス開始後に1024pxに合わせたのかというと新サービスでショップを作ると1024pxに合わせたショップが標準で作られるのでそれに合わせてカスタマイズしたからだ。
本当は800pxに合わせたかったのだが、800pxに合わせて作るとところどころで画面の表示がおかしくなってしまったため断念したのだ。

その後、リアルドロップシッピングの掲示板で画面サイズを変えやすくなったというお知らせがあったのだが、いまさら800pxに合わせるのも面倒だと放っておいたのだ。

が、1024pxに合わせても表示がいまいちの部分があり、自分で見ていても少しすっきりしていなかった。
一番右側の枠がじゃまだったのだ。
右側の枠を非表示にすると商品一覧を表示したときに間延びした感じになってしまうので表示にした。
しかし、右側の枠を表示可能にするとTOPページにも表示されるので、右側の枠に画像だとかを埋めないとTOPページの右側がスカスカになってしまう。
しかし、右側の枠に画像を埋め込みすぎると商品一覧を表示したとき、商品数が少ないときは真ん中部分がスカスカになってしまう。(右側の縦の長さに合わせてしまうため)
文章で書くとわかりづらいのだが、とにかくどれかに合わせると他の部分の表示が間延びしてしまうのだ・・・。

この数日、快適通販を自分で良く眺めて見て、やはり画面サイズを小さくしようと決心した。
ここらへんは自分の感覚なのだが、やはり横幅800pxが見やすいのではないかと思う。
快適通販のアクセルログを見るとこのサイトを見に来てくれる方のパソコンの画面サイズは、多い順に「1,024 x 768」、「1,280 x 800」、「1,280 x 1,024」の3つのパターンが一番多い。
「800 x 600」の方はほとんどいない。
それなのに横幅800pxに合わせるのもどうかとは考えた。
しかし、俺が家で使っているパソコン2台は「1,024 x 768」、「1,280 x 1,024」なのだが、このパソコンで横幅800pxで左右に余白があるページを見てもそれほど違和感がない。(このブログも横幅800pxだ。)

ということで横幅800pxへ変えてみた。
kaitekituhan800

無理やり右枠を付けるよりはこっちのほうが見やすいのではないかと思う。

横幅800pxに合わせるのに一番苦労したのは、商品ページで「クチコミ」を表示させたときキレイに表示させる部分。

ショップの管理ページでショップカスタマイズの商品ページを選択すると商品ページの表示設定ができる。
始めはこのような設定にしていた。
settei11
俺は商品ページでも右枠を使いたくなかったので「商品ページ共通ライト」を非表示にした。
そして、レフト200pxは固定値なので、センターサイズを「600px」、ライトを「0px」と設定して合計800pxとした。

しかし設定確定後、商品画面を見ると何故かおかしい。
gamen1
「商品説明」辺りが右側にはみ出てしまうのだ・・・。
いろいろ設定を変えてみて分かってきたことは、どうやら「クチコミ」を表示にするとおかしくなってしまう。
何故だろうと画面のソースで確認したら、クチコミ部分のタグが

<div id=”kuchikomiData” style=”width:710px;”>

となっていた。710pxで固定されている・・・・
センター部分は600pxで設定しているのにクチコミを表示させると710pxになってしまい、クチコミの上にある商品説明も横に伸ばされてしまうのだ・・・。

このくらいなら放っておいても良かったのかもしれないが、気になってしまったので、再度色々試してみた。
その結果、この方法ならうまくいった。
まず商品ページの設定をこのようにする。
settei2
まず、「商品ページ共通ライト」を表示にする(「商品共通ライト デザインタグ設定」には何も入れない)
そして、センターサイズを「599px」、ライトを「1px」と設定した。

この設定で商品ページを表示させるとこのようになる。
gamen2
このように「商品説明」が右にはみ出なくなった。

ふ~っ、疲れた・・・・。