Bloggerに自作のページトップボタンを設置

Bloggerの機能の良いところを良いように考え、どんどん利用していこうと決めたが、まだどうしてももう一つ追加したい機能がある。

それは、ページ下方からいつでもページトップへ戻れるもの、「ページトップボタン」だ。

いろいろな人のページトップボタン設置のブログ記事を拝見したのだが、どれも自分のブログでは不具合が出てしまう。

そこで仕方なく、自社のウェブサイトで利用している自作のページトップボタンを設置したら、何の問題もなく動作した。

もし、ページトップボタンで困っている人がいたら、どんどん利用して欲しい。

これはBloggerに限らず、全てのウェブサイトで動作可能（なはず）だ。当然、レスポンシブ対応済みである。

設置方法

Bloggerの場合

以下枠線内全てをコピーしたのち、ダッシュボード→レイアウト→ガジェットの追加で「HTML/javascript」を追加のウィンドウが開ける。

そこにコピーしたものを張り付けて保存するだけ。

ガジェットの配置場所は、「ページの本文」の一番下やフッターにでも置いておけばよい。

WordPressの場合

WordPressについては、この自作ページトップボタンより、プラグインを利用したほうが良いと思う。

自社のオフィシャルブログも、プラグインでページトップボタンを設置している。

その他ブログ、ウェブサイトの場合

申し訳ない、その他ブログを利用したことがないので、方法をお知らせすることが出来ない。

しかし、基本はhtml、CSS、Javascript、と分けて書くことが出来るブログサービスなら、以下のそれぞれを追記すれば、動作するはずだ。

ウェブサイトを運営している人は、これよりもっと素晴らしいページトップボタンを設置しているに違いない。

// HTML（貼り付ける時はこのコメント行を削除）
<p id="page-top"><a href="#wrap">TOP</a></p>

// CSS（貼り付ける時はこのコメント行を削除）
<style type="text/css">
/* PageTopボタン基本設定 */
#page-top {position: fixed; bottom: 20px; right: 20px; z-index: 110;}
#page-top a {display: inline-block; text-decoration: none;
background-color: #fffbe5; opacity: 0.7; color: #808080; font-weight: bold;
height: 60px; width: 60px; line-height: 60px;
border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}
#page-top a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}

@media screen and (min-width: 0) and (max-device-width: 479px) {
#page-top {z-index: 110; position: fixed; bottom: 10px; right: 15px;
font-size: 85%;}
}
@media screen and (min-width: 480px) and (max-device-width: 666px) {
#page-top {bottom: 10px; right: 15px;}
}
@media screen and (min-width: 667px) and (max-device-width: 1023px) {
#page-top {bottom: 10px; right: 15px;}
}
</style>

// Javascript（貼り付ける時はこのコメント行を削除）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var topBtn = $('#page-top'); 
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>

カスタマイズについて

色やボタンの大きさ、ボタン内の文字などを変えたい場合は、以下を変える。

ボタンの色、大きさ

CSSの「PageTopボタン基本設定」のうち、ボタンの色は青字のコロン以降を自由に変えればよい。

自身のサイトによって合う色があるはずだ。background-colorが背景色、colorがボタン内文字色である。

ウェブサイトの色については「Web色見本 原色大辞典」で好きな色を選び、その#6桁の数字やアルファベットを、それぞれの#部分に書き込む。

ちなみに、このボタンはオンマウスやタップ時に、色が変わるように設定してある。そこの色も変更したい場合は、

#page-top a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}

のbackground-colorとcolorを変更する。

特に必要ない場合は、この行をそのまま削除する。

ボタンの大きさは赤字の数値を変更する。

レスポンシブに対応しているのでスマホやタブレットでも大きさを確認して欲しい。

ボタンの位置

画面上のどのへんに、ページトップボタンが配置されればよいかの調整は、ピンク文字の数値を変更する。上記の場合、画面下及び右より各20ピクセルの位置にしてある。適宜変更して欲しい。

誰かの役に立つ情報を

ウェブサイトやブログ制作の時、いつも様々な人のブログやウェブサイトを参考にさせて頂いている。

しかし、自身の知っていることを紹介する機会は今までほとんどなかった。それは、ネット上の人達の知識には、到底かなわないと思っていたからだ。

だが、こんな自分のちっちゃな知識でも、誰かの役に立つのであれば、今後もこのような記事を書いていこうと思う。

【お詫び 〜 January, 2021】
Google Bloggerで始めたが、この度Wordpressに変更した。
こんなことを書いておいて、Bloggerに関する記事が意味なさなくなってしまうかもしれないことをお許しいただきたい。