PVアクセスランキング にほんブログ村

Web音痴の「トップへ戻るボタン」の作成【はてなブログ】

こんにちは、○○ですヾ(^∇^)

って、皆さんブログの最初に挨拶してるんですが、○○って皆さん自分のあだ名?をステキな感じに付けていらっしゃって、私も何か○○です。っていう名前をつけたいな…と思っている今日この頃・・・

そんな今日はブログに「トップへ戻るボタン」を付けてみたので、トップへ戻るボタンの作成手順を解説します。

f:id:lifeishappy_right:20201010231604j:plain

ブログをスクロールしながら読んでいるときに、突如トップに戻りたくなるときってありませんか?

そんな時、一瞬でトップまで戻ってくれたら便利ですよね?その機能をブログに付けたい方必見の内容になっています。

ちなみに私のブログを少し下にスクロールして、右下に出てくる三角の矢印ボタンの事です。

f:id:lifeishappy_right:20201010230051p:plain

題名にもあるように、究極のWeb音痴と言いますか、IT用語は全く意味不明な状態でブログ運営をしておりますので、本当に初心者が簡単に出来る説明になっています。

 

 「トップへ戻るボタン」の作成

ブログ初心者の方、IT素人の方…これもHTMLとCSSを使用します。

ただ、3つのコードをコピペしていただければ作成できるようになっていますので、コピペして使用していただければと思います。

トップへ戻るボタンのアイコンが気に入らない方は、その部分を少し自己流にいじっていただければと思います。

 

1つ目のコード

<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> 

上記コードを< ダッシュボード → 設定 → 詳細設定 → headに要素を追加 >に貼り付けます。

 

2つ目のコード

下記コードをコピペしてフッタ部分に貼付けします。

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

 

 ダッシュボード → デザイン → カスタマイズ → フッタ >にコピペした上記コードを設定。

このHTMLコードだと私と全く同じボタンになります。

ボタンを変更したい場合は、3行目の紫部分の<i class="fas fa-chevron-circle-up fa-3x">を変更してください。と書いて思ったんですが、恐らく自分で変更できる人がこの記事を参考にしているとは思えないので、他に検索する余力のない方は、そのままで我慢してください(笑)

 

3つ目のコード

下記コードをコピペしてデザイン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.6);
  text-decoration:none;
  display:block;
  cursor:pointer;
}

/* ページトップへ戻るボタン:ホバー時 */
#move-page-top:hover{
  color:rgba(0,0,0,0.8);
}

 < ダッシュボード → デザイン → カスタマイズ → デザインCSS >にコピペした上記コードを設定。

HTMLとCSSを設定したら、「変更を保存する」をクリックして「トップへ戻るボタン」の導入完了となります。

 

参考資料

「トップへ戻るボタン」は、下記ブログを参考にさせて頂きました。

簡潔かつ分かりやすく、全く無知な私でも簡単に導入する事ができ感謝しております。

hatebumaru.hatenablog.com

 

最後に・・・

また一歩素敵なブログに成長しましたね♪

HTMLとかCSSとか、これをプログラミングというのでしょうか…

ブログを運営する上でプログラミングというやつを攻略できたら、もっともっとオシャレにできるのに…なんて思いながらも勉強する気はさらさらないのですが。。。

トップに戻るボタンを設置するために相変わらず様々なブログを読み漁ったのですが、結構皆さん詳しく解説されていて、FontAwesomeだとかjQueryだとか…見たことはあるけど何のことやら…という用語が飛び交っていてかなり迷走してしまいました。

コピペばかりで脳みそは全く成長ないですが、ブログが素敵に成長してくれればそれでいいかな…と思います♡