今回は、はてなブログで「ページトップへ戻るボタンを導入する方法についてまとめてみます。
カスタマイズ環境
| 使用テーマ | Brooklyn |
|---|---|
| はてなブログ | はてなブログPro |
上記は、私のカスタマイズ環境です。
今回のコードは他の環境でも導入可能だと思います。また、はてなブログProでない方でも、レスポンシブにすればスマホでも利用することができます。
スマホ画面の「複合メニューバー」
「ページトップへ戻る」ボタンを導入する
今回は、つばさ（@tsubasa123）さんの以下のサイトを参考に「ページトップへ戻る」ボタンを導入させていただきました。
ここからは、私が行った導入手順を順番に整理してみます。
（１）「HTMLとJavaScript」のコードを貼る
はじめに「ページトップへ戻る」ボタンの「HTMLとJavaScript」のコードを貼ります。
〈貼り付けるコード〉
<!-- 「ページトップへ戻る」ボタン -->
<div id="page-top-area">
<a id="page-top-button"><i class="blogicon-chevron-up fa-3x"></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>
〈貼り付ける場所〉
ダッシュボードの「デザイン」＞「カスタマイズ」＞「フッタ」
（２）「読者登録ボタンデザインCSSコード」を貼り付ける
続いて「ページトップへ戻る」ボタンのデザインを決めるCSSコードを貼ります。
はじめこのコードを設置した際、他のコードの相性なのか「ページトップへ戻る」ボタンのサイズが小さすぎたので、元のコードから１か所だけ赤字部分を追記しサイズを指定しました。
「font-size: 100%;」ブラウザの文字基準サイズに対して100％の値に設定。この数字を変えることで「ページトップへ戻る」ボタンのサイズを変更することができます。
青字部分の数字を変更するで、「ページトップへ戻る」ボタンを表示する位置を変更できます。
〈貼り付けるコード〉
/* ページトップへ戻るボタン */
#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: 100%;
}
#page-top-button:hover {
color: rgba(0,0,0,0.95);
}
〈貼り付ける場所〉
ダッシュボードの「デザイン」＞「カスタマイズ」＞「デザインcss」
（３）WEBアイコンフォント「Font Awesome」のコードを貼る
最後にWEBアイコンフォントのコードを貼り付けます。今回は以下のコードに変更して「head」に貼り付けることにしました。
〈貼り付けるコード〉
<!-- WEBアイコンフォント「Font Awesome」 -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
〈貼り付ける場所〉
ダッシュボードの「設定」＞「詳細設定」＞「headに要素を追加」
※すでに同じコードが貼ってある場合は、改めて貼る必要はありません。
これで「ページトップへ戻る」ボタンの設置は完了です。
スマホ画面に「ページトップへ戻る」ボタンを導入する
テーマをレスポンシブで使用している場合は、上記の設定でスマホ画面にも「ページトップへ戻る」ボタンが表示されるようになります。
もし、レスポンシブでない場合は、次の位置にコードを貼ることでスマホ画面でも表示することができます。（※はてなブログProの場合）
〈貼り付ける場所〉
ダッシュボードの「設定」＞「デザイン」＞「スマートフォン」＞「フッタ」
〈貼り付けるコード〉
（１）「HTMLとJavaScript」のコード、（２）「読者登録ボタンデザインCSSコード」を順番に貼り付けます。その際（２）のコードは以下のようにコードの上に<style>、下に</style>のタグを付けます。
<style>
※ここに（２）「読者登録ボタンデザインCSSコード」を貼り付け
</style>
これでレスポンシブで使用していないスマホ画面にも「ページトップへ戻る」ボタンを標示することができます。
ただ、スマホ画面の「ページトップへ戻る」ボタンは「複合メニューバー」にもあるので、「複合メニューバー」を使用する場合は必要ないかもしれません。
「ページトップへ戻る」ボタンを導入する方法は以上です。