うっすら透明な「上に戻る」ボタンのはてなブログ設置法

f:id:paradisecircus69:20150707155005j:plain
はてなブログカスタム第二弾。

「（ウチは）長文が多いし上に戻るボタンある方がいいかなぁ……」
と思い遂に先日PC、スマフォビューの両方に設置してる。


www.task-notes.com

参考にしたのは、こちらの方の方法。
よくある上に戻るボタンと違って、しばらくスクロールすると表示されるのも高ポイント。
シンプルで、カスタムもしやすい。

以下、はてなブログでの設置法を。
コピペすればそれっぽいものが付きます。
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。


で、スマフォのメニューいじるのでまた変わります。

【前回記事】
azanaerunawano5to4.hatenablog.com