ブログ改造熱が冷めずにモヤモヤ中の@knk_nです。どうもです。
今回、iPhoneみたいなワクワクが体験できそうな、なんでもバーをブログトップに設置してみましたので、そこまでの軽い改造談義でもお届けしようと思います。
項目別に読む
それはまるでiPhoneのような
たまたまですがこんなページを眺めておりました。
| 新作スクープ!! WordPress 3.4 Extended Version | 8bitodyssey.com |
WordPress3.4楽しみですね。特にシンプルになったデフォルトテーマ「Twenty Twelve」が気になります。
ひと通りざっと見て盗めるものは盗んでおきたいです。
記事を読んでいて私がスゴク気になったのはこの部分。
画面をスクロールさせていても
管理バーをクリックすると…
最上部まで戻ることが出来るようになっています。スマートフォン的な UI ですね。
via: 新作スクープ!! WordPress 3.4 Extended Version | 8bitodyssey.com
その手があったか！！
iPhoneには「スクロールが必要な箇所でステータスバー(時刻とか電池残量とかが表示されている部分)をタップすると一番上までスクロールしてくれる」という機能がありました。
これはアプリに関係なく使えるiPhoneの機能のひとつです。
（iPadも同様ですね。）
WordPress3.4になると管理バーでおなじことができるようになるらしいのですが、一足早くブログに導入してやろうと決意。
ただし管理バーはその名の通り管理者しか見ることができません。そこで今までナビゲーションバーに設置していた「About」などのカテゴリとは関係なかった部分を入れた「ステータスバーもどき」として新しくバーをひとつ作り、ついでにスクロールもできるようにしちゃおうと。
ここまでが昨日の夜のおはなし。
スクロールはjQueryで
| 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス |
ブログテーマ自作から今日まで本当にお世話になりっぱなしなWEBクリエイターボックス様のこの記事。「ページトップへスクロールする」という項目もここにあります。
なんというか、ほぼコピペです。あとはコレをバーにくっつけるだけ。
実はスクロールボタンは前からあった
実を言うとクリックでトップにスクロールできるボタンはソーシャルボックスと一緒に左側に設置してありました。
ただこれだと左右の余白などのバランスが悪そうだということに最近ようやく気づいてきたので、いつか違う方法で解決してやろうと思っていました。
ほんとに千載一遇です。
すぐに使えるようにトップに固定しちゃえ！
これは固定してなかったら意味がないのですが、「ページ内のどこにいてもすぐにトップに戻れる」ようにバーをトップに固定しました。
ついでにすぐ使いたくなる(だろう、たぶん)検索フォームもバーに組み込みました。
CSSで固定したい要素に
position: fixed;
と追加してやれば、その要素がスクロール時も最初の位置で固定されるようになります。
ソーシャルボタンも付けちゃえ
スクロールにボタンが要らなくなったら今度はソーシャルボタンが気になる。バーがスクロールするなら、そっちにソーシャルボタンを付ければソーシャルボックスを使わなくてもいいだろうと別れを決意。
半年くらいはお世話になったかな。お疲れ様です。カッコよかったんだけどなぁ。
ソーシャルボタンは記事画面のみ表示するようにしてあります。
参考: WordPressプラグイン「WP Social Bookmarking Light」を外すことにしました
管理バーは非表示に
管理者の私が見ると、このように管理バーが被ってせっかく設置したバーが見えないので管理バーは非表示しています。
| WordPress 3.1で追加された管理バーを非表示にする方法 | understandard |
add_filter( 'show_admin_bar', '__return_false' );
と、functions.phpに少し書くだけでいいらしいです。便利ですね。でもfunctions.phpムズイ。
そんなわけで完成
いろいろあって「トップにスクロールする機能を持つ、なんかいろいろ入ったバー」が完成いたしました。それにしてもひでぇネーミングセンスだな。
クリックでトップにスクロールする部分は「お問い合わせ」と「ソーシャルボタン」の間の
この辺にあります。ディスプレイのサイズによってクリックできる部分の幅が変わりますが、最低限クリックできるスペースは確保したつもりです。
実は右側ならバーの下の部分のクリックでもトップにスクロールできたり。
「ソーシャルボタンをバーに付けたらディスプレイサイズによっては使えないんじゃないか」とも思ったのですが、ソーシャルボックスの時からディスプレイサイズによっては表示されないこともあったわけで。
記事の最後にもソーシャルボタン付けてるしだいじょうぶかなと。
ある意味、今後の検討課題です。ちなみに検討するかは知りませぬ。
おわりに
iPhone、もといスマートフォンで「バーのタップでトップにスクロール」というのが当たり前になってきました。
なのでこういった形で「トップヘのスクロール」をブログに導入するのもありかなと。
実験的な改造なので効果はいかほどか。良くも悪くも今後が楽しみです。
ぜひWEBでアクセスして使ってみてくださいね。
