和田憲幸のブログ

札幌市白石区在住、個人事業のWebエンジニア 和田憲幸(43歳)のブログです。

ブログにfixedなツールバー

facebookに感化されてページのbottomにfixedなツールバーを付けた。

2009-07-01 20:05:20
入力時間 / 10:40

bottomにfixedなツールバー

facebookにも同じようなツールバー付いてますよね。これ、意外と便利なんですよね。最初はabsoluteでonscrollで追従してみたんですがガクガク感が気に食わなかったのでfixedにしてみました。IE6だけabsoluteも考えましたが、IE6のシェアがだいぶ落ち込んできたので完全にfixedに。

ツールバー設置の意図

もともとこのブログのユーザビリティの悪さたるやもちろん私も自認しております。当初のコンセプトが文章を読みやすく焦点が散らないという意図でこのブログを作ったわけですが、いささか敷居が高く、ページの端でページがめくれようなんて誰も気付かないですよね言われないと。ましてやマウスゼスチャーに対応してるなんて言われないとわからないし。

で、当初から見ていただいている読者さん以上に新規ユーザが増えてきたので、これはいかんなと思ってツールバーを設置した次第です。私個人での考えですが2カラムや3カラムは焦点が散るので嫌なんですね。それに文章の領域は横幅で740は確保したい。文章をゆったり見れる領域はやはりほしい。で、左側にweb-dockが付いてるわけなんですが、onmouseoverだと誤って表示されたときウザイというお言葉もいただき、onclickにしたら余計わけわからんと…。

ということでbottomにツールバーというのは非常に理解しやすくfixedであるため見過ごす可能性も最小限に抑えられているわけです。このbottomにfixedなツールバーは今後、Webサイトのデファクトになる予感。positionでbottomが使えれば実装は簡単ですが、クロスブラウザを考えるとjsでやるしかないのが現状ですよね。

ともあれ、ページビュー増加の一端を担ってくれるでしょう。アクセス解析の結果が楽しみ。

bottomにfixedなツールバー表示の仕組み

onload時にウィンドウの内縁サイズを取得してツールバーの高さを引いたpositionにtoolbarを表示させます。あとはonresize時にウィンドウのサイズをリフレッシュして再描画すればOK。簡単ですね。

簡単にbottomにツールバーを表示できるライブラリを作ろうかなと思ってます。

TAG

P.297

しゅんさん
firefox3.0だと横スクロールバーが出てツールバーが隠れてますよ!!
ターゲットブラウザに入れていなかったのなら、すいませんっ。2009-07-01 22:01:49
和田
>しゅんさま
ばかなっ!!!Firefoxでも動作は確認シタノニィイィイィィィ!!!ウィンドウのサイズ広げてもだめっすかね・・・。たぶん右上の和田の顔が邪魔して・・・!!!2009-07-01 22:03:44
金沢の木村さん
firefox3.0ほんとだ~隠れてる(笑)
てか、これいいですね~!!!
今作ってるサイトに早速装備させて頂きます!!シャキーーン
御馳走様です!!2009-07-01 23:06:17
和田
>金沢の木村さま
和田家のFirefox3.0~3.5(Mac含)で確認しましたが横スクロールは出ませんでした・・・。ひょっとしてキャッシュ!?ぜひご活用くださいっ!ちなみにさり気なく透明なんですよっ!2009-07-02 00:15:19
Asmodeusさん
Firefox3.0.11で横スクロールは出ませんでした~皆さんどういう条件で出てるのかな!?
ちなみに、こちらでは縦のスクロールバーをクリックするとページ移動しちゃうのでちょっと悩み中(^-^;
プラグインはNoscriptが入っていて、スクリプトOKにして表示しました。2009-07-02 01:30:19
和田
>Asmodeusさま
画面サイズを小さくして見ると横スクロールバーに隠れちゃいますねぇ…。スクロールバーを判定して場所を変えるのも面倒ですし…。あ、そうでもないか…。よし!ちょっとやってみようかな!あと、なんちゃってマウスジェスチャは和田も迷惑してます…。が、以外と便利だったりもするのでどうしようか悩んでおります…。2009-07-02 03:40:06
リッツくんさん
うわぁこれ便利そう・・・
ちゃっかりパクらせていただいてもよいかしらん☆2009-07-02 10:32:18
Asmodeusさん
おおっ、なるほど!確かに小さくするとなりましたね。
(^-^;2009-07-03 01:01:42
和田
>リッツくんさま
どんどんパクッてくださいハァハァもともとfacebookのパクりですしね・・・。

>Asmodeusさま
横スクロールバー自体この世から無くなればいいんですけどね(笑2009-07-03 05:29:05