はてなブログに「先頭へ戻る」ボタンの実装カスタマイズ
はてなブログを始めてまだまだペェペェなこのブログ。 楽しみながら絶賛カスタマイズ中です。
新しく「先頭へ戻る」ボタンの実装をしましたので、今日はカスタマイズの概要を備忘録がてら説明します。
目次
「先頭へ戻る」ボタンとは?
よくあるのはウィンドウ右下にあって、クリック(タップ)するとウィンドウ先頭へスルスルスクロールしていくやつですね。 ユーザビリティーの向上につながります。
実装にあたる簡単な構想概要(共通)
ザックリいくと、ある一定量スクロールすると、右下に「フワッ」とボタンが表れてクリックすると「スルスル」と先頭へ スクロールしていってボタンも「フワッ」と消える、というような感じにしていきます。
はてなブログでのコーディング
ブログサービス毎にカスタマイズ方法が違うのですが、今回はあくまでも「はてなブログ」でのカスタマイズ方法に ついて書いていきます。ゆっても、考え方や側の部分は共通ですが。以下、今回のはてなブログでのコーディングの 簡単な概要です。
- head要素内でJQueryを読み込む
- HTMLでボタンを実装する
- 動作部分のJavaScriptを実装する
では、ひとつひとつ説明していきます。
JQueryの読み込み(HTML/head)
JQueryを使用するので読み込み用のscriptタグを書いていきます。 はてなブログでこれを実装するのにドコに書けばいいのか、と。 調べていると、人によってマチマチなんですが、今回はhead要素内に書いていきたいと思います。
「設定>詳細設定>headに要素を追加」の項目に以下のコードを追加します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
(Ver.は現在の最新です)
ボタンの追加/デザイン(HTML/body、CSS)
次はhtmlでボタンを追加します。今回は画像は使用せず、background-colorとborder-radiusで ボタンのデザインを作成しますので、その部分をデザインCSSに追加します。
まずはhtmlから。
「デザイン>カスタマイズ>フッタ」に以下のコードを追加します。
<div id="back-to-top"><a href="#">to TOP</a></div>
(idとボタンの文言は好みで)
次はCSSでデザインをば。 大きく分類すると次の2点についてのコードを追加。
- デザイン
- スクロールに関係なく右下に固定
「デザイン>カスタマイズ>デザインCSS」に以下のコードを追加します。
#back-to-top{ padding:5px 10px; font-size:20px; font-weight:bold; background-color:rgba(0,0,0,0.3); position:fixed; right:5px; bottom:5px; border-radius:5px; } #back-to-top a{ color:#fff; } #back-to-top a:hover{ text-decoration: none; color:#000; }
(詳細な説明は割愛)
ボタンの動作部分(JavaScript)
次は動作部分のコーディング。 大きく分類すると次の3点についてのコード。
- ページ読み込み直後はボタンを非表示
- スクロール量に応じて「フワッ」と表示/非表示の切替
- ボタンをクリックすると「スルスル」と上へスクロール
といことで、上の手順で追加したhtml部、
「デザイン>カスタマイズ>フッタ」の先ほどのコード下に以下のコードを追加。
<script> $(function() { $('#back-to-top').hide(); $(window).scroll(function() { if ($(this).scrollTop()>100) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); $('#back-to-top a').click(function() { $('body').animate({ scrollTop:0 }, 500); return false; }); }); </script>
今回のサンプルコード
今回追加したコードを追加場所別にまとめます。
設定>詳細設定>head
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
デザイン>カスタマイズ>フッタ
<div id="back-to-top"><a href="#">to TOP</a></div> <script> $(function() { $('#back-to-top').hide(); $(window).scroll(function() { if ($(this).scrollTop()>100) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); $('#back-to-top a').click(function() { $('body').animate({ scrollTop:0 }, 500); return false; }); }); </script>
デザイン>カスタマイズ>デザインCSS
#back-to-top{ padding:5px 10px; font-size:20px; font-weight:bold; background-color:rgba(0,0,0,0.3); position:fixed; right:5px; bottom:5px; border-radius:5px; } #back-to-top a{ color:#fff; } #back-to-top a:hover{ text-decoration: none; color:#000; }お持ちのブログのカスタマイズに参考になれば幸いです。 その際、デザインはお好みに変更していただければ、と。
[疑問。。。]スマホ版での表示
ここで完了のはずだったんですが、スマホ版で表示されていません。。。このブログだけでなく、 他に「先頭へ戻る」ボタンを実装されているブログでも同様です。以前は表示されていたようですが、 なぜか表示されていません。調査してみて原因がわかったら、スマホに対応するように修正したいと思います。