はてなブログの設定：上に戻るボタンの設置

どうも、果汁１％程度です

はてなブログの設定シリーズ

 

今回は、上に戻るボタンを設置します

ブラウザの右下のほうに

こんなボタンがを設置します

ボタンをクリックすると一番上に

画面がスクロールしてくれます

やり方はこんな感じ

フッタにコードを貼る

ダッシュボードから

「デザイン」に移動

「カスタマイズ」に移動

「フッタ」にコードをコピペ

コピペコード

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

//上に戻るボタン
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
<div id="page_top"><a href="#"></a></div>
<script>
jQuery(function() {
    var pagetop = $('#page_top');
    pagetop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) { //100pxスクロールしたら表示
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
    pagetop.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500); //0.5秒かけてトップへ移動
        return false;
    });
});
</script>

カスタマイズ

表示までの調整

if ($(this).scrollTop() > 100) { //100pxスクロールしたら表示

100pxスクロールすると上に戻るボタン

が表示されます

100の値はスクロールした距離ですね

変更可能です

スクロール速度の調整

}, 500);　//0.5秒かけてトップへ移動

500＝0.5秒です

ボタンが押されると0.5秒でトップまで

スクロールされます

カスタマイズして調度良い

速度にしましょう

デザインCSSにコードを貼る

 フッタの下にある

「デザインCSS」にコピペします

コピペコード

/*上に戻るボタン*/
#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 50px;
background: #888888;
opacity: 0.5;
border-radius: 50%;
}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

#page_top > a:hover{
background: #111111;
opacity: 1.0;
border-radius: 50%;
}

 カスタマイズ

簡単に大きさと色とデザインの

カスタマイズです

大きさ

#page_top{
width: 50px;   //この値を変更
height: 50px;  //この値を変更
position: fixed;
right: 20px;
bottom: 50px;
background: #888888;
opacity: 0.5;
border-radius: 50%;
}

アイコンカラー

表示カラーはbackgroundの値

透過率はopacityの値

で変更します

カラーの見本をこちら等から検索してもOK

WEB色見本 原色大辞典 - HTMLカラーコード

#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 50px;
background: #888888; //通常表示の色
opacity: 0.5;
border-radius: 50%;

}

#page_top > a:hover{
background: #111111; //マウスカーソルでポイントしたときの色
opacity: 1.0;
border-radius: 50%;
}

アイコンデザイン

アイコンのデザインはcontent

で変更可能です

contentに指定できる値は

こちらから検索できます

Font Awesome

f106では

f062にすると

 #page_top a::before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f102';
font-size: 25px;
color: #fff;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

以上、はてなブログに上に戻るボタン

を設置してみました

いろいろカスタマイズ可能なので

やってみるのもありですね