はてなブログに画像で上に戻るボタンを設置する

hatenaロゴ

このブログでは、はてなのアイコンフォントを使って「上に戻るボタン」を設置していましたが、少し飽きてしまったのと、コードをシンプルにしたかったので、画像でボタンを設置することにしました。

まずは、ボタンにする画像をはてなフォトライフなどにアップロードします。
アップロードするときは、（ブログが重くならないように）事前に画像をソフトやWebサービス（自分はWindows用ソフトのRalphaを使ってます）で縮小しておきます。

コードは次のとおりです（デザイン→カスタマイズ→フッタに入力します）。

HTML
<!-- 画像ボタンで上に戻るHTML -->
<div id="pagetop" onclick="$('html, body').animate({scrollTop:0},'slow');" title="上に戻る">
<img src="画像のURL（画像アドレス）" alt="上に戻る">
</div>

HTMLのonclickでjQueryの「animate()」を使っているのでスムーズにスクロールします。

参考になるブログ・Webサイト

onclick属性を使った「上へ戻る」スクロール

バッドノウハウ的な。

最後に、CSSでボタンの位置を「position」で右寄せして固定します。ボタンの表示にJavaScriptを使わないので、スクロールしてふわっと表示させることはできません。
ボタンをスクロールでふわっと表示させるためにJavaScriptを使わなくてもといい思う...。

コードは次のとおりです（デザイン→カスタマイズ→フッタに入力します）。
※ デザインCSS（デザイン→カスタマイズ→デザインCSS）に入力する場合は、<style>と</style>の記述は不要です。

CSS
<!-- 画像ボタンで上に戻るCSS -->
<style>
/* 画像ボタンの位置 */
#pagetop {
    position: fixed;
    right: 32px;
    bottom: 54px;
}
/* 画像ボタンの見た目 */  
#pagetop img {
    border: 0;
    cursor: pointer;
}
</style>

CSSで画像の透明度を変えたり、マウスオーバー時に別の画像を切り替えたり、工夫しだいでいろいろできそうですね。

参考になるブログ・Webサイト

【初心者でも簡単】CSSで要素を右寄せする5つの方法を解説

Webサイトを制作する過程では、CSSを用いて要素を真ん中や左右どちらかに寄せる機会が多くあります。この記事ではCSSで要素を右に寄せる方法を解説します。基本的に要素は左上から出力されていきますが、下記5つのプロパティを用いて要素を右に寄せることができ…

なお、スマートフォンでブログを見るときに、この画像ボタンを消すには、次のコードを入力します。

CSS
<style>
/* 画像ボタンを消す */
@media screen and (max-width:640px) {
    #pagetop {
        display: none;
    }
}
</style>

画像を使った上に戻るボタンの記事については、たくさんの人たちがいろいろ書いていますので、こんな記事よりそちらを参考にしたほうがわかりやすいと思います。