【 ショップサーブ 】以前考案設置した「 Info Box 」の進化系

以前にオリジナルで考案・設置したInfo Boxという
固定配置の案内板みたいなものですが、
前回の記事から一年とちょっと過ぎまして
進化系になりましたので、その意図と設置方法を。。

まずどのように変化したかといいますと・・・(下記画像を参照)

※各画像の右下です

ページごとに表示される内容が若干異なるようにしてあり、
お買い物ガイド、各ソーシャルへのリンク、ページの先頭へボタンと3種類に分けてあります。

何故このような形にしたかといいますと、
必要なページに必要なものを適宜表示したいということです。

カート画面ではページの先頭へボタンとか、ソーシャルリンクは不要と判断して
お買い物ガイドのみ表示。
トップページのみページの先頭へを除く2種類の表示。
商品ページ、コンテンツページは3種類ともに表示するようにしてあります。

以前は送料とかお支払い方法などを
Info Boxにまとめて表示していましたが、
お買い物ガイドとして、より多くのコンテンツをまとめたページを作りました。

こんな感じのページです↓

お買い物ガイドをクリックすると別ウインドウで表示するようにしました。
実際に試してみる場合はトップページからどうぞ。

そしてソーシャルリンクを設置した理由については、
最近の流れでいきますと設置しておいたほうが良いということです。
ショップサーブでは商品ページのカゴ周りのみ
機能的に設置できますが、どの位置でもクリックできる方が
利用しやすいかなと思いました。

また前回の記事ではIE6対策でスクリプトを利用して表示するように
していましたが、もうすこしするとIE6は撲滅しそうですので、
下の記事を参照↓
http://japanese.engadget.com/2012/03/06/ie-6-7/
CSSのみで今回は作っています。

さて実際の設置方法ですが、今回は3種類を固定配置にしてありますが、
やり方は前回のエントリーと同様です。

スタイルシートの position プロパティで fixed を指定。
位置を指定。(top left など)

もうひとつは他の要素と重なった時の見え方ですが、
常に他の要素より上(手前?)に表示するならば z-index も指定したほうがよいです。

3種類を固定配置するのに適度な間隔を取るため
3つの要素のうち真ん中の要素でマージンを指定して調節します。

さて、問題は今回のように、必要なページで表示内容を振り分けているわけですが、
実は単純なことで、全てのページに表示したい、お買い物ガイドは
ヘッダとSEOの設定 → フッタのバナーエリア に内容を追加。
うちの場合なら ↓

※この部分はショッピングカートでも表示されます

次にソーシャルブックマークの要素ですが、
ショッピングカート画面では必要ないので、
ページ編集 → サイドバー用フリーエリア に内容を追加。

ちなみに、ソーシャルブックマークの表示には
忍者おまとめボタン を利用しています。
これは本当に便利ですし簡単に好みのものが設置できます。

※サイドエリアはカート画面では表示されないので、そこに追加します

最後にページトップへ戻るの要素ですが、
私の場合はもともとショップサーブでリンクとしてついているものを
スタイルシートで固定配置に変換しています。(前回の記事を参照)

※この場合、トップページ・カート画面では表示されません

もしトップページにも先頭へ戻るを表示するのであれば、

上記の内容を
ページ編集 → センター用フリーエリア1 などのトップページのみ表示される箇所に
追加するだけで大丈夫です。(ただし固定配置にしてある場合)

もうひとつ、お買い物ガイドを別ページで作るのをお忘れなく・・・

以上で、進化系Info Boxの完成です!

※ご自分で設置される場合はご自由にどうぞ~
 ホームページ制作代行業者さんなどで営利目的で設置する場合は
 必ず事前に連絡してください。(もちろん無償です)

:: スポンサーリンク ::

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)