ブログにfixedなツールバー
facebookに感化されてページのbottomにfixedなツールバーを付けた。
bottomにfixedなツールバー
facebookにも同じようなツールバー付いてますよね。これ、意外と便利なんですよね。最初はabsoluteでonscrollで追従してみたんですがガクガク感が気に食わなかったのでfixedにしてみました。IE6だけabsoluteも考えましたが、IE6のシェアがだいぶ落ち込んできたので完全にfixedに。
ツールバー設置の意図
もともとこのブログのユーザビリティの悪さたるやもちろん私も自認しております。当初のコンセプトが文章を読みやすく焦点が散らないという意図でこのブログを作ったわけですが、いささか敷居が高く、ページの端でページがめくれようなんて誰も気付かないですよね言われないと。ましてやマウスゼスチャーに対応してるなんて言われないとわからないし。
で、当初から見ていただいている読者さん以上に新規ユーザが増えてきたので、これはいかんなと思ってツールバーを設置した次第です。私個人での考えですが２カラムや３カラムは焦点が散るので嫌なんですね。それに文章の領域は横幅で740は確保したい。文章をゆったり見れる領域はやはりほしい。で、左側にweb-dockが付いてるわけなんですが、onmouseoverだと誤って表示されたときウザイというお言葉もいただき、onclickにしたら余計わけわからんと…。
ということでbottomにツールバーというのは非常に理解しやすくfixedであるため見過ごす可能性も最小限に抑えられているわけです。このbottomにfixedなツールバーは今後、Webサイトのデファクトになる予感。positionでbottomが使えれば実装は簡単ですが、クロスブラウザを考えるとjsでやるしかないのが現状ですよね。
ともあれ、ページビュー増加の一端を担ってくれるでしょう。アクセス解析の結果が楽しみ。
bottomにfixedなツールバー表示の仕組み
onload時にウィンドウの内縁サイズを取得してツールバーの高さを引いたpositionにtoolbarを表示させます。あとはonresize時にウィンドウのサイズをリフレッシュして再描画すればOK。簡単ですね。
簡単にbottomにツールバーを表示できるライブラリを作ろうかなと思ってます。
- しゅん
- しゅんさんfirefox3.0だと横スクロールバーが出てツールバーが隠れてますよ!!
ターゲットブラウザに入れていなかったのなら、すいませんっ。
- 和田
- 和田さん＞しゅんさま
ばかなっ！！！Firefoxでも動作は確認シタノニィイィイィィィ！！！ウィンドウのサイズ広げてもだめっすかね・・・。たぶん右上の和田の顔が邪魔して・・・！！！
- 金沢の木村
- 金沢の木村さんfirefox3.0ほんとだ～隠れてる(笑)
てか、これいいですね～！！！
今作ってるサイトに早速装備させて頂きます！！シャキーーン
御馳走様です！！
- 和田
- 和田さん＞金沢の木村さま
和田家のFirefox3.0～3.5（Mac含）で確認しましたが横スクロールは出ませんでした・・・。ひょっとしてキャッシュ！？ぜひご活用くださいっ！ちなみにさり気なく透明なんですよっ！
- Asmodeus
- AsmodeusさんFirefox3.0.11で横スクロールは出ませんでした～皆さんどういう条件で出てるのかな！？
ちなみに、こちらでは縦のスクロールバーをクリックするとページ移動しちゃうのでちょっと悩み中(^-^;
プラグインはNoscriptが入っていて、スクリプトOKにして表示しました。
- 和田
- 和田さん＞Asmodeusさま
画面サイズを小さくして見ると横スクロールバーに隠れちゃいますねぇ…。スクロールバーを判定して場所を変えるのも面倒ですし…。あ、そうでもないか…。よし！ちょっとやってみようかな！あと、なんちゃってマウスジェスチャは和田も迷惑してます…。が、以外と便利だったりもするのでどうしようか悩んでおります…。
- リッツくん
- リッツくんさんうわぁこれ便利そう･･･
ちゃっかりパクらせていただいてもよいかしらん☆
- Asmodeus
- Asmodeusさんおおっ、なるほど！確かに小さくするとなりましたね。
(^-^;
- 和田
- 和田さん＞リッツくんさま
どんどんパクッてくださいﾊｧﾊｧもともとfacebookのパクりですしね・・・。
＞Asmodeusさま
横スクロールバー自体この世から無くなればいいんですけどね（笑
和田憲幸の広告
- BTOパソコン
- www.pc-take.com自作PCやBTOパソコンの事ならシューマイが美味しい神奈川県は横浜のPC-takeにお任せください。
- 事業再生のSTP
- www.s-tp.jp経営が苦しい、そんなときはSTPに経営相談や経営コンサルティングをご依頼ください。
- ドライフラワー卸売り
- www.coretrading.co.jpドライフラワーやプリザーブドフラワーの業務用卸売りならコアトレーディング。
- 通話録音装置 ネイクス
- www.neix.co.jp通話録音装置や通話録音システムのことならネイクス。
- インプラント 東淀川区上新庄
- www.higashi.ne.jp東淀川区上新庄でインプラントや矯正歯科ならひがし歯科で決まり！
- 吉野川 ラフティング
- www.safari-g.com四国は吉野川でラフティングやハイドロスピード、キャニオニングと言えばサファリだよね。
- ホームページ制作 アルバイト
- next-level.bizホームページ制作、Webデザイナーのアルバイト、SOHOのことはネクストレベルまでご相談ください。
- 札幌 美容室 アイウィル
- www.aiwill.jp札幌市中央区で美容師をお探しの際はアイウィルまでお越しください。
- WEBLOGS6.1.0
- www.synck.jpこのブログはシンクテクニカのウェブログでつくられています
- 札幌 ホームページ制作
- www.synck.com札幌でホームページ制作やWebアプリケーション制作ならシンクグラフィカへ。
- iPhoneで内線電話
- www.smartgate.biziPhoneやAndroidから内線電話が無料でかけれる。
- 新潟リフォーム
- www.neohouse.jp新潟で注文住宅とリフォームはネオハウス。
