あっちの多趣味なそらら

趣味で創作活動や遊戯王コレクションに没頭しているブログです。オリキャラのイラストや落書き、購入カードなどのネタを紹介しています。

ヘッダー画像

オリキャラの画像を使ってページトップに戻るボタンを作ってみた!

オリキャラアイキャッチ画像_空を飛ぶナムナム



こんにちはです。 あっちのそららです。

 

今日は当ブログに新しく「ページトップに戻るボタン」を配置したので、その方法をご紹介していきます。

興味のある方や実践してみたいという方はぜひご覧ください。

 

 

 

 

 

まず具体的に
「どういったモノを作ったのか?」という所から。 

 

 

色んなサイトでよく見かけますが、
ポチっと押すと、今いるページの一番上に戻るボタンのコトです。

 

 

長~いページだと、いちいちスクロールしなくても一瞬でスタート地点に戻れるので、置いておくとユーザーに親切な機能です。

 

 

 

 

今回作ったボタンの特徴は、

 


一定の位置までスクロールすると自動で表示される

常にページ右下に固定表示されるので、いつでも好きな時に押せる

自作の画像なのでオリジナリティが出る

 


といった面白い仕様になってます。

 

 

このページでも、右下にひょっこり出てくるかも。

 

 

 

作り方はこちらの記事を参考にさせていただきました。

www.yuzumochi.com

 

 

1. ボタンにしたい画像を用意

 

 

オリキャラ_ページトップに戻るボタン


画像は大きめのサイズで作っておくと、設置する際にキレイに表示されます。
(ただし、容量が大きいと重くなるかもなので注意!)

 

今回は縦横900pxで作りました。
もう少し小さくてもよかったかも…

 

 

画像が用意できたら、
はてなフォトライフの中にアップロードします。

 

はてなブログの画面上部からGO!

画像説明_はてなフォトライフへの行き方

 

 

 

アップロードが完了し、はてなフォトライフの中に画像が入ったら、
画像を右クリックし、画像アドレスをコピーします。

 

 

画像説明_はてなフォトライフで画像のURLを取得する方法

 

 

ここでコピーしたアドレスは後々使います。

 

 

 

2. jQueryの準備

 

 

さて、今回のようなボタンを作るには、
jQuery」というスクリプトが必要になります。

 

まずは、はてなブログ上でjQueryが機能するように設定を行います。

 

 

 

jQueryソースコード追加の準備_headに要素を追加

 

はてなブログの「設定」→「詳細設定」へ進み、
headに要素を追加」の部分に下記のコードをコピペします。
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

 

これで下準備が整いました。

 

 

 

 

3. HTMLとCSSを追加

 

 

ここから実際にボタンの設定をしていきます。

まずはHTMLから。

 

 

 

画像説明_デザイン設定_フッタにHTMLとjQueryのコードを追加


デザイン設定画面へ行き、
フッタの部分に下記の2種類のコードをコピペします。

<div id="page-top">
    <a id="move-page-top">
        <img src="ここに画像のURLを記述">
    </a>
</div>

 

「ここに画像のURLを記述」の部分を
先ほどコピーした画像アドレスに差し替えてください。

 

そして上記のHTMLコードの一行下に
コチラのjQueryコードをコピペ。

<script>
  $(window).scroll(function(){
      var now = $(window).scrollTop
();
      if(now > 1000){  /* 画像が表示される位置を指定 */
          $("#page-top").fadeIn("slow");
      }else{
          $("#page-top").fadeOut("slow");
      }
  });
  $("#move-page-top").click(function(){
      $("html,body").animate({scrollTop:0},"slow");
  });
</script>

 

「画像が表示される位置を指定」の部分は今、1000になってますが、
この数値を大きくするほど、ボタンが表示されるまでのスクロールが長く必要になります。


早めにボタンを表示させたい人は数値を小さめに、
ページの後半辺りでボタンを見せたい人は数値を大きめにするといいでしょう。


微調整しながら、自分の好みに合った表示位置を見つけましょう。

 

 

 

 

最後はCSSの設定です。

 

デザインCSSの部分に下記のコードをコピペすれば
ページトップに戻るボタンの出来上がりです。

/* ページトップへ戻るボタン */
#page-top {
    display: none;
    position: fixed;
    right: 7px;   /* ボタン右の余白 */
    bottom: 7px;    /* ボタン下の余白 */
    margin: 0;
}

#move-page-top {
    opacity: 0.7;    /* ボタンの透明度 */
    display: block;
    cursor: pointer;
}

#move-page-top a:hover {
    opacity: 1.0;    /* マウスを重ねたときのボタンの透明度*/
}

#page-top img {
    width: 85px;    /* ボタンの横幅 */
    height: auto;
}


数値の調整ができる箇所は日本語で記述しておいたので、こちらもお好みで数値をいじって、自分のイメージに合ったボタンに仕上げていきましょう。


透明度は0.0~1.0の間で設定できます。
数値が小さいほど透明に近づきます。

 

 


ブログの見やすさも考慮しながら、程よい存在感にしてあげると良いかと思います。

ページトップに戻るボタン、アクセントに加えてみるとブログが華やかになるかもしれません。

 

 

 

 

(髪の毛が上向き矢印になってる。)

広告を非表示にする
フッターイラスト
ページトップへ戻るボタン