FC2ブログ
2010/01/16

Yahoo!ショッピング ヤフーストア構築でコンテンツの回り込みを防ぐ方法

お疲れ様です。
アルゴノーツの秋山です。

おかげさまで
ここのところクライアント様からのご提案案件を
多くいただいておりまして
連日こんな時間での投稿となってしまいました…

午前様といきたいところですが、
まだまだ私には早いようです(笑)


ですが、本当にうれしい限りです。
今回もご提案内容に共感いただき
感謝やお褒めの言葉をいただけたのが何よりの喜びです。


今できる最善を行えば
必ず売上を伸ばすことができます。
全力でお手伝いさせていただきますので
一緒にがんばりましょう!



さて、本題です。

既に過去のものとなってしまっていますが
2007年のヤフーショッピングリニューアル以来
ヤフーショッピングでは非常に優れたCMS(コンテンツマネージメントシステム)が導入され
ストア運営がだれでも簡単にできるようになりました。

また、カッチリCSS(Cascading Style Sheets)
検索エンジンに好まれやすい構成になっています。


そのため、
一部のストア様で、(リニューアル当初はそれはそれはひどいことに 笑)
商品ページなどメインのコンテンツが
回り込んでしまっているのを見かけます。

多くのストア様にとって
解決済みの話題で「釈迦に説法」かもしれませんが、
備忘録を兼ねて改善策を記載しておきます。



そもそもなぜそうなるかというと
CSSの仕様が原因です。


縦一列に用意されたHTMLコンテンツを
ブロックにわけ、特定のブロックを回り込ませることで
段組を作ることができます。

■通常はこのようにサイドナビの下にあるコンテンツがサイドナビの隣に表示されます。
CSS01.gif


しかしサイドナビとコンテンツの幅が
全体の幅を1pxでも超えると
収まりきらなくなり
行き場を失ったコンテンツは回り込みができなくなります。

■900px-200px=700pxの幅に無理やり701pxを入れると下にいってしまう。
CSS02.gif


そこで改善策に

・全体のページ幅を広げる
もしくは
・コンテンツに入れている画像の幅を狭くする

方法があります。
手っ取り早いのは全体のページ幅ですが、
あまり横に長すぎると
表示画面からはみ出てしまうおそれもあります。


特に、メーカー提供素材や
ヤフー以外の他の店舗から画像を
商品ページのコンテンツに入れたりすると
発生しがちです。


こうなることで恐ろしいのが
クリックしたときに
パッと何も無い画面が出てしまうので
せっかくきてくれたお客様を逃してしまう可能性が高くなってしまうことです。


定期的な商品ページのチェックと
予め、共通で使う素材の仕様をそろえておくことで
これを回避できます。



まだ、知識が乏しかったあの頃
「ん!?うぉーー!!真っ白になっちまったー!!」
とパニックになったものです。


それでは良いお休みを!
以上秋山でした。
スポンサーサイト



コメント

非公開コメント