「ページトップへ戻る」ボタンを導入する方法【はてなブログ カスタマイズ忘備録（７）】

 今回は、はてなブログで「ページトップへ戻るボタンを導入する方法についてまとめてみます。  

 カスタマイズ環境 

使用テーマ	Brooklyn
はてなブログ	はてなブログPro

 上記は、私のカスタマイズ環境です。

今回のコードは他の環境でも導入可能だと思います。また、はてなブログProでない方でも、レスポンシブにすればスマホでも利用することができます。

スマホ画面の「複合メニューバー」

「ページトップへ戻る」ボタンを導入する

それでは、私が行った「ページトップへ戻る」ボタンの導入手順を順番に整理してみます。

（１）「HTMLとJavaScript」のコードを貼る

はじめに「ページトップへ戻る」ボタンの「HTMLとJavaScript」のコードを貼ります。

〈貼り付けるコード〉 

<!-- 「ページトップへ戻る」ボタン -->
<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>

〈貼り付ける場所〉

ダッシュボードの「デザイン」＞「カスタマイズ」＞「フッタ」

〈矢印マークの変更〉※2017/5/8追記

赤字部分「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 

 

（２）「ページトップへ戻るボタンデザインCSSコード」を貼り付ける

続いて「ページトップへ戻る」ボタンのデザインを決めるCSSコードを貼ります。 

〈貼り付けるコード〉 

/* ページトップへ戻るボタン */
#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);
}

〈貼り付ける場所〉 

〈貼り付ける場所〉

 ダッシュボードの「デザイン」＞「カスタマイズ」＞「デザインcss」

はじめこのコードを設置した際、他のコードの相性なのか「ページトップへ戻る」ボタンのサイズが小さすぎたので「font-size: 500%;」を追記しサイズを指定しました。

「font-size: 500%;」

ブラウザの文字基準サイズに対して500％の値に設定。この数字を変えることで「ページトップへ戻る」ボタンのサイズを変更することができます。 

またコードの次の部分の数字を変更するで、「ページトップへ戻る」ボタンを表示する位置を変更できます。

 right: 20px;
 bottom: 20px;
 margin: 0;
 padding: 0;

 

（３）WEBアイコンフォント「Font Awesome」のコードを貼る

最後にWEBアイコンフォントのコードを貼り付けます。今回は以下のコードに変更して「head」に貼り付けることにしました。

〈貼り付けるコード〉 ※2017/5/8現在

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

〈貼り付ける場所〉

ダッシュボードの「設定」＞「詳細設定」＞「headに要素を追加」

 ※すでに同じコードが貼ってある場合は、改めて貼る必要はありません。 

これで「ページトップへ戻る」ボタンの設置は完了です。

スマホ画面に「ページトップへ戻る」ボタンを導入する

テーマをレスポンシブで使用している場合は、上記の設定でスマホ画面にも「ページトップへ戻る」ボタンが表示されるようになります。

もし、レスポンシブでない場合は、次の位置にコードを貼ることでスマホ画面でも表示することができます。（※はてなブログProの場合）

〈貼り付ける場所〉

ダッシュボードの「設定」＞「デザイン」＞「スマートフォン」＞「フッタ」

 〈貼り付けるコード〉

（１）「HTMLとJavaScript」のコード、（２）「ページトップへ戻るボタンデザインCSSコード」を順番に貼り付けます。その際（２）のコードは以下のようにコードの上に<style>、下に</style>のタグを付けます。 

<style>

※ここに（２）「ページトップへ戻るボタンデザインCSSコード」を貼り付け

</style>

これでレスポンシブで使用していないスマホ画面にも「ページトップへ戻る」ボタンを標示することができます。

ただ、スマホ画面の「ページトップへ戻る」ボタンは「複合メニューバー」にもあるので、「複合メニューバー」を使用する場合は必要ないかもしれません。

---

 「ページトップへ戻る」ボタンを導入する方法は以上です。