うっすら透明な「上に戻る」ボタンのはてなブログ設置法
はてなブログカスタム第二弾。
「(ウチは)長文が多いし上に戻るボタンある方がいいかなぁ……」
と思い遂に先日PC、スマフォビューの両方に設置してる。
参考にしたのは、こちらの方の方法。
よくある上に戻るボタンと違って、しばらくスクロールすると表示されるのも高ポイント。
シンプルで、カスタムもしやすい。
以下、はてなブログでの設置法を。
コピペすればそれっぽいものが付きます。
PCの設置を基準に。
【スポンサーリンク】
ヘッダー
まずヘッダーにHTML。
設定>詳細設定>headに要素を追加
ここに以下を記入
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
アイコンにFontAwesomeを使うので入れてる(メニューでも流用してる)。
リンク先のは4.2.0で現行最新は4.4.0なのでウチのはバージョン上がってますが使えるアイコンが増えたくらいなので4.2.0でも問題無し。
2行目でjQueryファイルを読みこんでます。
フッター
次の場所は、
デザイン>カスタマイズ>フッター
<div id="page-top"> <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a> </div> <script> $(window).scroll(function(){ var now = $(window).scrollTop(); if(now > 500){ $("#page-top").fadeIn("slow"); }else{ $("#page-top").fadeOut("slow"); } }); $("#move-page-top").click(function(){ $("html,body").animate({scrollTop:0},"slow"); }); </script>
冒頭DIVのコードで を設定。
ですから、ここのコードを変えると や などへ変更可。
どんなアイコンがあるかは を参考に。fortawesome.github.io
下のjavascriptで動きを制御。
fadeIn('slow');でじんわりと表示させてる。
if(now > 500){
「どれだけスクロールしたら表示させるか?」
の数字なので設定されてる500を少なくすればすぐ表示。
長くすればなかなか出ない。
$("html,body").animate({scrollTop:0},"slow");
jQueryでスローに戻るように設定してる。
scrollTop:0の数値は「ページの一番上から何ピクセルの位置まで戻すのか?」
なので数値を変えれば、好きなところに戻せる。
CSS
デザイン>カスタマイズ>デザインCSS
に以下を
/*上に戻る*/ #page-top { display:none; position:fixed; right:10px; bottom:20px; margin: 0; padding: 0; text-align:center; } #move-page-top{ color:rgba(0,0,0,0.4); text-decoration:none; display:block; cursor:pointer; } #move-page-top:hover{ color:rgba(0,0,0,0.6); } @media only screen and (min-width: 400px){ #page-top{ right:50%; margin-right: -450px; } }
見た目と位置の設定など。
ウチでは右上のメニューがあるので色身をそれに揃えてる。
リンク先の方のだとマウスオーバーで緑(color:#009416;)
それをウチでは透過させたかったのでrgba(0,0,0,0.6);にしてます。
もしマウスオーバーなどでふわっと色を変えたい場合は
{ -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
を適宜追記してやるとフワッと色が変わる。
webkitでSafari3.0とChrome、mozで炎狐4.0から。
IE?何それ?美味しいの?
メディアクエリでの位置も少しいじってる。
min-width: 400px:このサイズより大きい場合に以下のCSSを適用
マージンでアイコンの表示位置。
マイナスが大きければ右へ行きます。
スマフォ用には、数値などをいじれば変わるので自分の好みに調整すれば。
(フッターのJavaScriptだけ記入すればスマフォでも動く。多分、レスポンシブは除く)
ちょっとスマフォでの動作が気になりますが。
小さいと押しづらいのでx3からx4にしましたがどうですかね。
視認性との兼ね合いかと。
いまひとつ解らない場合、合言葉はggrks。
で、スマフォのメニューいじるのでまた変わります。