トップまたはボトムに一気に移るボタンの配置｜はてなブログ（無料）
この度、運営しているブログを「ワードプレス」から「はてなブログ」に切り替えました。
そこで本記事では、はてなブログの無料バージョンで、どれだけのカスタマイズができるのか試してみたので、上手くいったものをお知らせします。
今回は、トップまたはボトムに一気に移るボタンの配置です‼️
作業の手順を、わかりやすくまとめましたので、ぜひチャレンジしてみて下さいね。
作業１．設定＞詳細設定＞headに以下要素を追記
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
作業2．デザイン＞カスタマイズ＞デザインCSSに以下を追記
/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:10px 20px;
color:#f6bfbc;
text-align:center;
}
/* ページトップへ戻るボタン：ホバー時 */
#move-page-top:hover{
color:rgba(0,0,0,0);
}
/* ページボトムへ進むボタン */
#pagebtm {
position:fixed;
bottom:60px;
right:10px;
padding:10px 20px;
color:#f6bfbc;
text-align:center;
}
/* ページボトムへ進むボタン：ホバー時 */
#move-page-btm:hover{
color:rgba(0,0,0,0);
}
位置を変更する場合は、「bottom(下)」と「right(右)」の数値を変更します。
作業3．デザイン＞カスタマイズ＞フッタに以下を追記
<!-- ページトップへ戻る -->
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が200を超えた場合
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn("slow");
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut("slow");
}
});
// クリックした場合
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({
scrollTop: 0
},"slow");
return false;
});
})(jQuery);
</script>
<!-- トップアイコンの設定 -->
<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-circle-o-up fa-3x"></i></a>
<!-- ページボトムへ進む -->
<script>
$(function () {
/** ページボトム処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置がボトム-1000を超えない場合
if ($(this).scrollTop() < $(document).height()-1000) {
$('#pagebtm').fadeIn("slow");
} else {
// ページボトムへをフェードアウト
$('#pagebtm').fadeOut("slow");
}
});
// クリックした場合
$('#pagebtm').click(function() {
// ページボトムへスクロール
$('html, body').animate({
scrollTop: $(document).height()
},"slow");
return false;
});
})(jQuery);
</script>
<!-- ボトムアイコンの設定 -->
<a id="pagebtm" href="#btm" class="page_btm" style="display: none;"><i class="fa fa-arrow-circle-o-down fa-3x"></i></a>
