• TOP
• ウェブ制作

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

2018-04-06T10:38:00+09:00 2018-07-18T13:14:21Z Blogger ウェブ制作

スポンサーリンク

イメージ

Bloggerの機能の良いところを良いように考え、どんどん利用していこうと決めたが、まだどうしてももう一つ追加したい機能がある。それはページ下方に行ったらページトップボタンが出て、いつでもページトップへ戻れるもの、「ページトップボタン」だ。いろいろな人のページトップボタン設置のブログを拝見したのだが、どれも自分のブログでは不具合が出てしまう。

この記事の目次

1. 設置方法
2. カスタマイズについて

そこで仕方なく、自社のウェブサイトで利用している自作のページトップボタンを設置したら、何の問題もなく動作した。もしページトップボタンで困っている人がいたら、どんどん利用して欲しい。これはBloggerに限らず、全てのウェブサイトで動作可能（なはず）だ。当然、レスポンシブ対応済みである。

１．設置方法

1-1．Bloggerの場合

以下枠線内全てをコピーしたのち、ダッシュボード→レイアウト→ガジェットの追加で「HTML/javascript」を追加のウィンドウが開ける。
そこにコピーしたものを張り付けて保存するだけ。
ガジェットの配置場所は「ページの本文」の一番下やフッターにでも置いておけばよい。

1-2．Wordpressの場合

Wordpressについてはこの自作ページトップボタンより、プラグインを利用したほうが良いと思う。自社のオフィシャルブログも、プラグインでページトップボタンを設置している。

1-3．その他ブログ、ウェブサイトの場合

申し訳ない、その他ブログを利用したことがないので方法をお知らせすることが出来ない。ただ、基本は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>

２．カスタマイズについて

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

2-1．ボタンの色、大きさ

CSSの「PageTopボタン基本設定」のうち、ボタンの色は青字のコロン以降を自由に変えればよい。自身のサイトによって合う色があるはずだ。background-colorが背景色、colorがボタン内文字色である。
ウェブサイトの色については「Web色見本 原色大辞典」で好きな色を選び、その#6桁の数字やアルファベットをそれぞれの#部分に書き込む。

ちなみにこのボタンはオンマウスやタップ時に色が変わるように設定してある。そこの色も変更したい場合は、
#page-top a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}
のbackground-colorとcolorを変更する。特に必要ない場合は、この行をそのまま削除する。

ボタンの大きさは赤字の数値を変更する。レスポンシブに対応しているのでスマホやタブレットでも大きさを確認して欲しい。

2-2．ボタンの位置

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

ウェブサイトやブログ制作の時、いつも様々な人のブログやウェブサイトを参考にさせて頂いているが、自身の知っていることを紹介する機会は今までほとんどなかった。それは、ネット上の人達の知識には到底かなわないと思っていたからだ。
だがこんな自分のちっちゃな知識でも、誰かの役に立つのであれば今後もこのような記事を書いていこうと思う。

スポンサーリンク