MENU

「トップへ戻る」ボタンをはてなブログに設置する方法

f:id:bunntinnmalu:20180112170259p:plain

 

 

トップへ戻るボタンを設置する方法

その①:フッタに以下のコードを張り付ける

まず、「ダッシュボード」から「デザイン」を開いてください。
すると、こんな画面が出てくるので、青丸で囲まれた部分をクリックして画面を切り替えてください。

f:id:bunntinnmalu:20180112163257p:plain

そしたら、「フッタ」を選択して、以下のコードを貼り付けてください。

f:id:bunntinnmalu:20180112163453p:plain

<!-- 「ページトップへ戻る」ボタン -->
<div id="page-top-area">
<a id="page-top-button"><i class="fa fa-chevron-up"></i></a>
</div>

<script>
(function($) {
$(function() {
var $w = $(window), $pageTopArea = $('#page-top-area'), isShow = false;
setInterval(function() {
if ($w.scrollTop() > 500) {
if (!isShow) {
isShow = true;
$pageTopArea.fadeIn();
}
} else {
if (isShow) {
isShow = false;
$pageTopArea.fadeOut();
}
}
}, 1000 / 30);
$('#page-top-button').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
});
})(jQuery);
</script>

 青字部分「fa-chevron-up」のコードを変えると、矢印マークを変更することができます。

 

 fa-chevron-up
 fa-chevron-circle-up
 fa-arrow-circle-o-up
 fa-arrow-circle-up
 fa-hand-o-up
 fa-caret-up
 fa-caret-square-o-up
 fa-arrow-up
 fa-long-arrow-up
 fa-caret-square-o-up
 fa-angle-double-up
 fa-angle-up

 イメージ図は上から順番にこんな感じです。

f:id:bunntinnmalu:20180112164225p:plain

その②:デザインCSSに以下のコードを張り付ける

先ほどの画面に戻り、今度は「デザインCSS」をクリックして、以下のコードを貼り付けてください。

f:id:bunntinnmalu:20180112164353p:plain

/* ページトップへ戻るボタン */
#page-top-area {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
margin: 0;
padding: 0;
text-align: center;
}
#page-top-button {
color: rgba(0,0,0,0.6);
text-decoration: none;
display: block;
cursor: pointer;
font-size: 500%;
}
#page-top-button:hover {
color: rgba(0,0,0,0.95);
}

 

その③:「headに要素を追加」に以下のコードを張り付ける

ダッシュボード」から「設定」を開いて、「詳細設定」をクリック します。

f:id:bunntinnmalu:20180112165421p:plain

そしたら、「headに要素を追加」という項目があるので、そこに以下のコードを張り付けてください。

f:id:bunntinnmalu:20180112165602p:plain

<!-- WEBアイコンフォント「Font Awesome」 -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

これで終わりです。お疲れ様でした(^^)/

最後に

皆さんは無事に「トップへ戻るボタン」を設置出来たでしょうか?出来たのであれば嬉しいです。なお分からない点がありましたら、なんでもご相談ください(^^♪