オリジナルの画像で上に戻るボタンを設置する方法

みんなー！うしるだよー☆

今回は「好きなアイコンで上に戻るボタンを設置する方法」を紹介しちゃうよ☆

PC版もスマホ版も両方紹介するから刮目して見てね♡

上に戻るボタンとは
PC版「上に戻るボタン」の導入
スマホ版「上に戻るボタン」の導入方法（Proのみ）
まとめ

上に戻るボタンとは

f:id:UrushiUshiru:20180528224852j:plain

このブログをPCとかタブレットで見ると右下に表示されてるあれ（風子）です。

このボタンを押すと一番上まで戻ります。

つまり風子の胸を押すと上に戻るって事だよ！！

卑猥な風に言うなよ！！

f:id:UrushiUshiru:20180528225210j:plain

サブブログの「シャルの甘美なる日々」にはありませんので導入がてら紹介いたします！

PC版「上に戻るボタン」の導入

PC版の「上に戻るボタン」の導入方法を紹介します。

上に戻るボタンのhtmlコード

<!-- 上へ戻るボタン -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn();
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut();
       }
   });
   // ページトップクリック
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
})(jQuery);
</script>
<a id="pagetop" href="#top" class="page_top" style="display: none;"><img src="画像のURL" align="right" ></a>

まず最初に上記のhtmlコードを使用します。

26行目の「<img src="画像のURL" align="right">」の「"画像のURL"」の部分に設定したい画像のURLを貼り付けます。

画像のURLの取得

f:id:UrushiUshiru:20190328164124j:plain

はてなフォトライフの画像を使用する場合は、使用したい画像のページに移動して、画像の上で「右クリック」⇒「画像のアドレスをコピー」とすると画像のURLが取得できるので、26行目の「<img src="画像のURL" align="tright">」の「"画像のURL"」の部分に貼り付けます。

フッタのhtml記述欄に貼り付け

f:id:UrushiUshiru:20180528234811j:plain

はてなブログの管理画面にアクセスして「デザイン」⇒「①スパナマーク」⇒「②フッタ」に上記のhtmlコードを貼り付けます。

「③変更を保存」をクリックして設定を保存します。

上に戻るボタンのCSSコード

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:0px;
    right:0px;
    color: #ffffff; /* 文字色 */
    font-size:0px;
    text-decoration:none;
    background: linear-gradient(
    -45deg,
    #fff 25%,
    #f4f4ed 25%, #f4f4ed 50%,
    #fff 50%, #fff 75%,
    #f4f4ed 75%, #f4f4ed
  );
  background-size: 0px 0px; 
  border-radius: 50%; /* ボタンの丸み */
  opacity: 1.0; /* ボタンの透明度 */
  z-index: 99;
}

/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover {
    color: #ffffff; /* 文字色 */
    opacity: 0.7; /* ボタンの透明度 */
}

#pagetop img {
 width:300px;
 height:300px;
}

次に上記のCSSコードを使用します。

上記コードの28行目～31行目の「#pagetop img {～}」で囲まれた部分の値を変更することで上に戻るボタンのサイズが変更できます。

18行目はボタンの透明度、25行目はホバー時（ボタンを押してから上に戻るまで）のボタンの透明度、29行目のwidthは横幅、30行目のheightは縦幅になります。

デザインCSSにコードの貼り付け

f:id:UrushiUshiru:20180416005536j:plain

はてなブログの管理画面にアクセスして「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

「③変更を保存」をクリックして設定を保存します。

f:id:UrushiUshiru:20180529003251j:plain

以上でPC版の「上に戻るボタンの設定は完了」です。

はてなブログのデザインカスタマイズ方法を紹介します！【コピペでできる！】

スマホ版「上に戻るボタン」の導入方法（Proのみ）

スマホ版の「上に戻るボタン」の導入方法を紹介します。

上に戻るボタンのhtmlコード

<!-- 上へ戻るボタン -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が100を超えた場合
       if ($(this).scrollTop() > 100) {
           $('#pagetop').fadeIn();
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut();
       }
   });
   // ページトップクリック
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
})(jQuery);
</script>
<a id="pagetop" href="#top" class="page_top" style="display: none;"><img src="画像のURL" align="right" ></a>

上記のhtmlコードを使用します。

26行目の「<img src="画像のURL" align="right">」の「"画像のURL"」の部分に設定したい画像のURLを貼り付けます。

フッタのhtml記述欄に貼り付け

f:id:UrushiUshiru:20180421005458j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に上記のhtmlコードを貼り付けます。

貼り付けたら「③変更を保存する」をクリックして保存します。

上に戻るボタンのCSSコード

<style type="text/css">
/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:0px;
    right:0px;
    color: #ffffff; /* 文字色 */
    font-size:0px;
    text-decoration:none;
    background: linear-gradient(
    -45deg,
    #fff 25%,
    #f4f4ed 25%, #f4f4ed 50%,
    #fff 50%, #fff 75%,
    #f4f4ed 75%, #f4f4ed
  );
  background-size: 0px 0px; 
  border-radius: 50%; /* ボタンの丸み */
  opacity: 1.0; /* ボタンの透明度 */
  z-index: 99;
}

/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover {
    color: #ffffff; /* 文字色 */
    opacity: 0.7; /* ボタンの透明度 */
}
#pagetop img {
 width:150px;
 height:150px;
}
</style>