そば富泉のHPに新しく設置した「 Info Box 」なるものと設置方法

運営しているショップ そば富泉 のホームページ上で
新しい試みをはじめました。

名づけて Info Box

自分がネットショッピングをして買い物をしようとするときに、
まあ、気になるのが「 送料 」「 お支払い方法 」
そして何度か買い物をしているところとか、
ページをあちこち見ていたり、すでに買い物かごに商品をいれているときに
確認したり、ログインしたりしたいのが、
「 カート 」「 マイページ 」そして、
ページの先頭へ戻るボタンです。

これは人により多少のバラつきはあるかもしれませんが、
それなりに目についていても不要なものではないかなと・・

ショップさんによっては、それらの情報が見つけにくかったり、
あっても、ページの先頭へ戻るか、サイドエリアの分かりづらいところだったり、
フッター部分だったりと、あちこちで不便な思いを個人的に
することが多々あります。

そこで、今回考えついたのが Info Box です。

必要であれば、項目を増やすことも減らすことも出来ますし、
何か重要な告知がある時なんかも便利かもしれません。

当店では実験的に設置を開始しましたが、
どうやっているの?

っというかたも、もしかしたらいらっしゃるかもしれませんので、
設置方法を記しておきます。

ショップサーブとか他のサーバーなんかでも
実は意外に簡単に設置できますが、
毎度毎度やってくれてしまう、IE6 だけは対応していないので、
JavaScriptを使って表示するようにしました。

IE6を無視するなら、CSSのみで簡単にできるのですが・・

CSSだけでやる方法もありますが、
ちょっと複雑になりますし、数年したときにIE6が撲滅したときに
変更すること無く、JavaScriptだけ抜けば良いようにと思い、
今回の方法を選択しました。

ではでは・・

CSSの指定は↓

上記CSSでz-indexを指定していますが、必要に応じてと書いてありますけど、
だいたいのサイトの場合は画像を使っていると思われますので、
常に前面に表示したい場合は指定したほうが良いです。(多い数値で)

ちなみに、IE6では上記のバックグラウンドの指定で画像にすると
背景がついてこないので多少ちらつきますが、
画像ではなく背景色にするとちらつきません。

上記のCSSで背景を色指定にする、
またはボーダーを入れるとか背景無しとか・・↓

・・・・っといいながら私は画像を指定しいていますが・・ 笑
う~ん、なぜかちらつかない ^^;

実際に表示する箇所のHTML(XHTML) ↓

IE6で表示するための JavaScript ↓
こちらのページから jquery.exfixed.js をダウンロード

jquery も使用するので、他で使っていなければダンロード

jquery と ダウンロードした jquery.exfixed.js を読み込み、
対象要素(ここの例では #box1)に対し exFixed() メソッドを実行します。

※上記のスクリプトはIE6でも固定配置を実現させるためのものです。
IE6を無視するのであれば必要ありません ^^;

これで、完璧なはずです。

一般的なブラウザでは固定されて表示されます。

応用すると、右上に固定とか、左下に固定とか、
横幅を100%指定にしてフッターにベッタリ固定とか。。

告知とかだったら、ページ上部に横幅一杯になるようにしてアピールとか ^^;

使い道は考え方次第でありそうですよ。

今回の設置で大変参考にさせていただきました。 ありがとうございます。

※設置されるかたおりましたらコメントをいただけると嬉しいです~ ^^*

posted by そば富泉

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