八百万-やおよろず-雑記。

八百万-やおよろず-雑記。

日常の様々な事象(主に健康、ライフハック、PC、雑貨、ネットビジネスなど)について、nyanco! スタッフがお役立ちの精神で書き連ねていくブログです。

【超簡単】はてなブログに「TOPへ戻るボタン」を実装してみた


スポンサードリンク

こんにちは、nyanco! です。

今回ははてなブログに「TOPへ戻るボタン」を実装します。
基本的にコピペするだけで「超簡単」に実装できます♪

はてなブログproではない方は、スマートフォンには対応できません。

まだ導入されてない方、この機会にいかがでしょうか ^^
良く分からない!という方でも、コピペで出来るように紹介いたしますので、是非チャレンジしてみてください!

早速、実装方法!

1 ダッシュボード > 設定 > 詳細設定 [上部のタブ]
- 「FontAwesome」というwebフォントを使用するため、読み込みの設定。 - 検索エンジン最適化 > 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>  

2 ダッシュボード > デザイン > カスタマイズ [左上部の レンチのアイコン] > フッタ の記述欄に以下をコピペ

//トップに戻るボタンの設定
<div id="page-top">
  <a id="move-page-top"><i class="fa fa-arrow-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>    

※上記3行目のfa-arrow-upを下記URLのお好きなアイコンの右側にあるコード(fa-から始まる文字列です)に差し替えたら、ボタンを変更できます。

Font Awesome Cheatsheet

3 ダッシュボード > デザイン > カスタマイズ [左上部の レンチのアイコン] > デザインCSS の記述欄に以下をコピペ

/* ページTOPへ戻るボタン設定 */
#page-top {
  display:none;
  position:fixed;
  right:15px;
  bottom:15px;
  margin: 0;
  padding: 0;
  text-align:center;
}
#move-page-top{
  color:rgba(0,0,0,0.6);
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:rgba(0,0,0,0.8);
}
@media only screen and (min-width: 400px){
  #page-top{
    right:50%;
    margin-right: -450px;
  }
}

たったこれだけで実装完了♪ 早速プレビュー画面で確認してみてください。
少し下にスクロールすると、右下にボタンがフワッと現れてくるはずです。

ちょっぴりカスタマイズ

・表示される位置を調整したい
5・6行目の15pxという数字を変更してみてください。
現在の設定は、ブラウザの右端から15ピクセル、下端から15ピクセルの位置に表示するという設定になっております。
つまり、どちらも0pxにしますと、右下にピッタリくっつくように表示されます。

・ボタンの透明度を変えたい
12行目の0,0,0,0.60.6という数字を変更してみてください。
こちらの数字を1にしますと、透明度がなくなり、後ろが透けなくなります。
逆に0.0にしますと完全に見えなくなります。
また、18行目にも同じような設定がありますが、こちらはマウスカーソルをボタンの上に載せた時に透明度を変化させるための設定となります。
色々試してみてお好みの設定でどうぞ^^

今回参考にしたサイト様はこちら↓
コピペでどうぞ。はてなブログで「ページのトップへ戻る」ボタンをつけるカスタマイズ - つばさのーと
ありがとうございます^^

はてなブログにまだ「TOPへ戻るボタン」を実装されてない方、
是非、試してみてくださいね^^

広告を非表示にする
//パンくず //トップに戻るボタンの設定
to TOP
//トップに戻るレンジの設定 //アウトバウンド計測