【はてなブログ】上に戻る・下に進むボタンをコピペで設置 - ゼロ(0)から始める初心者ブログ(blog)「ごろごろし鯛(たい)よね～」

初公開：2019/07/06
更新日：2020/09/17

どうも～、ゼロから始める初心者ブログ「ごろごろし鯛よね～」の「ごろ鯛(@glglsti2019)」と申します。

(※ごろ鯛やブログに興味が出たら、上のシェアボタンをポチっとしてね？)

見たことある？｜上に戻る・下に進むボタン
コピペで設置する方法｜はてなブログで上に戻る・下に進むボタン
ソースコードの載せ方｜はてなブログで上に戻る・下に進むボタン
まとめ｜はてなブログで上に戻る・下に進むボタン

見たことある？｜上に戻る・下に進むボタン

さて、はてなブログに限らず、Webサイトなどでも右下くらいに矢印ボタンが出ているのを見かけたことはありませんか？

(※あ、ごろ鯛のブログの右下にもあるよ～)

矢印ボタンの見た目でも、実際に使ってみても分かりますが、これってサイトページの上とか下に一気に移動するためのボタンなんですよね。

(※実は、ごろ鯛は自分で使い鯛！から導入したという裏話が......)

今回の「冴えないブログの作り方」は、「はてなブログで上に戻る・下に進むボタンをコピペで設置する方法」について書いていこうと思います。

(※ここからが、本編になりますよ～)

コピペで設置する方法｜はてなブログで上に戻る・下に進むボタン

さて、それでは早速、はてなブログで上に戻る・下に進むボタンをコピペで設置する方法を......と、本題に入る前に重要なお知らせがございます。

(※それっぽく、不安を煽るスタイル！)

上に戻る・下に進むボタンの設定って......意外と面倒だよ？(笑)

(※最初から、やる気を削いでいくスタイル！？)

実際、はてなブログでは設定する場所が3ヶ所もあるので、ごろ鯛(たい)から見ると意外と鯛！(大)変に感じるんじゃないかなと思って、先に宣言しました。

(※どうです、行けそうですか？)

さぁ、気合を入れていきましょう！(笑)

(※ヒント：タイトルを読んでみよう～)

共通設定(headに要素を追加)｜はてなブログで上に戻る・下に進むボタンをコピペで設置

はてなブログで上に戻る・下に進むボタンをコピペで設置する「headに要素を追加」のイメージである魚のお頭

さて、それでは早速、はてなブログでの上に戻る・下に進むボタンの具体的な設定に入りましょう。

(※え、画像？何のことかな？？)

最初に設定する場所は、はてなブログのマイページにあります。

(※具体的には、以下の場所～......お世話になります、偉大な先輩！)

設定＞詳細設定＞headに要素を追加
出典：うっすら透明な「上に戻る」ボタンのはてなブログ設置法 - あざなえるなわのごとし

ここでは、はてなブログで上に戻る・下に進むボタンを設置する際に共通する設定を行います。

(※コピペで、以下を貼り付けるだけ！)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
出典(1行目)：うっすら透明な「上に戻る」ボタンのはてなブログ設置法 - あざなえるなわのごとし
出典(2行目)：はてなブログ無料版に上に戻るボタンを設置 - RED NOTE

ここで、何をしているかというと......偉大な先輩～(笑)

(※解説すら、コピペで行うスタイル！)

アイコンにFontAwesomeを使うので入れてる（メニューでも流用してる）。
リンク先のは4.2.0で現行最新は4.4.0なのでウチのはバージョン上がってますが使えるアイコンが増えたくらいなので4.2.0でも問題無し。
2行目でjQueryファイルを読みこんでます。
出典：うっすら透明な「上に戻る」ボタンのはてなブログ設置法 - あざなえるなわのごとし

ちなみに、2行目を別のところから引用しているのは、何故か1行目のところのだと使えなかったからです！(苦笑)

(※ここで詰まって、色々と記事を漁ったよ......)

デザインCSSの設定｜はてなブログで上に戻る・下に進むボタンをコピペで設置

はてなブログで上に戻る・下に進むボタンをコピペで設置する「デザインCSSの設定」のイメージであるデザイナーの女性

さて、続いて設定する場所は、はてなブログのマイページにあります。

(※具体的には、以下の場所～......後は省略！)

デザイン＞カスタマイズ＞デザインCSS
出典：うっすら透明な「上に戻る」ボタンのはてなブログ設置法 - あざなえるなわのごとし

ここでは、はてなブログで上に戻る・下に進むボタンを設置する際の設置場所などに関する設定をします。

(※以下のものを、コピペで貼り付けるだけ！)

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#7affff;
    text-align:center;
}

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



/* ページボトムへ進むボタン */
#pagebtm {
    position:fixed;
    bottom:60px;
    right:10px;
    padding:10px 20px;
    color:#7affff;
    text-align:center;
}

/* ページボトムへ進むボタン：ホバー時 */
#move-page-btm:hover{
  color:rgba(0,0,0,0);
}

参考(※本サイト用にアレンジしたため)：はてなブログ無料版に上に戻るボタンを設置 - RED NOTE

この設定では、ごろ鯛(たい)のブログのように右下に上に戻る・下に進むボタンが出るようにしています。

(※そういえば、右下にボタンが多いは右利きが多いから？)

もし、位置を変更したい場合は、「bottom(下)」と「right(右)」の数値を変更しましょう。

(※ちなみに、「top(上)」や「left(左)」に書き換えも可能！)

また、上に戻る・下に進むボタンの色変更に使うカラーコードは、以下のサイトにまとまっています。

(※変更し鯛！なら、「color」のところを変更～)

j-press.info

フッターの設定｜はてなブログで上に戻る・下に進むボタンをコピペで設置

はてなブログで上に戻る・下に進むボタンをコピペで設置する「フッターの設定」のイメージである足

さて、最後に設定する場所は先程と同じで、はてなブログのカスタマイズ内のフッターです。

(※うん、画像は気にするな！)

ここでは、はてなブログで上に戻る・下に進むボタンを設置する際のボタンを押したときの動作やボタンのアイコンを設定しています。

(※以下のものを、コピペで貼り付けるだけ！)

<!-- ページトップへ戻る -->
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn("slow");
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut("slow");
       }
   });

   // クリックした場合
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       },"slow");
       return false;
   });
})(jQuery);
</script>

<!-- トップアイコンの設定 -->
<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-circle-o-up fa-3x"></i></a>



<!-- ページボトムへ進む -->
<script>
$(function () {
   /** ページボトム処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置がボトム-1000を超えない場合
       if ($(this).scrollTop() < $(document).height()-1000) {
           $('#pagebtm').fadeIn("slow");
       } else {
           // ページボトムへをフェードアウト
           $('#pagebtm').fadeOut("slow");
       }
   });

   // クリックした場合
   $('#pagebtm').click(function() {
       // ページボトムへスクロール
       $('html, body').animate({
           scrollTop: $(document).height()
       },"slow");
       return false;
   });
})(jQuery);
</script>

<!-- ボトムアイコンの設定 -->
<a id="pagebtm" href="#btm" class="page_btm" style="display: none;"><i class="fa fa-arrow-circle-o-down fa-3x"></i></a>