あっちの多趣味なそらら ヘッダーイラスト

あっちの多趣味なそらら ヘッダーイラスト

あっちの多趣味なそらら ロゴ

イラストを使ってページトップに戻るボタンを作った【はてなブログ】

上へ向かうナムナムくん

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

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



ページトップに戻るボタンって?

まず、どういったモノを作ったのか?という所から。 

大抵のサイトでよく見かけますが、ポチっと押すとページの一番上に自動で戻ってくれるボタンです。

ページトップに戻るボタンのデザイン例

こんな感じのボタン。
押す人は押す、押さない人は押さない、興味無い人は興味無いなど、人によってアクションは様々ですが、長いページだといちいちスクロールしなくても、自動でスタート地点に戻れるので、設置しておくとユーザーに親切な機能です。



当ブログは、オリキャライラストがメインの創作系ブログなので、ボタンは自作のイラストにしました。
描いたのはうちのマスコットキャラ、ナムナムくんです。


今回作ったボタンの大きな特徴は3つです。

 

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

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

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



スクロール表示、画面固定などの動きをつけてボタンを目立たせつつ、押しやすくします。

ボタンの作り方は、こちらの記事を参考にさせていただきました。ありがとうございます。

yuzumochi.com



ボタン画像を用意する

ナムナムのページトップに戻るボタン

ナムナムくん、ページトップに戻るボタンに立候補!


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

今回は縦横900pxで作成。大きく作りすぎた…
フラットなベタ塗りで描いたので、このサイズでもそれほど容量は大きくないです。大きく表示されるものでも無いので、描き込んでも縮小されて潰れてしまうかもしれません。
細かく描き込んだボタンにしたい方は加減に注意しましょう。



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

はてなブログ画面上部のメニューバー内のルービックキューブみたいなアイコンを押し、「はてなフォトライフ」をクリック。

はてなフォトライフへの行き方


アップロードが完了し、はてなフォトライフの中に画像が入ったら、画像を実寸大で表示させ右クリックし、画像アドレス(URL)をコピーします。


画像アドレスをコピーする画面

ここでコピーした画像アドレスは後々必要になるので、控えておいてください。 



jQueryの準備

今回のような仕様のボタンを作るには、「jQuery」というスクリプトが必要になるので、はてなブログ内でjQueryが機能するよう設定します。


headに要素を追加画面

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

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


このコードを入れることで、はてなブログ内でjQueryが動くようになります。



HTMLとjQuery

ここから実際にボタンを形にするコードを入れていきます。
最初はHTMLから。


フッタのHTML記述欄


デザイン設定画面へ行き、「フッタ」のHTML記述欄に、下記のHTMLとjQueryのコードをコピペします。


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


ボタン画像を設置する役目のHTMLコード。
「ここに画像の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>


jQueryでボタンのスクロール表示を設定しています。

「画像が表示される位置を指定」の部分は今「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:hover {
    opacity: 1.0;    /* マウスを重ねたときのボタンの透明度*/
}

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


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

position:fixed;」でボタンを固定表示させています。
透明度は0.0~1.0の間で設定でき、数値が小さいほど薄くなります。ブログの見やすさも考慮しながら、程よい濃さにしてあげると良いかと思います。



オリジナルのイラストを使ったページトップに戻るボタン、アクセントに加えるとブログが華やかになるかもしれません。

そしてjQueryがさっぱり分からん。

このサイトのボタンが面白い!

miss-ueno.com


上方向を大胆に強調したイラストのボタンです。触ると地震みたいに揺れて面白いです。
負けたくない。

前回のカスタマイズ記事

acchinosorara.hatenablog.jp




(ナムナムくんの髪を上向き矢印にしたつもり。)

フッターイラスト
フッターイラスト
ページトップへ戻る